<!--
  @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="businessInfoList"
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          header-align="center"
          align="center"
        />
        <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="linkname"
          label="姓名"
          header-align="center"
          align="left"
        />
        <el-table-column
          prop="linkerID"
          label="身份证号"
          header-align="center"
          align="center"
          width="180"
        />
        <el-table-column
          prop="linktel"
          label="手机"
          header-align="center"
          align="center"
          width="120"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          header-align="center"
          align="center"
          width="150"
        />
        <el-table-column
          label="身份证或护照扫描件"
          header-align="center"
          align="center"
          width="130"
        >
          <downloadFile :data="identityCardData" />
        </el-table-column>
        <el-table-column
          prop="address"
          label="授权书扫描件"
          header-align="center"
          align="center"
          width="130"
        >
          <downloadFile :data="letterAttorneyData" />
        </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 {
  changeRecordlistDepartLinker
} from '@/api/supplier/supplierChange'// 获取信息 字典信息
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
import downloadFile from '@comp/common/updownload/downloadFile'// 附件
/* 混合开发方法*/
import { mapGetters } from 'vuex'
import { ListMixin } from '@/mixins/ListMixin'
import { declareHegSupperMixins } from '@/views/supplier/editorDeclaration/mixins/declareHegSupperMixins'
/* 共用方法*/
import { filterDictText } from '@/assets/js/utils'// 常用方法
export default {
  name: 'BusinessManagerInfoDifferenceDialog',
  components: {
    pagination, // 分页
    downloadFile
  },
  mixins: [ListMixin, declareHegSupperMixins],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {

      }
    }
  },
  inject: ['departId'],
  data() {
    return {
      businessInfoList: [], // 列表数据
      typeList: [], // 字典信息变更类型
      commonSupplierChangeRecordDto: {}, // 基本信息
      listSupplyRecordPagesDto: {} // 财务状况
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        // 监听弹框状态
        this.initData()
      }
    }
  },
  created() {
    // 字典信息查询的key
    const data = ['changeType']
    this.$store.dispatch('getGroupType', data).then(res => {
      console.log(res)
      this.typeList = res.res.changeType.data.typeList
    })
  },
  methods: {
    filterDictText,
    // 选择信息-确定
    ensure() {
      this.dialogData.dialog = false
    },
    // 获取数据
    initData() {
      const params = {
        departId: this.$route.params.departId,
        departInfoId: this.$route.params.bizId,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      changeRecordlistDepartLinker(params).then(res => {
        this.businessInfoList = res.data.records
        this.paginationData.total = res.data.total
        res.data.records.forEach(item => {
          this.identityCardData.bizId = item.id // 身份证号或护照扫描件
          this.letterAttorneyData.bizId = item.id // 授权书扫描
        })
      }).catch(() => {
      })
    }
    // // 查看变更前内容
    // changeBeforeInfo(row) {
    // }
  }
}
</script>

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