<template>
  <Module class="flex-grow h-1/3" :loading="loading" :error="error">
    <!-- :info="bsMeta && bsMeta['emplRate']" -->
    <template #title>机电人员统计</template>
    <template v-if="!loading">
      <div class="personFlex">
        <div
          style="width: 100%; height: 100%;"
          id="echartid"
          class="echarts1"
        ></div>
        <div class="itembox">
          <div
            class="personClomu"
            :style="getStyle(index)"
            :class="`person` + (index + 1)"
            v-for="(item, index) in listOne.data"
            :key="index"
          >
            <img src="../assets/spare01.png" alt="" />
            <div>
              <span class="s1">{{ item.name }}</span>
              <span class="s2">
                {{ parseInt(item.maintNum) + parseInt(item.managerNum) }}
                <span class="txt">人</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Module>
</template>
<script lang="ts" setup>
import { computed, defineProps, reactive, watch, ref } from 'vue'
import { useStore } from 'vuex'
import { key } from '@/store'
import * as echarts from 'echarts'
import chartsPerson from '../assets/chartsPerson.png'
import { userPermissionNum } from '@/api/ele-control-cabin'
const store = useStore(key)
const orgType = computed(() => store.state.ele?.orgType)
const pOrg = computed(() => store.state.ele?.pOrg)
const orgCode = computed(() => store.state.ele?.orgCode)
const refresh = computed(() => store.state.ele?.refresh)
const currentTime = computed(() => store.state.ele?.currentTime)
watch([refresh], (v) => {
  getNumber()
})
let showItem = ref(false)
function getStyle(i) {
  if (!showItem.value) {
    return
  }
  let n = listOne.data.length
  return {
    animationDelay: i * 0.1 + 's',
    opacity: 1,
    transform: `rotate(${(360 / n) * i * 1 + 'deg'} )
					translateY(120px)
					rotate(${-(360 / n) * i + 'deg'})`,
  }
}
const charts = ref(null)
const chartsOption1 = reactive({})
// 机电巡检格式处理
const handleChartData = (dataList: any[]) => {
  let sum = 0
  let series: any[] = []
  const colorArr = [
    '#2D82F7',
    '#D59035',
    '#58B8C6',
    '#D59035',
    '#E1A18E',
    '#6AD5CA',
  ]
  dataList.map((item: any, index: any) => {
    sum += parseInt(item.maintNum || 0) + parseInt(item.managerNum || 0)
    series.push({
      value: parseInt(item.maintNum || 0) + parseInt(item.managerNum || 0),
      name: item.name,
      itemStyle: {
        color: colorArr[index],
        borderWidth: 4,
        borderRadius: 50,
        borderColor: '#0c1622',
      },
    })
  })
  return {
    sum,
    series,
  }
}
const listOne = reactive({
  data: [],
})
const getNumber = () => {
  console.log('xxxaa')
  let params = {}
  if (orgType.value) {
    params = pOrg.value
  } else {
    params = orgCode.value
  }
  userPermissionNum({
    year: currentTime.value,
    ...params,
  }).then(({ data }) => {
    if (data) {
      console.log('xxx')
      if (orgType.value) {
        listOne.data = data.filter((i) => Boolean(+i.maintNum + +i.managerNum))
      } else {
        // 最后一级
        let item = data[0]
        listOne.data = [
          { name: '管理人员', managerNum: item.managerNum, maintNum: 0 },
          { name: '作业人员', managerNum: 0, maintNum: item.maintNum },
        ]
      }
      setTimeout(() => {
        showItem.value = true
      }, 100)
      Object.assign(chartsOption1, handleChartData(data))
      console.log(chartsOption1)
      drawChart()
    }
  })
}
const drawChart = () => {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('echartid'))
  console.log(chartsOption1)
  if (chartsOption1) {
    document.getElementById('echartid').setAttribute('_echarts_instance_', '')
    // 绘制图表
    myChart.setOption({
      title: {
        //   text: `${a|params.sum}{人}`,
        text: [`{a| ${chartsOption1.sum}}{b|人}`],
        left: 145,
        top: 135,
        textAlign: 'center',
        textStyle: {
          color: '#F0F2F5',
          fontSize: 22,
          rich: {
            a: {
              fontSize: 22,
            },
            b: {
              fontSize: 14,
            },
          },
        },
      },
      grid: {
        top: 'middle',
        left: 0,
        bottom: 0,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      graphic: {
        elements: [
          {
            type: 'image',
            z: 3,
            style: {
              image: chartsPerson,
              width: 100,
              height: 100,
            },
            left: '100',
            top: '100',
          },
        ],
      },
      series: [
        {
          name: '机电人员统计',
          type: 'pie',
          radius: ['50', '60'],
          width: 150,
          center: ['150px', '150px'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: chartsOption1.series,
        },
      ],
    })
  }
}
</script>
<style lang="scss" scoped>
.personFlex {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .itembox {
    position: absolute;
    top: 130px;
    left: 173px;
    width: 80%;
    height: 250px;
  }
  .echarts1 {
    position: absolute;
    top: 10px;
    left: 52px;
    width: 80%;
    height: 250px;
    z-index: 3;
  }

  .personClomu {
    position: absolute;
    display: flex;
    align-items: center;
    transition: all 0.4s;
    opacity: 0;
    transform-origin: center center;
    img {
      width: 32px;
      height: 28px;
      margin-bottom: 5px;
    }

    > div {
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        display: inline-block;
      }

      .s1 {
        font-size: 14px;
        color: #778fa4;
      }

      .s2 {
        font-size: 24px;
        font-weight: 500;
        color: #fff;

        .txt {
          font-size: 10px;
          color: #fff;
        }
      }
    }
  }
}
</style>
