<!--
  @description: 报表统计-分类采购项目数量
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/03/06
-->
<template>
  <dl class="reportChart_crud">
    <dt>
      {{ title }}
      <p class="right">
        <span style="margin-right:10px">
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
        <span @click="handChange('count')">数量</span>
        <span class="lin not-select">｜</span>
        <span @click="handChange('money')">金额</span>
      </p>
    </dt>
    <dd>
      <tableColorChart
        ref="tableColor"
        :height="height"
        class="echart-dom"
        :option="option"
      />
    </dd>
    <!-- 更多弹框 -->
    <procurementProjectClassNum ref="moreList" :key="new Date()*1" />
    <!-- 点击查看个别明细弹框 -->
    <procurementProjectDetailDialog ref="detail" />
  </dl>
</template>

<script>
/* api */
import { getPurchaseTotalCountAndMoney, exportPurchaseTotalCount, exportPurchaseTotalMoney } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
/* 組件 */
import tableColorChart from './../../components/tableColorChart'// table列表渲染组件
import procurementProjectClassNum from './procurementProjectClassNum-dialog'// 更多
import procurementProjectDetailDialog from './procurementProjectDetail-dialog'// 更多明细
export default {
  name: 'ProcurementProjectClassNum',
  components: {
    tableColorChart, // table列表渲染组件
    procurementProjectClassNum, // 更多组件
    procurementProjectDetailDialog // 项目明细
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      title: '以物资大类统计已发布的项目数量',
      searchData: {},
      dialog: false,
      option: {
        // 底部-操作类
        footer: [
          {
            text: '更多',
            click: this.more
          }
        ],
        // 标题
        countThead: [
          { lable: '项目数量（个）', prop: 'productName' },
          // { lable: '公开招标', prop: 'count00', tenderMethod: '00',
          //   handle: {
          //     click: this.projectDetail
          //   }
          // },
          // { lable: '邀请招标', prop: 'count01', tenderMethod: '01',
          //   handle: {
          //     click: this.projectDetail
          //   }
          // },
          { lable: '询比价', prop: 'count11', tenderMethod: '11',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '单一来源', prop: 'count12', tenderMethod: '12',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '竞争性谈判', prop: 'count13', tenderMethod: '13',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '竞价', prop: 'count14', tenderMethod: '14',
            handle: {
              click: this.projectDetail
            }
          }
        ],
        // 金额标题
        moneyThead: [
          { lable: '金额（万元）', prop: 'productName' },
          { lable: '公开招标', prop: 'money00', tenderMethod: '00',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '邀请招标', prop: 'money01', tenderMethod: '01',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '询比价', prop: 'money11', tenderMethod: '11',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '单一来源', prop: 'money12', tenderMethod: '12',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '竞争性谈判', prop: 'money13', tenderMethod: '13',
            handle: {
              click: this.projectDetail
            }
          },
          { lable: '竞价', prop: 'money14', tenderMethod: '14',
            handle: {
              click: this.projectDetail
            }
          }
        ],
        thead: [],
        // 渲染数据
        data: [],
        type: 'count'
      }
    }
  },
  methods: {
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
      this.initType()
      this.option.data = []
      const data = {
        ...searchData
      }
      getPurchaseTotalCountAndMoney(data).then(res => {
        this.option.data = res.data
      })
    },
    // 切换 数量金额
    handChange(val) {
      // 赋值type
      this.option.type = val
      // 调用切换表头
      this.initType()
      // 调用组件方法传值
      this.$refs.tableColor.initType(val)
    },
    // 切换表头
    initType() {
      // 如果是项目数量 切换表头
      if (this.option.type === 'count') {
        this.title = '以物资大类统计已发布的项目数量'
        // 为数组赋值
        this.option.countThead.forEach((item, key) => {
          this.$set(this.option.thead, key, item)
        })
      } else if (this.option.type === 'money') {
        this.title = '分类采购已发布项目金额'
        this.option.moneyThead.forEach((item, key) => {
          this.$set(this.option.thead, key, item)
        })
      }
    },
    // 下载导出
    dowloadClick() {
      // 如果是项目数量 切换表头
      if (this.option.type === 'count') {
        exportPurchaseTotalCount(this.searchData).then(res => {
          download(res, this.title + '信息表.xls')
        })
      } else if (this.option.type === 'money') {
        exportPurchaseTotalMoney(this.searchData).then(res => {
          download(res, this.title + '信息表.xls')
        })
      }
    },
    // 更多
    more() {
      this.$refs.moreList.open(this.searchData, this.option.type)
    },
    // 点击查看明细
    projectDetail(row) {
      this.$refs.detail.open(this.searchData, row, this.option.type)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
