<!--
  @description: 报表统计-供应商类别-详情
  @Modifier: 肖文龙
  @routerPath:
  @date: 2021-01-30
-->
<template>
  <div>
    <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.supplierName" />
          </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>
    <supplierCategoryIMG ref="IMGDetail" />
  </div>
</template>

<script>
/* api */
import { listSupplierBySupplierType, exportSupplierBySupplierType } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { download, filterObj, filterDictText, restoreInitialValue } from '@/assets/js/utils'// 过滤空的key
/* 混合开发方法-参数字段*/
import { supplierTypeGroupMixin } from './../../mixins/reportChartGroup.js'
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 組件 */
import tableChart from './../../components/tableChart'// table列表渲染组件
import pagination from '@comp/common/pagination/pagination'// 分页
import supplierCategoryIMG from './supplierCategoryIMG-dialog'// 查看画像

export default {
  name: 'SupplierCategoryDialog',
  components: {
    tableChart, // table列表渲染组件
    pagination, // 分页
    supplierCategoryIMG// 查看画像
  },
  mixins: [ListMixin],
  data() {
    return {
      /* 字典信息-start */
      ...supplierTypeGroupMixin,
      /* 字典信息-end */
      height: '450px', // 高度
      dialog: false, // 弹窗状态
      name: '', // 标题
      // 查询条件
      searchForm: {
        supplierName: '' // 供应商名称
      },
      // 全局的查询条件
      searchChartData: {
      },
      option: {
        // 非TOP排序
        showIndexTOP: false,
        // 标题
        thead: [
          { lable: '供应商名称', prop: 'supplierName', align: 'left' },
          { lable: '供应商分类', prop: 'supplierType', align: 'left' },
          { lable: '供应商画像',
            width: 120,
            prop: 'tenderName',
            // 操作类
            handle: [
              {
                text: '查看',
                click: this.detail
              }
            ]
          }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  methods: {
    /**
     * 打开弹窗
     *  @param {searchChartData} Object 全局的查询条件
    */
    open(searchChartData) {
      this.name = searchChartData.name// 标题
      this.searchChartData = searchChartData
      this.searchChartData.supplierType = searchChartData.grade// code值
      delete this.searchChartData.grade
      delete this.searchChartData.number
      delete this.searchChartData.name
      this.dialog = true
      this.loadData()
    },
    // 获取数据
    loadData() {
      this.option.data = []
      const data = this.getParams()
      listSupplierBySupplierType(data).then(res => {
        this.paginationData.total = res.data.total
        res.data.records.forEach(item => {
          this.option.data.push({
            ...item,
            supplierType: filterDictText(this.supplierCategoryList, item.supplierType)
          })
        })
      })
    },
    // 查询条件
    getParams() {
      this.searchForm = {
        ...this.searchForm,
        ...this.searchChartData
      }
      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.getParams()
      exportSupplierBySupplierType(data).then(res => {
        download(res, '供应商类别【' + this.name + '】明细表.xls')
      })
    },
    // 查看画像
    detail() {
      this.$refs.IMGDetail.open()
    }
  }
}
</script>

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