<!--
  @description: 供应商变更信息
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/supplierChangeInfo
  @date: 2020/03/31-18:30
-->
<template>
  <div>
    <section class="title p0-16 clearfix">
      <!-- 返回 -->
      <div class="title-back pointer" @click="back()">
        <i class="iconfont icon-fanhui mr10" />供应商变更信息
      </div>
    </section>
    <section class="p0-16">
      <!-- 表格部分 -->
      <div class="page-title">
        当前投标人信息
      </div>
      <table class="tableData">
        <tr>
          <td>投标单位</td>
          <td>{{ formData.supplierName }}</td>
          <td>账户名称</td>
          <td>{{ formData.accountName }}</td>
        </tr>
        <tr>
          <td>开户行</td>
          <td>{{ formData.bankName }}</td>
          <td>银行账号</td>
          <td>{{ formData.accountNo }}</td>
        </tr>
      </table>
      <div class="page-title">
        变更信息历史
      </div>
      <div>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <!-- 历史 -->
          <el-table-column
            type="index"
            label="历史"
            width="60px"
            align="center"
          />
          <!-- 变更前账户名称  -->
          <el-table-column

            prop="oriBankName"
            label="变更前账户名称"
            min-width="180"
          />
          <!-- 变更前账号 -->
          <el-table-column
            header-align="center"
            label="变更前账号"
            prop="oriNo"
            align="left"
            min-width="100"
          />
          <!-- 变更前开户行 -->
          <el-table-column
            header-align="center"
            prop="oriBankName"
            label="变更前开户行"
            min-width="150"
          />
          <!-- 证明文件 -->
          <el-table-column
            header-align="center"
            prop="managerName"
            label="证明文件"
            min-width="260"
          >
            <template slot-scope="scope">
              <downloadFile :down-load="true" :file-list="scope.row.refundChangeFileList" />
            </template>
          </el-table-column>
          <!-- 更变时间 -->
          <el-table-column
            header-align="center"
            prop="createTime"
            label="更变时间"
            width="140"
            align="center"
          />
        </el-table>
      </div>
    </section>
    <!--操作按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button @click="back">
            关闭
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* 接口*/
import { getDepositRefundDetailChangeList, getPackSupplierUniqueBailfeeAccountInfo } from '@api/fee/bailfee'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'
import { cashDepositMixin } from '../../mixins/cashDepositMixin'
import downloadFile from '@comp/common/updownload/downloadFile' // 获取附件信息 下载组件
import { getFileDetail } from '@/api/common/uploadCenter'
import { cloneObject } from '@assets/js/utils'// 常用
export default {
  name: 'SupplierChangeInfoDetail',
  components: {
    downloadFile// 文件下载
  },
  mixins: [ListMixin, cashDepositMixin],
  data() {
    return {
      tableData: [],
      formData: {
        supplierName: '',
        accountName: '',
        bankName: '',
        bankNo: ''
      },
      loading: true
    }
  },
  created() {
    // 获取保证金退款明细变更信息列表
    this.getDepositChangeList()
    this.getBailfeeAccountInfo()
  },
  methods: {
    // 获取保证金退款明细变更信息列表
    getDepositChangeList() {
      const refundDetailId = this.$route.params.refundDetailId
      getDepositRefundDetailChangeList(refundDetailId).then(res => {
        this.tableData = res.data
        this.loading = false
        this.tableData.map((item, index) => {
          this.getFile(item, index)// 获取附件信息
        })
      }).catch(() => {
        this.loading = false
      })
    },
    /*
* 获取附件信息
* item 每条文件信息
* index 每条文件信息的索引
* */
    getFile(item, index) {
      /* 证明文件附件*/
      const bidAccessory = {
        ...this.refundChangeData, // 文件类型
        bizId: item.refundDetailChangeId // 退款明细变更id
      }
      getFileDetail(bidAccessory).then(response => {
        item.refundChangeFileList = cloneObject(response.data)
        this.$set(this.tableData, index, item)
      })
    },
    // 通过指定包组供应商获取唯一保证金虚拟子账号
    getBailfeeAccountInfo() {
      const supplierId = this.$route.params.supplierId
      const packId = this.$route.params.packId
      getPackSupplierUniqueBailfeeAccountInfo(packId, supplierId).then(res => {
        if (res.data) this.formData = res.data
      }).catch(() => {
      })
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/refundManage',
        name: 'RefundManageList',
        params: {
          ...this.$route.params
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
