<template>
  <div class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup>
  import { ref, onBeforeUnmount, computed } from 'vue';
  import ECharts from '@/components/ECharts/index.vue';
  import echarts from '@/components/ECharts/config';
  const Tenantlist = ref([]);
  import { getTractRecordFollowRate } from '@/api/dataScreenMock';
  const load = ref(false);
  const treeValue = ref([]);
  const timer1 = ref();
  onBeforeUnmount(() => {
    if (timer1.value) {
      clearInterval(timer1.value);
      timer1.value = null;
    }
  });
  const props = defineProps({
    isAdmin: Boolean,
    tenantId: [String, Number, Object],
  });
  var option = computed(() => {
    return {
    tooltip: {
      formatter: '{b}:<br />完成率： {c}%',
    },
    color: ['rgb(100,200,300)'],
    series: [
      {
        name: '完成率',
        type: 'treemap',
        visibleMin: 100,
        data: [
          // 注意，最外层是一个数组，而非从某个根节点开始。
          {
            value: 100,
            children: treeValue.value,
          },
          // {
          //     value: [23, 59, 12]
          //     // 如果没有children，可以不写
          // },
          // ...
        ],
        label: {
          normal: {
            formatter: (a) => {
              let html = '';
              html += a.name + '\n' + a.seriesName + ':' + a.data.value+ '%';
              return html;
            },
          },
        },
        width: '100%',
        height: '100%',
        leafDepth: 2,
        levels: [
          {
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 0,
                gapWidth: 0,
              },
            },
          },
          {
            colorSaturation: [0.3, 0.6],
            itemStyle: {
              normal: {
                borderColorSaturation: 0.0,
                gapWidth: 5,
                borderWidth: 2,
              },
            },
          },
          {
            colorSaturation: [0.3, 0.5],
            itemStyle: {
              normal: {
                borderColorSaturation: 0.0,
                gapWidth: 1,
              },
            },
          },
          {
            colorSaturation: [0.3, 0.5],
          },
        ],
      },
    ],
    };
  });
  const param = {};
  if (!props.isAdmin) {
    param['tenant'] = props.tenantId;
  }
  const query = () => {
    load.value = true;
    getTractRecordFollowRate(param).then((res) => {
      if (res.result) {
        load.value = false;
        treeValue.value = res.result
      }
    });
  };
  query();
  timer1.value = setInterval(() => {
    if (!load.value) {
      query();
    }
  }, 6000);
</script>

<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: calc(100%);
  }
  .actual-total {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    margin-top: 10px;
    margin-right: 4px;
    .actual-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 50px;
      margin-right: 1px;
      font-family: MetroDF;
      font-size: 32px;
      color: #66ffff;
      background: url('../images/total.png') no-repeat;
      background-size: 100% 100%;
      &:last-child {
        margin-right: 0;
        font-size: 22px;
      }
    }
    .expect-total {
      position: absolute;
      top: -30px;
      right: 5px;
      font-size: 14px;
      color: #ffffff;
      i {
        font-style: normal;
        font-style: oblique;
        color: #ff8100;
      }
    }
  }
</style>
