<!--
  @description: 报表统计-自采与集采占比
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/02/25
-->
<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>
        <span @click="handChange('00')">数量</span>
        <span class="lin not-select">｜</span>
        <span @click="handChange('01')">金额</span>
      </p>
    </dt>
    <dd>
      <pieChart
        ref="pieChart"
      />
    </dd>
  </dl>
</template>

<script>
/* api */
import { getPurchasePlanNumByFocusStatus, getPurchasePlanAmountByFocusStatus, exportPurchasePlanByFocusStatus } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { filterDictText, download } from '@/assets/js/utils'// 常用方法
/* 混入 */
import { procTypeGroupMixin } from './../../mixins/reportChartGroup.js'
/* 組件 */
import pieChart from './../../components/pieChart.vue'// 饼图-图表
export default {
  name: 'OneselfProcOrGatherProcRateChart',
  components: {
    pieChart// 饼图-图表
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      /* 字典信息-start */
      ...procTypeGroupMixin,
      /* 字典信息-end */
      type: '00', // 查询类型
      // 查询条件
      searchData: {
      }
    }
  },
  methods: {
    // 下载
    dowloadClick() {
      const data = { ...this.searchData }
      exportPurchasePlanByFocusStatus(data).then(res => {
        download(res, '自采与集采占比信息表.xls')
      })
    },
    /**
     *  查询类型切换
     * @param {type} String 00 数量 01 金额
     *   */
    handChange(type) {
      this.type = type
      // 获取数据
      this.initChart()
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData
        }
      }
      const data = {
        ...this.searchData
      }
      if (this.type === '00') {
        this.queryNumber(data)
      } else if (this.type === '01') {
        this.queryMoney(data)
      }
    },
    // 查询数量
    queryNumber(data) {
      getPurchasePlanNumByFocusStatus(data).then(res => {
      // 图表数据
        const option = {
          unit: '个', // 计量单位
          title: {
            text: '数量\n占比'
          },
          radius: ['0%', '60%'],
          series: {
            data: res.data.map(item => {
              return {
                value: item.purchaseNum, // 采购数量
                name: filterDictText(this.procTypeTowList, item.purchaseType)// 品目方式
              }
            })
          }
        }
        this.$refs.pieChart.init(option)
      })
    },
    // 查询金额
    queryMoney(data) {
      getPurchasePlanAmountByFocusStatus(data).then(res => {
      // 图表数据
        const option = {
          unit: '万元', // 计量单位
          title: {
            text: '金额\n占比'
          },
          radius: ['0%', '60%'],
          series: {
            data: res.data.map(item => {
              return {
                value: item.purchaseAmount, // 采购金额
                name: filterDictText(this.procTypeTowList, item.purchaseType)// 品目方式
              }
            })
          }
        }
        this.$refs.pieChart.init(option)
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
