<!--
  @description: 报表统计-供应商统计-供应商供货范围TOP-更多弹框
  @Modifier: 杨胜国
  @routerPath:
  @date: 2021-05-23
-->
<template>
  <el-dialog
    v-dialogDrag
    :modal="false"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    title="更多信息"
    width="1140px"
  >
    <!-- <el-form ref="searchForm" :model="searchForm" inline>
      <el-form-item label="供货范围">
        <el-input v-model="searchForm.supplyScope" />
      </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> -->
    <div class="tabContent">
      <tableChart
        :height="height"
        class="echart-dom"
        :option="option"
      />
    </div>
  </el-dialog>
</template>

<script>
/* api */
import { getBiddingAndPurchaseException } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { filterObj, restoreInitialValue, filterDictText } from '@/assets/js/utils'// 过滤空的key
/* 混合开发方法-参数字段*/
import { purchaseExceptionStatusGroupMixin } from './../../mixins/reportChartGroup.js'
/* 組件 */
import tableChart from './../../components/tableChart'// table列表渲染组件

export default {
  name: 'AbnormalBidListDialog',
  components: {
    tableChart // table列表渲染组件
  },
  mixins: [purchaseExceptionStatusGroupMixin],
  data() {
    return {
      height: '450px', // 高度
      dialog: false, // 弹窗状态
      // 查询条件
      searchForm: {},
      option: {
        // 非TOP排序
        showIndexTOP: false,
        // 标题
        thead: [
          { lable: '项目名称', prop: 'tenderName', align: 'center' },
          { lable: '项目编号', prop: 'tenderNo', align: 'center', width: 125 },
          { lable: '项目经理', prop: 'managerName', align: 'center', width: 60 },
          { lable: '采购单位', prop: 'buyersName', align: 'center', width: 180 },
          { lable: '发布时间', prop: 'sendTime', align: 'center', width: 120 },
          { lable: '开标时间', prop: 'bidTime', align: 'center', width: 120 },
          { lable: '投标家数', prop: 'supplierBidNum', align: 'center' },
          { lable: '异常原因', prop: 'status', align: 'center', width: 120 }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  methods: {
    /**
     * 打开弹窗
     *  @param {row} Object 供应商信息
     *  @param {searchChartData} Object 全局的查询条件
    */
    open(searchChartData) {
      // 获取字典项
      this.initTpList()
      this.dialog = true
      this.searchChartData = searchChartData
      this.loadData()
    },
    // 获取数据
    loadData() {
      this.option.data = []
      const data = this.getParams()
      getBiddingAndPurchaseException(data).then(res => {
        // 01招标异常
        res.data['01'].forEach(item => {
          this.option.data.push({
            ...item,
            sendTime: this.$Moment(item.sendTime).format(this.momentDate),
            bidTime: this.$Moment(item.bidTime).format(this.momentDate),
            status: filterDictText(this.purchaseExceptionStatus, item.status)
          })
        })
      })
    },
    // 查询条件
    getParams() {
      const param = {
        ...this.searchChartData,
        ...this.searchForm
      }
      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.getParams()
      // exportSupplyRangeSupplierList(data).then(res => {
      //   download(res, '供应商供货范围信息表.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>
