<!--
  @description: 报表统计-月、累计准入供应商-更多弹框
  @Modifier: 杨胜国
  @routerPath:
  @date: 2021-03-23
-->
<template>
  <el-dialog
    v-dialogDrag
    :modal="false"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    title="详情"
    width="840px"
  >
    <el-form ref="searchForm" :model="searchForm">
      <!-- <el-form-item prop="purchaseDepartName" label="采购单位名称">
        <el-input v-model="searchForm.purchaseDepartName" />
      </el-form-item> -->
      <el-form-item class="">
        <!-- <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>
    <div class="tabContent">
      <tableChart
        :height="height"
        class="echart-dom"
        :option="option"
      />
    </div>
    <!-- <pagination :pagination-data="paginationData" @change="loadData" /> -->
  </el-dialog>
</template>

<script>
/* api */
import { listAccessSupplierTypeInfo, exportAccessSupplierTypeInfo } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { filterObj, restoreInitialValue, download } 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: 'BuyerAndAdmitSupplierListDialog',
  components: {
    tableChart // table列表渲染组件
    // pagination // 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      // 查询条件
      searchForm: {
        // purchaseDepartName: '' // 采购单位名称
      },
      monthType: '',
      // 查询条件
      searchData: {
      },
      height: '450px', // 高度
      dialog: false, // 弹窗状态
      option: {
        // 非TOP排序
        showIndexTOP: false,
        // 标题
        thead: [
          { lable: '采购单位名称', prop: 'purchaseDepartName' },
          { lable: '生产商（个）', prop: 'manufacturersNum' },
          { lable: '贸易商（个）', prop: 'tradersNum' },
          { lable: '工程商（个）', prop: 'engineersNum' },
          { lable: '服务商（个）', prop: 'serviceProvidersNum' }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  methods: {
    /**
     * 打开弹窗
     *  @param {row} Object 供应商信息
     *  @param {searchChartData} Object 全局的查询条件
    */
    open(searchChartData, val) {
      this.dialog = true
      this.searchChartData = searchChartData
      this.monthType = val
      this.loadData(val)
    },
    // 获取数据
    loadData(val) {
      this.option.data = []
      const data = this.getParams()
      // const data = {}
      data.statisticalMonth = val
      listAccessSupplierTypeInfo(data).then(res => {
        // this.paginationData.total = res.data.total
        // this.option.data.push(...res.data.records)
        this.option.data.push(...res.data)
      })
    },
    // 查询条件
    getParams() {
      const param = {
        ...this.searchChartData,
        ...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.statisticalMonth	= this.monthType
      exportAccessSupplierTypeInfo(data).then(res => {
        const text = this.monthType === 'month' ? '月' : '累计'
        download(res, `${text}准入供应商信息表.xls`)
      })
    },
    // 查看
    detail(row) {
      this.$refs.tenderDetail.open(row.row)
    }
  }
}
</script>

<style scoped lang="less">
/deep/.tabContent{
  .reportChart_tableChart_content{
    height:auto;
    min-height: 450px;
    overflow: auto;
  }
}
</style>
