<!--
  @description: 保证金退款弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-11-4-14:40
-->
<template>
  <el-dialog
    title="申请退款"
    :visible.sync="dialogVisible"
    width="110"
  >
    <el-form
      ref="fromData"
      :inline-message="true"
      :model="formData"
      :rules="rules"
    >
      <table class="from_table mb16">
        <tr>
          <td>
            <el-form-item label="甲方" prop="firstPart" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.firstPart"
              gx-maxlength="varchar500"
              type="text"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="contractAmount" label="合同金额" prop="contractAmount" />
          </td>
          <td>
            <!--金额组件-->
            <money
              :money-value="formData"
              name="contractAmount"
            />
          </td>
          <td>
            <el-form-item ref="contractTime" label="合同签订日期" prop="contractTime" />
          </td>
          <td>
            <el-date-picker
              v-model="formData.contractTime"
              :format="elValueFormatDate"
              :value-format="elValueSaveFormat"
              type="date"
              placeholder="选择日期"
              @change="contractTimeChange"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="contractFileList" label="合同附件" prop="contractFileList" />
          </td>
          <td colspan="3">
            <upload
              v-if="dialogVisible"
              ref="upload"
              :data="upLoadData"
              :auto-delete="true"
              :auto-upload="true"
              title=""
              file-ref="fileRef"
              :on-success="fileChange"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="confirmLoading" type="primary" @click="saveTendererOfDepositRefund">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { queryTendererOfDepositRefundList } from '@api/fee/bailfee'
/* 组件*/
import upload from '@comp/common/updownload/upload' // 附件上传组件
import money from '@comp/common/money/money'// 金额组件
export default {
  name: 'DepositRefundDialog',
  components: {
    upload,
    money// 金额组件
  },
  data() {
    return {
      confirmLoading: false, // 控制按钮重复点击Loding
      upLoadData: {
        bizId: '', // 业务主键Id
        fileType: ''// 文件类型
      },
      dialogVisible: false, // 是否打开弹框状态
      formData: {
        contractFileList: '', // 合同附件
        firstPart: '', //  甲方
        accountId: '', // 虚拟账户主表id
        billId: '', // 保证金交易信息主表id
        contractAmount: '', // 合同金额
        contractTime: '', // 合同签订日期
        contractStartTime: '', // 合同开始时间
        contractEndTime: '' // 合同结束时间
      },
      // 校验输入内容
      rules: {
        contractFileList: [{ required: true, message: '请上传', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 打开弹框申请退款
    openDialogDepositRefund(rowPackInfo) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['fromData'].resetFields()
      })
      this.formData.accountId = rowPackInfo.accountId
      this.formData.billId = rowPackInfo.billId
    },
    // 触发合同签订日期
    contractTimeChange(val) {
      if (val) {
        this.formData.contractStartTime = this.$Moment(val[0]).format(this.momentDate)// 开始时间
        this.formData.contractEndTime = this.$Moment(val[1]).format(this.momentDate)// 结束时间
      }
    },
    // 保存保证金发起退款信息
    saveTendererOfDepositRefund() {
      if (this.formData.contractFileList) {
        this.confirmLoading = true
        queryTendererOfDepositRefundList(this.formData).then(res => {
          this.$message.success(res.header.msg)
          this.dialogVisible = false
          this.confirmLoading = false
        }).catch(() => {
          this.confirmLoading = false
        })
      } else {
        this.$message.warning('请上传合同附件')
      }
    },
    // 合同附件上传监听
    fileChange(response, file, fileList) {
      if (fileList.length > 0) {
        this.formData.contractFileList = 'true'// 上传了
      } else {
        this.formData.contractFileList = '' // 未上传
      }
    }
  }

}
</script>

<style scoped lang="less">
    /deep/ .file-list {
        .fileBtn, li {
            margin-bottom: 0 !important;
        }

        .name {
            margin-right: 0 !important;
        }
    }

</style>
