<!--
  @description:基本信息-变更内容
  @Modifier: qink、qrf
  @routerPath:
  @date: 2020-3-23 11:43:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    title="基本信息-变更内容"
    width="700px"
    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="basicInfoList"
        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="fieldName"
          header-align="center"
          align="left"
          label="变更字段"
        />
        <el-table-column
          prop="secondVal"
          header-align="center"
          align="left"
          label="变更后内容"
        />
        <el-table-column
          prop="firstVal"
          label="变更前内容"
          header-align="center"
          align="left"
        />
      </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 {
  listSupplierChangeRecordPages
} from '@/api/supplier/supplierChange'// 获取信息 字典信息
/* 混合开发方法*/
import { ListMixin } from '@/mixins/ListMixin'
import { mapGetters } from 'vuex'
/* 共用方法*/
import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
export default {
  name: 'EssentialInformationDifferenceDialog',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
      }
    }
  },
  data() {
    return {
      basicInfoList: [], // 列表数据
      typeList: [] // 字典信息变更类型
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        // 监听弹框状态
        this.initData()
      }
    }
  },
  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
    },
    // 获取数据
    initData() {
      const params = {
        departInfoId: this.dialogData.id,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      listSupplierChangeRecordPages(params).then(res => {
        this.basicInfoList = res.data.records
        this.paginationData.total = res.data.total
      }).catch(() => {
      })
    }
  }
}
</script>

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