<template>
<div class="label-sta" >
  <div class="top-a">
    <div  class="my-blue-title">标签总览</div>
    <div class="top-charts" ref="topEcharts"></div>
  </div>
  <div class="bottom">
    <div class="bottom-left" >
      <div  class="my-blue-title">标签各级别数量</div>
      <div class="left-echarts" ref="leftEcharts">

      </div>
    </div>
    <div class="bottom-right">
      <div  class="my-blue-title">标签各级别数量</div>
      <div class="right-echarts" ref="rightEcharts">

      </div>
    </div>
  </div>
</div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {getLabelStaEcharts} from "@/service/label-sta";
import {setLabelStaLeftEcharts, setLabelStaRightEcharts, setLabelStaTopEcharts} from "@/echarts/option";

export default {
  name: "LabelSta",
  setup() {

    function buildTree(data, id, pid) {

      var mapObj = {};

      data.forEach(function (item) {
        // map[item.id] = item;
        eval('mapObj[item.' + id + '] = item;')   //当前ID
      });
      let val = [];
      data.forEach(function (item) {
        console.log(mapObj)
        // var parent = map[item.parent_group_id];
        let parent = eval('mapObj[item.' + pid + '];')     //上级ID

        if (parent) {
          (parent.children || (parent.children = [])).push(item);
          parent.RN++;
        } else {
          val.push(item);
        }
      });

      return val;
    }
    const leftEcharts = ref(null)
    const rightEcharts = ref(null)
    const topEcharts = ref(null)
    onBeforeMount(() => {
      getLabelStaEcharts().then(res => {
        let date = res.msg;
        let codeData = date[0].Rows;
        // let codeData =[
        //   {
        //     "LABEL_NUMBER": "501565",
        //     "PARENT_LABEL_ID1": "#",
        //     "LABEL_ID": "0001",
        //     "STATE": "1",
        //     "REMARKS": "市信用平台",
        //     "OPERATION_TIME": "2021-06-21 16:20:21",
        //     "UUID": "C362CB1D505631B2E053017910AC0A79",
        //     "RN": 1,
        //     "LABEL_NAME": "信用信息",
        //     "LABEL_LEVEL": 1
        //   },
        //   {
        //     "LABEL_NUMBER": "0",
        //     "PARENT_LABEL_ID1": "0001",
        //     "LABEL_ID": "00010002",
        //     "STATE": "1",
        //     "OPERATION_TIME": "2021-05-28 19:01:28",
        //     "UUID": "C362CB1D505931B2E053017910AC0A79",
        //     "RN": 2,
        //     "PARENT_LABEL_ID": "0001",
        //     "LABEL_NAME": "许可",
        //     "LABEL_LEVEL": 2
        //   },
        //   {
        //     "LABEL_NUMBER": "0",
        //     "PARENT_LABEL_ID1": "0001",
        //     "LABEL_ID": "00010003",
        //     "STATE": "1",
        //     "OPERATION_TIME": "2021-05-28 19:01:37",
        //     "UUID": "C362CB1D505A31B2E053017910AC0A79",
        //     "RN": 3,
        //     "PARENT_LABEL_ID": "0001",
        //     "LABEL_NAME": "处罚",
        //     "LABEL_LEVEL": 2
        //   },
        //   {
        //     "LABEL_NUMBER": "41369",
        //     "PARENT_LABEL_ID1": "0001",
        //     "LABEL_ID": "00010004",
        //     "STATE": "1",
        //     "REMARKS": "逾期信息",
        //     "OPERATION_TIME": "2021-06-21 16:20:40",
        //     "UUID": "C474FBD1DB582824E053017910AC3E26",
        //     "RN": 4,
        //     "PARENT_LABEL_ID": "0001",
        //     "LABEL_NAME": "逾期",
        //     "LABEL_LEVEL": 2
        //   },
        //   {
        //     "LABEL_NUMBER": "244536",
        //     "PARENT_LABEL_ID1": "#",
        //     "LABEL_ID": "0003",
        //     "STATE": "1",
        //     "REMARKS": "市档案中心数据",
        //     "OPERATION_TIME": "2021-06-21 16:34:56",
        //     "UUID": "C4D9B99AC70C2820E053017910AC1E09",
        //     "RN": 5,
        //     "LABEL_NAME": "电子档案",
        //     "LABEL_LEVEL": 1
        //   },
        //   {
        //     "LABEL_NUMBER": "0",
        //     "PARENT_LABEL_ID1": "0003",
        //     "LABEL_ID": "00030001",
        //     "STATE": "1",
        //     "REMARKS": "“一网通办”电子政务档案",
        //     "OPERATION_TIME": "2021-06-21 16:35:32",
        //     "UUID": "C4D9B99B80832820E053017910AC1E09",
        //     "RN": 6,
        //     "PARENT_LABEL_ID": "0003",
        //     "LABEL_NAME": "“一网通办”电子政务档案",
        //     "LABEL_LEVEL": 2
        //   },
        //   {
        //     "LABEL_NUMBER": "0",
        //     "PARENT_LABEL_ID1": "0003",
        //     "LABEL_ID": "00030002",
        //     "STATE": "1",
        //     "OPERATION_TIME": "2021-06-21 16:36:18",
        //     "UUID": "C4D9B99B80842820E053017910AC1E09",
        //     "RN": 7,
        //     "PARENT_LABEL_ID": "0003",
        //     "LABEL_NAME": "电子公文档案",
        //     "LABEL_LEVEL": 2
        //   },
        //
        //
        //   {
        //     "LABEL_NUMBER": "162874",
        //     "PARENT_LABEL_ID1": "#",
        //     "LABEL_ID": "0004",
        //     "STATE": "1",
        //     "REMARKS": "测试标签psj二级",
        //     "OPERATION_TIME": "2021-10-25 18:01:21",
        //     "UUID": "FF37DE00CDB84DBFA9427A6C85A0F846",
        //     "RN": 8,
        //     "LABEL_NAME": "测试标签psj二级",
        //     "LABEL_LEVEL": 1
        //   },
        //   {
        //     "LABEL_NUMBER": "0",
        //     "PARENT_LABEL_ID1": "#",
        //     "LABEL_ID": "0005",
        //     "STATE": "1",
        //     "REMARKS": "测试标签psj二级",
        //     "OPERATION_TIME": "2021-10-25 18:01:45",
        //     "UUID": "D8BD082984F84B9EBA69EED5605CB1AB",
        //     "RN": 9,
        //     "LABEL_NAME": "测试",
        //     "LABEL_LEVEL": 1
        //   },
        //   {
        //     "LABEL_NUMBER": "0",
        //     "PARENT_LABEL_ID1": "#",
        //     "LABEL_ID": "0006",
        //     "STATE": "1",
        //     "OPERATION_TIME": "2021-10-25 18:01:59",
        //     "UUID": "E153FA3F1EF045DCB0019C11683155D7",
        //     "RN": 10,
        //     "LABEL_NAME": "测试标签zzy",
        //     "LABEL_LEVEL": 1
        //   },
        //   {
        //     "LABEL_NUMBER": "0",
        //     "PARENT_LABEL_ID1": "#",
        //     "LABEL_ID": "0007",
        //     "STATE": "1",
        //     "REMARKS": "EADSDSASD",
        //     "OPERATION_TIME": "2021-10-25 18:02:07",
        //     "UUID": "1D6FF8339BDA4480A9A2F8E4560E1E59",
        //     "RN": 11,
        //     "LABEL_NAME": "测试标签psj",
        //     "LABEL_LEVEL": 1
        //   },
        //   {
        //     "LABEL_NUMBER": "269",
        //     "PARENT_LABEL_ID1": "",
        //     "LABEL_ID": "0008",
        //     "STATE": "1",
        //     "REMARKS": "国有企业在国家领导下",
        //     "OPERATION_TIME": "2023-07-29 18:30:57",
        //     "UUID": "9A0A99B7EEFE4999B625C9E9733781B1",
        //     "RN": 12,
        //     "PARENT_LABEL_ID": "",
        //     "LABEL_NAME": "国有企业",
        //     "LABEL_LEVEL": 1
        //   },
        //   {
        //     "LABEL_NUMBER": "300",
        //     "PARENT_LABEL_ID1": "0008",
        //     "LABEL_ID": "00080001",
        //     "STATE": "1",
        //     "REMARKS": "国内电子半导体高端制造",
        //     "OPERATION_TIME": "2023-07-29 18:31:07",
        //     "UUID": "8339EEFE4C0249F7972A2D0D62E0F3B9",
        //     "RN": 13,
        //     "PARENT_LABEL_ID": "0008",
        //     "LABEL_NAME": "联想",
        //     "LABEL_LEVEL": 2
        //   }
        // ]
        let level = 1;
        let leftData = [];
        for (let i = 0; i < codeData.length; i++) {
          if (codeData[i].LABEL_LEVEL >= level) {
             level = codeData[i].LABEL_LEVEL;
          }
        }
        for (let i = 1; i <= level; i++) {
          leftData[i - 1] = 0;
          for (let j = 0; j < codeData.length; j++) {
            if (codeData[j].LABEL_LEVEL == i) {
              leftData[i - 1]++;
            }

          }
        }

        let xData = [];
        for (let i = 1; i <= level; i++) {
          let x = i + "级标签";
          xData.push(x);
        }
        setLabelStaLeftEcharts(leftEcharts.value,xData,leftData);

        let rightX = [];
        let rightXL = [];
        let rightData = [];
        for (let i = 0; i < codeData.length; i++) {
          if (codeData[i].PARENT_LABEL_ID1 == "#" || !(codeData[i].PARENT_LABEL_ID1.trim())) {
            rightX.push({
              "name": codeData[i].LABEL_NAME,
              "id": codeData[i].LABEL_ID
            });
            rightXL.push(codeData[i].LABEL_NAME);
          }
        };
        for (let i = 0; i < rightX.length; i++) {
          rightData[i] = 0;
          for (let j = 0; j < codeData.length; j++) {
            if (codeData[j].PARENT_LABEL_ID1.substring(0, 4) == rightX[i].id) {
              rightData[i]++;
            }
          }

        };
        setLabelStaRightEcharts(rightEcharts.value,rightXL,rightData);

        let total_number = 0;
        for (let i = 0; i < codeData.length; i++) {
          total_number += codeData[i].LABEL_NUMBER * 1;
        }
        codeData.push({
          "LABEL_ID": "#",
          "LABEL_LEVEL": 0,
          "LABEL_NAME": "标签总览",
          "OPERATION_TIME": "",
          "PARENT_LABEL_ID1": "",
          "RN": 0,
          "STATE": "1",
          "LABEL_NUMBER": total_number,
          "UUID": ""
        });
        let part_data = JSON.parse(JSON.stringify(codeData).replace(/LABEL_NAME/g, 'name'))
        for (let i = 0; i < part_data.length; i++) {
          part_data[i].name = part_data[i].name + "(" + part_data[i].LABEL_NUMBER + ")";
        }
        part_data = buildTree(part_data, "LABEL_ID", "PARENT_LABEL_ID1");
        setLabelStaTopEcharts(topEcharts.value,part_data[0]);
      })
    })
    return {
      leftEcharts,
      rightEcharts,
      topEcharts
    }
  }
}
</script>

<style scoped lang="scss">
.label-sta{
  height: max-content !important;
  background: #D4E6FF !important;

  .bottom{
    .left-echarts,.right-echarts{
      flex: 1;
      overflow: hidden;
    }
    .bottom-left{

      margin-right: 10px;
    }
    .bottom-left,.bottom-right{
      height: 360px;
      display: flex;
      flex-direction: column;
      flex: 1;
      flex-shrink: 0;
      background-color: #fff;
      box-shadow: 0 0 10px 1px #e9e9e9;
    }


    display: flex;
    justify-content: space-between;
  }
  .top-a{
    .top-charts{
      flex: 1;
      overflow: hidden;
    }
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin-bottom: 10px;
    height: 500px;
    box-shadow: 0 0 10px 1px #e9e9e9;
  }
}

</style>
