<!--
  @description: 解锁投标人/解锁招标人
  @Modifier: sunxinman
  @routerPath: /fee/unlockSupplier
  @date: 2020/03/24-17:50
-->
<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">
      <!-- 表格部分 -->
      <table class="tableData">
        <tr>
          <td>招标项目编号</td>
          <td>{{ formData.tenderNo }}</td>
          <td>招标项目名称</td>
          <td>{{ formData.tenderName }}</td>
        </tr>
        <tr>
          <td>项目经理</td>
          <td>{{ formData.tenderManager }}</td>
          <td>投标人</td>
          <td>{{ formData.supplierName }}</td>
        </tr>
        <tr>
          <td>联系电话</td>
          <td />
          <td>子账号</td>
          <td>{{ formData.accountNo }}</td>
        </tr>
        <tr>
          <td>子账号状态</td>
          <td>{{ formData.accountStatus | filterAccountStatus }}</td>
          <td>账户余额（元）</td>
          <td>{{ formData.totalBalance }}</td>
        </tr>
        <tr>
          <td>锁定余额（元）</td>
          <td>{{ formData.availableBalance }}</td>
          <td>
            <span style="color: red">*</span>保证金归还方
            <el-popover
              placement="top-start"
              popper-class="hint"
              trigger="hover"
              content="选择保证金解锁后将支持方"
            >
              <el-button slot="reference" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
          </td>
          <td>
            <el-radio-group v-model="data.receiveType">
              <el-radio v-for="(item,index) in cashDepositRefunderList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>解锁说明</td>
          <td colspan="3">
            <el-form ref="form" :model="data" :rules="rules" label-width="0">
              <el-form-item
                ref="unlockReason"
                label=""
                prop="unlockReason"
              >
                <el-input
                  v-model="data.unlockReason"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  type="textarea"
                  show-word-limit
                  maxlength="4000"
                  placeholder="最多允许输入4000个汉字(8000字符)"
                />
              </el-form-item>
            </el-form>
          </td>
        </tr>
        <tr>
          <td>附件</td>
          <td colspan="3">
            <upload
              ref="upload"
              :data="unlockUpLoadData"
              :auto-delete="true"
              :auto-upload="false"
              :limit="10"
              title=""
              file-ref="fileRef"
            />
          </td>
        </tr>
      </table>
    </section>
    <!--操作按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button type="primary" @click="lock('form')">
            生效
          </el-button>
          <el-button @click="back">
            关闭
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* 接口*/
import { unlockSupplierAccount, getBailfeeVirtualAccountInfo } from '@api/fee/bailfee'
/* 混合开发方法-参数字段*/
import { cashDepositMixin } from '../../mixins/cashDepositMixin'
import { cashDepositGroupMixin } from '../../mixins/cashDepositGroupMixin'
import upload from '@comp/common/updownload/upload'// 文件上传

export default {
  name: 'UnlockSupplierAdd',
  components: {
    upload
  },
  filters: {
    filterAccountStatus(status) {
      const statusMap = {
        '00': '未创建',
        '01': '已创建'
      }
      return statusMap[status]
    }
  },
  mixins: [cashDepositMixin, cashDepositGroupMixin],
  data() {
    return {
      accountId: this.$route.params.accountId, // 保证金账户id
      formData: {
        availableBalance: 0,
        supplierName: '',
        tenderName: '',
        tenderNo: '',
        tenderManager: '',
        accountStatus: '',
        totalBalance: 0,
        accountNo: ''
      },
      data: {
        accountId: '', // 保证金账号ID
        accountNo: '', // 保证金账号
        receiveType: '02', // 保证金归还方-01招标人02投标人
        unlockId: '', // 解锁投标人表单ID
        unlockReason: '', // 解锁意见
        useStatus: '' // 使用状态
      },
      rules: {
        unlockReason: [{ required: true, message: '请填写解锁说明', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getDepositPackInfo()
  },
  methods: {
    // 获取子账号标包信息
    getDepositPackInfo() {
      getBailfeeVirtualAccountInfo(this.accountId).then(res => {
        this.formData = res.data
      }).catch(() => {
      })
    },
    // 解锁
    lock(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认解锁投标人并将保证金归还招标人吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            this.data.accountId = this.accountId
            this.data.accountNo = this.formData.accountNo
            unlockSupplierAccount(this.data).then(res => {
              this.submitUploadFiles(res.data.unlockId) // 手动上传附件
              this.$message({
                type: 'success',
                message: '解锁成功'
              })
              this.back()
            }).catch(() => {

            })
          })
        }
      })
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/subAccountInfo',
        name: 'SubAccountInfoList',
        params: {
          ...this.$route.params
        }
      })
    },
    // 手动上传附件
    submitUploadFiles(id) {
      this.unlockUpLoadData.bizId = id
      this.$refs.upload.submitUpload() // 手动上传附件
    }
  }
}
</script>
<style lang="less" scoped>

</style>
