<!--
  @description: 报表统计-采购单位准入供应商
  @Modifier：郝定康
  @routerPath:
  @date：  2021-03-08 16:11:17
-->
<template>
  <dl
    class="reportChart_crud"
  >
    <dt>
      本年采购单位准入供应商情况
      <p class="right">
        <i class="iconfont icon-xiazai1" @click="dowloadClick" />
      </p>
    </dt>
    <dd>
      <tableChart
        :height="height"
        class="echart-dom"
        :option="option"
      />
    </dd>
    <!-- 报表统计-采购单位准入供应商-更多弹框 -->
    <buyerAndAdmitSupplierList ref="moreSupplyList" />
    <!-- 报表统计-月、累计准入供应商-弹框 -->
    <buyerSupplierList ref="allMonthSupplyList" />
  </dl>
</template>

<script>
/* api */
import { getPurchaseDepartWithSupplierList, exportPurchaseDepartWithSupplierList } from '@api/statisticalAnalysis/reportChart.js'
/* 組件 */
import tableChart from './../../components/tableChart'// table列表渲染组件
import buyerAndAdmitSupplierList from './buyerAndAdmitSupplierList-dialog' // 报表统计-采购单位准入供应商-更多弹框
import buyerSupplierList from './buyerSupplierList-dialog' // 报表统计-月、累计准入供应商-弹框

/* 公共方法*/
import { download } from '@/assets/js/utils'
export default {
  name: 'BuyerAndAdmitSupplier',
  components: {
    tableChart, // table列表渲染组件
    buyerAndAdmitSupplierList, // 报表统计-采购单位准入供应商-更多弹框
    buyerSupplierList // 月、累计准入供应商-弹框
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 查询条件
      searchData: {
        statisticalMonth: '' // 统计月份
      },
      option: {
        // 底部-操作类
        footer: [
          {
            text: '更多',
            click: this.more
          }
        ],
        // 标题
        thead: [
          { lable: '采购单位名称', prop: 'purchaseDepartName', align: 'left' },
          { lable: '月准入供应商', prop: 'nowCount', type: 'month', align: 'center',
            handleHead: {
              click: this.moreHead
            }
          },
          { lable: '累计准入供应商', prop: 'total', type: '', align: 'center',
            handleHead: {
              click: this.moreHead
            }
          }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  methods: {
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.option.data = []
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData
        }
      }
      const data = {
        ...this.searchData
      }
      getPurchaseDepartWithSupplierList(data).then(res => {
        this.option.data.push(...res.data.records)
      })
    },
    // 查看
    detail() {

    },
    // 更多
    more() {
      this.$refs.moreSupplyList.open(this.searchData)
    },
    // 月、累计
    moreHead(val) {
      this.$refs.allMonthSupplyList.open(this.searchData, val.type)
    },
    // 下载
    dowloadClick() {
      const data = { ...this.searchData }
      exportPurchaseDepartWithSupplierList(data).then(res => {
        download(res, '采购单位准入供应商信息表.xls')
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
