<template>
  <span>
    <a-empty
      v-show="!hasData | !selectYear | !selectUnidId"
      :class="$style.empty"
      :description="description"
    ></a-empty>
    <sd-echart
      v-show="hasData && selectYear && selectUnidId"
      :class="$style.onepieClass"
      :options="chartData"
      autoresize
    />
  </span>
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import iamAuditDscService from '../iam-audit-dsc-service'
import components from './_import-components/iam-audit-twopie-import'

export default {
  name: 'IamAuditFourpie',
  metaInfo: {
    title: 'IamAuditOnepie',
  },
  components,
  props: {
    /**
     * 统计的组织ID
     */
    unidId: {
      type: Array,
      default: () => {
        return []
      },
    },
    /**
     * 统计的年份
     */
    planYear: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      hasData: false, // 是否检查出数据
      chartData: {
        textStyle: {
          color: '#8a8a8a',
          fontSize: 13,
        },
        legend: {
          orient: 'vertical',
          right: 59,
          icon: 'circle',
          top: 50,
          textStyle: {
            color: '#8a8a8a',
            lineHeight: 18,
          },
          data: [],
        },
        series: [
          {
            top: 30,
            left: -300,
            type: 'pie',
            radius: [60, 90],
            data: [],
            label: {
              padding: [0, -90],
              formatter: '{b}\n',
            },
            labelLine: {
              length2: 90,
            },
          },
          {
            type: 'pie',
            top: 30,
            left: -300,
            radius: [1111, 1111],
            label: {
              show: true,
              position: 'center',
              fontSize: 20,
              fontWeight: 'bold',
              formatter: ['{name|{b}}', '{num|{c}}'].join('\n'),
              rich: {
                name: {
                  fontSize: 14,
                  lineHeight: 30,
                  color: '#333',
                },
                num: {
                  fontSize: 30,
                  fontWeight: 600,
                  color: '#333',
                },
              },
            },
            emphasis: {
              disabled: true,
              scale: true,
              scaleSize: 0,
            },
            tooltip: {
              show: false,
            },
            labelLine: {
              show: true,
            },
            data: [],
          },
        ],
      },
    }
  },
  computed: {
    // 因为props传值不会自动更新，使用计算值
    selectYear() {
      return this.planYear
    },
    // 因为props传值不会自动更新，使用计算值
    selectUnidId() {
      if (this.unidId.length > 0) {
        return this.unidId
      } else {
        return null
      }
    },
    description() {
      if (!this.selectYear | !this.selectUnidId) {
        return '未选择年份以及审计机构'
      } else {
        return '暂无数据'
      }
    },
  },
  created() {
    // 获取项目总览
    this.getData()
  },
  methods: {
    getData() {
      debugger
      // 如果没有选时间或组织机构，则直接返回
      if (!this.selectYear | !this.selectUnidId) {
        return
      }
      // 获取项目总览
      const params = {
        columns: 'ASSET_TYPE_CN,ASSET_TYPE_SUM,PERCEN',
        maxResults: 9999,
        startPosition: 0,
        expressions: [],
        dateStart: parseFloat(this.selectYear) + '',
        dateEnd: parseFloat(this.selectYear) + '',
        unitNames: "'" + this.selectUnidId[0].name + "'",
        unitIds: "'" + this.selectUnidId[0].id + "'",
      }
      iamAuditDscService.getAuditFindMoneyList(params).then((res) => {
        if (res.data.data.length === 0) {
          return
        }
        this.hasData = true

        const respData = res.data
        this.chartData.series[1].data.push({ value: respData.sum, name: '金额总计' })
        this.chartData.series[0].data = respData.data.map((item) => {
          return {
            name: item.ASSET_TYPE_CN,
            value: parseFloat(item.ASSET_TYPE_SUM, 10),
            ASSET_TYPE: item.ASSET_TYPE,
            PERCENT: item.PERCENT,
          }
        })
        const data = this.chartData.series[0].data
        this.chartData.legend.data = respData.data.map((item) => {
          return item.ASSET_TYPE_CN
        })
        this.chartData.legend.formatter = function(name) {
          const obj = data.find((item) => item.name === name)
          return name + ' | ' + obj.PERCENT + ' ' + obj.value + '万元'
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.onepie-class {
  width: 100%;
  height: 300px;
}
.empty {
  padding-top: 80px;
  margin: 0;
}
</style>
