<!--
  @description: 报表统计-采购单位合格供应商分布-Echarts
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/28
-->
<template>
  <dl
    class="reportChart_crud"
  >
    <dt>
      本年采购单位合格供应商分布情况
      <p class="right">
        <span>
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
      </p>
    </dt>
    <dd>
      <MyEcharts
        :id="'buyerAndQualifiedSupplierChart'"
        :height="height"
        class="echart-dom"
        :option="chartOption"
        @myCharVm="myCharVm"
      />
      <!-- 报表统计-采购单位统计-合格供应商列表详情 -->
      <buyerAndQualifiedSupplierList ref="tenderDetail" />
    </dd>
  </dl>
</template>

<script>
/* api */
import { listQualifiedSuppliersOfPurchaserInfoPages, exportQualifiedSuppliersOfPurchaserInfoPages } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
/* 混入 */
import { reportChartGroupMixin } from './../../mixins/reportChartGroup.js'
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
import buyerAndQualifiedSupplierList from './buyerAndQualifiedSupplierList-dialog.vue' // 报表统计-采购单位统计-合格供应商列表详情
export default {
  name: 'BuyerAndQualifiedSupplierChart',
  components: {
    MyEcharts, // 图表
    buyerAndQualifiedSupplierList// 报表统计-采购单位统计-合格供应商列表详情
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      /* 字典信息-start */
      ...reportChartGroupMixin,
      /* 字典信息-end */
      // 查询条件
      searchData: {
      },
      // 图表配置
      chartOption: {}
    }
  },
  methods: {
    // echarts 实例
    myCharVm(vm) {
      const _this = this
      // 注册 click事件
      vm.on('click', function(param) {
        // 接收原数据并且打开弹框
        _this.openDialog(param.data.data)
      })
    },
    // 下载
    dowloadClick() {
      exportQualifiedSuppliersOfPurchaserInfoPages(this.searchData).then(res => {
        download(res, '采购单位合格供应商分布信息表.xls')
      })
    },
    // 查看
    openDialog(row) {
      this.$refs.tenderDetail.open(row, this.searchData)
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData
        }
      }
      const data = {
        ...searchData
      }
      listQualifiedSuppliersOfPurchaserInfoPages(data).then(res => {
        this.init(res.data)
      })
    },
    /**
      * 渲染echarts
      * @param {records} Array 数据
      */
    init(records) {
      const textColor = this.chartData.textColor // 文本颜色
      /* ------------------------------------------------- */
      const data = {
        seriesName: '采购单位',
        seriesData: records.map((item, index) => {
          return {
            data: item, // 原始数据项
            dataIndex: index, // 数据在传入的 data 数组中的 index
            value: item.qualifiedSupplierNumbers, // 合格供应商数量
            name: item.buyersName// 采购单位名称
          }
        })
      }
      /* ------------------------------------------------- */
      this.chartOption = {
        // 标题
        title: {
          show: false
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}:{b} <br/> 合格供应商数量 : {c} ({d}%)'
        },
        legend: {
          show: false,
          // type: 'scroll',
          orient: 'vertical',
          x: '60%', // 可设定图例在左、右、居中
          y: 'center', // 可设定图例在上、下、居中
          icon: 'circle', // 形状
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 16, // 每个图列之间的间隔
          textStyle: {
            color: textColor // 图例文字颜色
          }
        },
        series: [
          {
            name: data.seriesName,
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            label: {
              color: textColor
            },
            data: data.seriesData
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
