<!--
  @description: 报表统计-分类采购项目数量 - 项目明细 - 点击数字弹窗
  @Modifier: 杨胜国
  @routerPath:
  @date: 2021-03-23
-->
<template>
  <el-dialog
    v-dialogDrag
    :modal="false"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    title="更多明细"
    width="1000px"
  >
    <section class="clearfix">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="项目名称">
          <el-input v-model="searchForm.projectName" />
        </el-form-item>
        <!-- <el-form-item label="采购单位">
          <el-input v-model="searchForm.tenderNo" />
        </el-form-item> -->
        <el-form-item class="fr">
          <el-button type="primary" round @click="search">
            查询
          </el-button>
          <el-button type="primary" round @click="resetForm('searchForm')">
            重置
          </el-button>
          <el-button type="primary" round @click="exportChange">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <tableChart
      :height="height"
      class="echart-dom"
      :option="option"
    />
    <pagination :pagination-data="paginationData" @change="loadData" />
  </el-dialog>
</template>
<script>
/* api */
import { listPurchaseProjectByMethodAndItem, exportPurchaseProjectByMethodAndItem } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { download, filterObj, restoreInitialValue } from '@/assets/js/utils'// 过滤空的key
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 組件 */
import tableChart from './../../components/tableChart'// table列表渲染组件
import pagination from '@comp/common/pagination/pagination'// 分页

export default {
  name: 'ProcurementProjectDetailDialog',
  components: {
    tableChart, // table列表渲染组件
    pagination // 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      height: '450px', // 高度
      dialog: false, // 弹窗状态
      // 查询条件
      searchForm: {
        projectName: '', // 项目名称
        purchaseName: '',
        tenderMethod: ''
        // tenderNo: '' // 采购单位
      },
      // 全局的查询条件
      searchChartData: {
      },
      headData: { // 采购、招标 传值
        purchaseName: '', // 大类名称
        tenderMethod: '', // 方式
        tenderType: '', // 采购方式
        lable: '', // 采购方式名称
        type: ''
      },
      option: {
        // 非TOP排序
        showIndexTOP: false,
        // 标题
        thead: [
          { lable: '项目编号', prop: 'tenderNo', align: 'center' },
          { lable: '项目名称', prop: 'tenderName', align: 'left' },
          { lable: '采购单位', prop: 'purchaseDepartName', align: 'left' },
          { lable: '中标供应商名称', prop: 'suppliersName', align: 'left' },
          { lable: '中标金额（万元）', prop: 'implementMoney', align: 'center' },
          { lable: '采购时间', prop: 'createTime', align: 'center' }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  methods: {
    /**
     * 打开弹窗
     *  @param {searchChartData} Object 全局的查询条件
    */
    open(searchChartData, row, type) {
      this.searchChartData = searchChartData
      this.dialog = true
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // type赋值
      this.headData = {
        purchaseName: row.row.productName, // 大类名称
        tenderMethod: row.item.tenderMethod, // 采购方式
        lable: row.item.lable, // 采购方式名称
        type: type // 金额 数量
      }
      // 参数赋值
      this.searchForm.tenderMethod = this.headData.tenderMethod // 采购方式
      this.searchForm.purchaseName = this.headData.purchaseName // 大类名称
      this.loadData(row, type)
    },
    // 获取数据
    loadData(row, type) {
      // 重置
      this.option.data = []
      const data = this.getParams()
      listPurchaseProjectByMethodAndItem(data).then(res => {
        this.paginationData.total = res.data.total
        this.option.data.push(...res.data.records)
      })
    },
    // 查询条件
    getParams() {
      this.searchForm = {
        ...this.searchChartData,
        ...this.searchForm
      }
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)// 过滤空的key
    },
    // 搜索
    search() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()
    },
    // 重置
    resetForm(formName) {
      restoreInitialValue(this.searchForm)
      this.search()
    },
    // 导出
    exportChange() {
      const data = {
        ...this.searchForm,
        ...this.searchChartData
      }
      data.purchaseName	= this.headData.purchaseName // 采购方式
      data.tenderMethod	= this.headData.tenderMethod // 大类名称
      exportPurchaseProjectByMethodAndItem(data).then(res => {
        const text = this.headData.type === 'count' ? '数量' : '金额'
        download(res, `${this.headData.lable}${text}项目明细.xls`)
      })
    }
  }
}
</script>

<style scoped lang="less">
</style>
