<!--
  @description: 报表统计-分类采购金额/分类采购次数
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/29
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      {{ title }}
      <p class="right">
        <span style="margin-right:10px">
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
        <span @click="handChange('number')">次数</span>
        <span class="lin not-select">｜</span>
        <span @click="handChange('money')">金额</span>
        <span style="margin-left:.625rem;" @click="openDialog()">更多明细</span>
      </p>
    </dt>
    <dd>
      <!-- 分类采购次数 -->
      <planClassifyNumberChart v-if="type==='number'" ref="number" reportchart="reportChart" :height="height" />
      <!-- 分类采购金额 -->
      <planClassifyMoneyChart v-if="type==='money'" ref="money" reportchart="reportChart" :height="height" />
      <!-- 报表统计-采购计划-分类采购明细 -->
      <planClassifyDetail ref="tenderDetail" />
    </dd>
  </dl>
</template>

<script>
/* api */
import { exportPurchaseMoneyInfoChart, exportPurchaseTimesInfoChart } from '@api/statisticalAnalysis/reportChart.js'
/* 組件 */
import planClassifyMoneyChart from './planClassifyMoneyChart.vue'// 分类采购金额
import planClassifyNumberChart from './planClassifyNumberChart.vue'// 分类采购次数
import planClassifyDetail from './planClassifyDetail-dialog.vue' // 报表统计-平台运营情况-分类采购明细
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
export default {
  name: 'ConventionalChart',
  inject: ['chartData'],
  components: {
    planClassifyMoneyChart, // 分类采购金额
    planClassifyNumberChart, // 分类采购次数
    planClassifyDetail// 报表统计-平台运营情况-分类采购明细
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      searchData: {}, // 搜索条件初始值存储
      title: '本年分类采购次数完成情况(TOP10)', // 标题 分类采购次数(TOP10) 分类采购金额(TOP10)
      type: 'number' // 类型  number 次数 money 金额
    }
  },
  updated() {
    this.$nextTick(() => {
      // 更新子组件数据
      this.$refs[this.type].initChart(this.searchData)
    })
  },
  methods: {
    /**
    * 次数/金额 切换时
    *  @param {type} String  number 次数 money 金额
    */
    handChange(type) {
      this.type = type
      if (type === 'number') {
        this.title = '本年分类采购次数完成情况(TOP10)'
      }
      if (type === 'money') {
        this.title = '本年分类采购金额完成情况(TOP10)'
      }
    },
    // 更多明细-弹框
    openDialog() {
      this.$refs.tenderDetail.open(this.searchData)
    },
    // 下载导出
    dowloadClick() {
      if (this.type === 'number') {
      // 分类采购数量-下载导出
        this.exportNumber(this.searchData)
      }
      if (this.type === 'money') {
      // 分类采购金额-下载导出
        this.exportMoney(this.searchData)
      }
    },
    // 分类采购金额-下载导出
    exportMoney(data) {
      exportPurchaseMoneyInfoChart(data).then(res => {
        download(res, this.title + '.xls')
      })
    },
    // 分类采购数量-下载导出
    exportNumber(data) {
      exportPurchaseTimesInfoChart(data).then(res => {
        download(res, this.title + '.xls')
      })
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      if (searchData) {
        this.searchData = {
          ...searchData
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>
