<!--
  @description: 报表统计-供应商类别
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/03/06
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      初审供应商类别占比情况
      <p class="right">
        <span style="margin-right:10px">
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
      </p>
    </dt>
    <dd>
      <pieChart
        ref="pieChart"
        @myCharVm="myCharVm"
      />
      <supplierCategoryDialog ref="tenderDetail" />
    </dd>
  </dl>
</template>

<script>
/* api */
import { getSupplierTypeInfo, exportSupplierTypeInfo } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { filterDictText, download } from '@/assets/js/utils'// 常用方法
/* 混入 */
import { supplierTypeGroupMixin } from './../../mixins/reportChartGroup.js'
/* 組件 */
import pieChart from './../../components/pieChart.vue'// 饼图-图表
import supplierCategoryDialog from './supplierCategory-dialog'// 详情
export default {
  name: 'SupplierCategoryChart',
  components: {
    pieChart, // 饼图-图表
    supplierCategoryDialog// 详情
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      dd_height: 'calc(' + this.height + ' + 2.5rem)', // 内容的高度
      /* 字典信息-start */
      ...supplierTypeGroupMixin,
      /* 字典信息-end */
      // 查询条件
      searchData: {}
    }
  },
  methods: {
    // echarts 实例
    myCharVm(vm) {
      const _this = this
      // 注册 click事件
      vm.on('click', function(param) {
        // 接收原数据并且打开弹框
        _this.openDialog(param.data.data)
      })
    },
    // 下载
    dowloadClick() {
      const data = { ...this.searchData }
      exportSupplierTypeInfo(data).then(res => {
        download(res, '供应商类别表.xls')
      })
    },
    // 详情
    openDialog(row) {
      this.$refs.tenderDetail.open(row)
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
      const data = {
        ...searchData
      }
      getSupplierTypeInfo(data).then(res => {
        const type = res.data
        const supplierTypeList = []
        // 处理数据结构为数组
        for (const key in type) {
          supplierTypeList.push({
            number: type[key],
            grade: key,
            name: filterDictText(this.supplierCategoryList, key)
          })
        }
        // 图表数据
        const option = {
          unit: '个', // 计量单位
          title: {
            text: '类别\n占比'
          },
          series: {
            data: supplierTypeList.map(item => {
              return {
                data: item, // 原始数据项
                value: item.number, // 数量
                name: item.name // 类别
              }
            })
          }
        }
        this.$refs.pieChart.init(option)
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
