<!--
  @description: 添加保函
  @Modifier: sunxinman/haofengxain
  @routerPath: /fee/letterAdd
  @date: 2020/03/25-15:50
-->
<template>
  <div>
    <section class="title p0-16 clearfix">
      <!-- 返回 -->
      <div class="title-back pointer" @click="back()">
        <i class="iconfont icon-fanhui mr10" />添加保函
      </div>
    </section>
    <!-- 表单部分 -->
    <div class="p0-16">
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
      >
        <table class="from_table">
          <tr>
            <td>
              <el-form-item ref="tenderNo" prop="tenderNo" label="项目编号" />
            </td>
            <td>
              {{ formData.tenderNo }}
            </td>
            <td>
              <el-form-item ref="tenderName" prop="tenderName" label="项目名称" />
            </td>
            <td>
              {{ formData.tenderName }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="packNo" prop="packNo" label="标段（包）编号" />
            </td>
            <td>
              {{ formData.packNo }}
            </td>
            <td>
              <el-form-item ref="packName" prop="packName" label="标段（包）名称" />
            </td>
            <td>
              {{ formData.packName }}
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="supplierName" label="投标人" prop="supplierName" />
            </td>
            <td>
              <el-input
                v-model="formData.supplierName"
                placeholder="请选择"
                style="width: calc(90% - 150px)"
                disabled
              />
              <el-button type="primary" @click="dialogData.bidderVisible=true">
                选择
              </el-button>
              <el-button type="primary" plain @click="bidderInfo('clear')">
                清空
              </el-button>
            </td>
            <td>
              <el-form-item label="支付方式" />
            </td>
            <td>
              保函
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item
                ref="amount"
                label="金额（元）"
                prop="amount"
              />
            </td>
            <td>
              <!--金额组件-->
              <money :thousands="true" :money-value="formData" name="amount" />
            </td>
            <td>
              <el-form-item label="币种" />
            </td>
            <td>
              <el-select v-model="formData.currency" placeholder="请选择">
                <el-option
                  v-for="(item,index) in currencyList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="guaranteeDate" label="保函有效期" prop="guaranteeDate" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.guaranteeDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="guaranteeDateChange(formData.guaranteeDate)"
              />
            </td>
            <td>
              <el-form-item label="保函出具单位" />
            </td>
            <td>
              <el-input v-model="formData.issueDepart" placeholder="请选择" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="保函扫描件" required />
            </td>
            <td colspan="3">
              <upload
                ref="upload"
                :data="letterUpLoadData"
                :auto-delete="true"
                :auto-upload="true"
                title=""
                file-ref="fileRef"
              />
            </td>
            <!--       <td>
              <el-form-item label="发票类型" />
            </td>
            <td>
              <el-select v-model="formData.invoiceType" placeholder="请选择">
                <el-option
                  v-for="(item,index) in invoiceTypeList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>-->
          </tr>
          <tr>
            <td>
              <el-form-item ref="issueTime" label="保函出具时间" prop="issueTime" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.issueTime"
                :clearable="false"
                :picker-options="disabledPickerOptions"
                :format="elValueFormat"
                :value-format="elValueSaveFormat"
                type="datetime"
                placeholder="选择日期时间"
              />
            </td>
            <td>
              <el-form-item label="接收时间" />
            </td>
            <td>
              <el-date-picker
                v-model="formData.receiveTime"
                :clearable="false"
                :picker-options="disabledPickerOptions"
                :format="elValueFormat"
                :value-format="elValueSaveFormat"
                type="datetime"
                placeholder="选择日期时间"
              />
            </td>
          </tr>
          <tr>
            <td>
              <!--备注-->
              <el-form-item ref="remark" label="备注" prop="remark" />
            </td>
            <td colspan="3">
              <el-input
                v-model="formData.remark"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                maxlength="4000"
                show-word-limit
                style="width: 100%"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <!--操作按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button type="primary" @click="submitAudit('form')">
            生效
          </el-button>
          <el-button @click="back">
            关闭
          </el-button>
        </div>
      </div>
    </div>
    <!-- 投标人选择弹框 -->
    <bidderDialog :dialog-data="dialogData" @bidderInfo="bidderInfo" />
  </div>
</template>
<script>
/* 接口*/
import { addDepositGuaranteeInfo, queryDepositPackinfoList } from '@api/fee/bailfee'
/* 混合开发方法-参数字段*/
import { cashDepositMixin } from '../../mixins/cashDepositMixin'
import { cashDepositGroupMixin } from '../../mixins/cashDepositGroupMixin'
/* 公共方法*/
import { randomData } from '@assets/js/utils'
import { checkNum } from '@/assets/js/validate'// 校验输入内容
/* 组件*/
import bidderDialog from './bidder-dialog'// 投标人选择弹框
import upload from '@comp/common/updownload/upload'// 文件上传
import money from '@comp/common/money/money'
export default {
  name: 'LetterAdd',
  components: {
    bidderDialog,
    upload,
    money
  },
  mixins: [cashDepositGroupMixin, cashDepositMixin],
  data() {
    return {
      packId: this.$route.params.packId, // 标段id
      formData: {
        guaranteeDate: '', // 保函有效期
        amount: 0, // 金额
        createTime: '', // 创建日期
        createUser: '', // 创建人
        createUserName: '', // 创建人名称
        currency: '', // 币种
        endTime: '', // 有效截止日期
        guaranteeId: '', // 保函ID
        invoiceType: '', // 发票类型
        issueDepart: '', // 保函出具单位
        issueTime: '', // 保函出具时间
        packId: '', // 标段ID
        packName: '', // 标段名称
        packNo: '', // 标段编号
        receiveTime: '', // 接收时间
        remark: '', // 备注
        stageId: '', // 阶段ID
        startTime: '', // 有效开始日期
        supplierId: '', // 供应商ID
        supplierName: '', // 供应商名称
        tenderDepart: '', // 业务部门
        tenderDepartId: '', // 业务部门ID
        tenderId: '', // 项目ID
        tenderManager: '', // 项目经理
        tenderManagerId: '', // 项目经理ID
        tenderName: '', // 项目名称
        tenderNo: '', // 项目编号
        useStatus: ''// 使用状态
      },
      rules: {
        amount: [{ required: true, validator: checkNum, trigger: 'blur' }], // 金额
        currency: [{ required: true, message: '请选择', trigger: 'change' }], // 币种
        guaranteeDate: [{ required: true, message: '请选择', trigger: 'change' }] // 保函有效期
      },
      dialogData: { // 投标人选择弹框
        bidderVisible: false
      }
    }
  },
  created() {
    this.getDepositPackInfo()
    this.formData.guaranteeId = randomData()// 初始化随机生成ID
    this.letterUpLoadData.bizId = this.formData.guaranteeId // 保函扫描件上传主键id
  },
  methods: {
    // 获取子账号标包信息
    getDepositPackInfo() {
      const params = {
        packId: this.packId
      }
      queryDepositPackinfoList(params).then(response => {
        const recordsData = response.data.records.length > 0 && response.data.records[0]
        const data = {
          packName: recordsData.packName, // 标段名称
          packNo: recordsData.packNo, // 标段编号
          tenderName: recordsData.tenderName, // 项目名称
          tenderNo: recordsData.tenderNo // 项目编号
        }
        this.formData = Object.assign(this.formData, data)
      }).catch(() => {
      })
    },
    // 保函有效期
    guaranteeDateChange(data) {
      if (data) {
        // 有效开始日期
        this.formData.startTime = this.$Moment(data[0]).format(this.momentSaveFormat)
        // 有效截止日期
        this.formData.endTime = this.$Moment(data[1]).format(this.momentSaveFormat)
      }
    },
    // 保存组装数据
    assemblyData() {
      const data = {
        ...this.formData,
        packId: this.packId
      }
      // 保函出具时间
      if (data.issueTime) {
        data.issueTime = this.$Moment(data.issueTime).format(this.momentSaveFormat)
      }
      // 接收时间
      if (data.receiveTime) {
        data.receiveTime = this.$Moment(data.receiveTime).format(this.momentSaveFormat)
      }
      delete data.guaranteeDate
      return data
    },
    // 生效
    submitAudit(formName) {
      this.$confirm('确认生效?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.$refs[formName].validate((valid, field) => {
          if (valid) { // 校验通过
            const data = this.assemblyData()
            addDepositGuaranteeInfo(data).then(res => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.back()
            }).catch(() => {
            })
          }
        })
      }).catch(() => {
      })
    },
    // 关闭
    back() {
      this.$router.push({
        path: '/fee/letterManage',
        name: 'LetterManageList',
        params: {
          ...this.$route.params
        }
      })
    },
    // 监听选择投标人子组件传过来的值
    bidderInfo(data) {
      if (data === 'clear') { // 清空
        this.formData.supplierId = ''// 供应商ID
        this.formData.supplierName = ''// 供应商名称
      } else { // 选择
        this.formData.supplierId = data.supplierId // Id
        this.formData.supplierName = data.supplierName// 名称
      }
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/.file-list {
    .fileBtn,
    li {
      margin-bottom: 0 !important;
    }
    .name {
      margin-right: 0 !important;
    }
  }
</style>
