<!--
  @description:企业资质-变更内容
  @Modifier: qink
  @routerPath:
  @date: 2020-3-23 11:43:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    title="企业资质-变更内容"
    width="1000px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 611px) / 2)"
  >
    <div style="padding: 0 15px;">
      <p style="margin-top:10px;margin-bottom:10px;">
        企业资质共有<span style="color:red;">{{ paginationData.total }}</span>处内容变更
      </p>
      <el-table
        :data="enterpriseList"
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="序号"
          header-align="center"
          align="center"
          width="50"
        />
        <el-table-column
          prop="changeType"
          label="变更类型"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ filterDictText(typeList, scope.row.changeType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="certificateName"
          label="证书名称"
          header-align="center"
          align="center"
          width="140"
        />
        <el-table-column
          prop="certificateNo"
          label="证书编号"
          header-align="center"
          align="center"
          width="140"
        />
        <el-table-column
          prop="issuingUnit"
          label="发证单位"
          header-align="center"
          align="left"
        />
        <el-table-column
          prop="issuingTime"
          label="发证日期"
          header-align="center"
          align="center"
          width="140"
        />
        <el-table-column
          prop="validityEndTime"
          label="有效期至"
          header-align="center"
          align="center"
          width="140"
        />
        <el-table-column
          prop="date"
          label="证书扫描件"
          header-align="center"
          align="center"
          width="120"
        >
          <downloadFile :data="certificateScanData" />
        </el-table-column>
        <!-- <el-table-column
          prop="date"
          label="操作"
          header-align="center"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.changeType ==='01'"
              type="primary"
              @click.stop="changeBeforeInfo(scope.row)"
            >
              查看变更前内容
            </el-link>
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
      <div style="width:100%;display:flex;">
        <p style="color:red;">
          提示：
        </p>
        <li>
          <p>变更类型分为3种：新增、删除、修改。</p>
          <p>(1)变更类型为新增，意为所对应记录为本次变更新增记录。</p>
          <p>(2)变更类型为删除，意为所对应记录为本次变更删除记录。</p>
          <p>(3)变更类型为修改，意为所对应记录存在内容修改，修改字段用红色字体标明。</p>
        </li>
      </div>
    </div>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure">{{ language.Determine }}</el-button>
      <el-button @click="dialogData.dialog = false">{{ language.cancel }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* api*/
import { changeRecordlistCertificatePages } from '@/api/supplier/supplierChange'// 企业资质查看变更
/* 混合开发方法*/
import { ListMixin } from '@/mixins/ListMixin'
import { mapGetters } from 'vuex'
import { declareHegSupperMixins } from '@/views/supplier/editorDeclaration/mixins/declareHegSupperMixins'
/* 共用方法*/
import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
import downloadFile from '@comp/common/updownload/downloadFile'// 附件
export default {
  name: 'ConsignContractSelectDialog',
  components: {
    pagination, // 分页
    downloadFile // 附件
  },
  mixins: [ListMixin, declareHegSupperMixins],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
      }
    }
  },
  inject: ['departId'],
  data() {
    return {
      enterpriseList: [], // 企业资质列表
      typeList: [] // 字典信息变更类型
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        this.enterpriseList = [] // 企业资质列表
        // 初始化-分页
        this.paginationData.pageNo = 1
        this.paginationData.pageSize = 10
        // 监听弹框状态
        this.loadData()
      }
    }
  },
  created() {
    // 字典信息查询的key
    const data = ['changeType']
    this.$store.dispatch('getGroupType', data).then(res => {
      this.typeList = res.res.changeType.data.typeList
    })
  },
  methods: {
    filterDictText,
    // 选择信息-确定
    ensure() {
      this.dialogData.dialog = false
    },
    // 获取数据
    loadData() {
      const params = {
        departId: this.departId,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      changeRecordlistCertificatePages(params).then(res => {
        this.enterpriseList = res.data.records // 获取列表数据
        this.paginationData.total = res.data.total // 获取分页数据
        res.data.records.forEach(item => {
          this.certificateScanData.bizId = item.id // 证书扫描件
        })
      }).catch(() => {
      })
    }
    // // 查看变更前内容
    // changeBeforeInfo(row) {
    // }
  }
}
</script>

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