<!--
  @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="recordDifferenceList"
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          header-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="purchasingUnit"
          header-align="center"
          align="left"
          label="采购单位"
          width="200"
        />
        <el-table-column
          prop="partners"
          header-align="center"
          align="left"
          label="合同合作方"
        >
          <template slot-scope="scope">
            {{ filterDictText(partnersList, scope.row.partners) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="contractDate"
          header-align="center"
          align="center"
          label="签定日期"
          width="200"
        />
        <el-table-column
          prop="contractAmount"
          header-align="center"
          label="合同金额(万元)"
          align="right"
          width="150"
        />
        <el-table-column
          prop="buyerRepresentative"
          header-align="center"
          align="left"
          label="买方业务代表"
          width="110"
        />
        <el-table-column
          prop="buyerLinker"
          header-align="center"
          align="center"
          label="买方业务代表联系电话"
          width="120"
        />
        <el-table-column
          prop="date"
          header-align="center"
          align="center"
          label="合同扫描件"
          width="200"
        >
          <downloadFile :data="supplyRecordFile" />
        </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="initData" />
      <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 { changeRecordlistSupplyRecordPages } from '@/api/supplier/supplierChange'// 变更内容
/* 混合开发方法*/
import { declareHegSupperMixins } from '@/views/supplier/editorDeclaration/mixins/declareHegSupperMixins'
import { mapGetters } from 'vuex'
import { declareHegSupperGroupMixin } from '@views/supplier/editorDeclaration/mixins/declareHegSupperGroupMixin'
import { ListMixin } from '@/mixins/ListMixin'
/* 共用方法*/
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, declareHegSupperGroupMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
      }
    }
  },
  inject: ['departId'],
  data() {
    return {
      recordDifferenceList: [], // 列表数据
      typeList: [] // 字典信息变更类型
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        // 监听弹框状态
        this.initData()
      }
    }
  },
  created() {
    // 字典信息查询的key
    const changeTypeData = ['changeType']
    this.$store.dispatch('getGroupType', changeTypeData).then(res => {
      this.typeList = res.res.changeType.data.typeList
    })
  },
  methods: {
    filterDictText,
    // 选择信息-确定
    ensure() {
      this.dialogData.dialog = false
    },
    initData() {
      const params = {
        departId: this.departId,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      changeRecordlistSupplyRecordPages(params).then(res => {
        this.recordDifferenceList = res.data.records // 获取列表数据
        this.paginationData.total = res.data.total // 获取分页数据
        res.data.records.forEach(item => {
          this.supplyRecordFile.bizId = item.id // 合同扫描件
        })
      }).catch(() => {
      })
    }
    // // 查看变更前内容
    // changeBeforeInfo(row) {
    // }
  }
}
</script>

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