<!--
  @description: 报表统计-完成项目金额
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/02/25
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      本年完成项目金额
      <p class="right">
        <span>
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
      </p>
    </dt>
    <dd>
      <pieChart
        ref="pieChart"
        @myCharVm="myCharVm"
      />
    </dd>

    <!-- 报表统计-采购单位统计-合格供应商列表详情 -->
    <completeProjectMoneyList ref="tenderDetail" />
  </dl>
</template>

<script>
/* api */
import { getCompleteProjectAmountListByItemType, exportCompleteProjectAmountListByItemType } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { filterDictText, download } from '@/assets/js/utils'// 常用方法
/* 混入 */
import { itemsGroupMixin } from './../../mixins/reportChartGroup.js'
/* 組件 */
import pieChart from './../../components/pieChart.vue'// 饼图-图表
import completeProjectMoneyList from './completeProjectMoneyList-dialog.vue' // 报表统计-采购单位统计-合格供应商列表详情

export default {
  name: 'CompleteProjectMoneyChart',
  components: {
    pieChart, // 饼图-图表
    completeProjectMoneyList// 报表统计-采购单位统计-合格供应商列表详情
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      /* 字典信息-start */
      ...itemsGroupMixin,
      /* 字典信息-end */
      // 查询条件
      searchData: {

      }
    }
  },
  methods: {
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
      const data = {
        ...searchData
      }
      getCompleteProjectAmountListByItemType(data).then(res => {
      // 图表数据
        const option = {
          unit: '万元', // 计量单位
          title: {
            // text: '完成项\n目金额'
            text: ''
          },
          radius: ['0%', '60%'],
          series: {
            data: res.data.map(item => {
              return {
                data: item,
                value: item.tenderAmount, // 项目数量
                name: filterDictText(this.itemsTypeList, item.itemType)// 品目方式
              }
            })

          }
        }
        // console.log(option)
        this.$refs.pieChart.init(option)
      })
    },
    // 下载导出
    dowloadClick() {
      exportCompleteProjectAmountListByItemType(this.searchData).then(res => {
        download(res, '完成项目金额.xls')
      })
    },
    // echarts 实例
    myCharVm(vm) {
      const _this = this
      // 注册 click事件
      vm.on('click', function(param) {
        // 接收原数据并且打开弹框
        _this.openDialog(param.data.data)
      })
    },
    // 查看
    openDialog(row) {
      this.$refs.tenderDetail.open(row)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
