<template>
  <div class="sales-contract-review-content">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>审批结论</cy-info-title>
      <el-form-item label="审批结论" prop="approvalConclusion">
        <el-radio-group v-model="ruleForm.approvalConclusion" :disabled="disabled">
          <el-radio label="pass">通过</el-radio>
          <el-radio label="back">退回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="审批意见："
        style="width: 100%;"
        class="textarea-content"
        prop="approvalComments"
        :rules="[
          { required: ruleForm.approvalConclusion === 'back', message: '请输入审批意见', trigger: 'blur' }
        ]"
      >
        <el-input
          v-model="ruleForm.approvalComments"
          type="textarea"
          style="width: 100%;"
          rows="3"
          clearable
          :disabled="disabled"
        >
        </el-input>
      </el-form-item>
      <template v-if="ruleForm.approvalConclusion === 'pass'">
        <cy-info-title>对账与结算</cy-info-title>
        <el-form-item label="对账周期方式" prop="settleCycleMethod">
          <el-radio-group v-model="ruleForm.settleCycleMethod" :disabled="disabled">
            <el-radio v-for="item in constant.salesContractSettleCycleMethod" :key="item.code" :label="item.code">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="对账周期" prop="settleCycle" class="two-form-item">
          上一次结算后
          <el-input v-model="ruleForm.settleCycle" :disabled="disabled" style="width: 100px;" />
          {{ ruleForm.settleCycleMethod == 'salesContractSettleCycleMethod_fixed' ? '天' : '个自然月' }}
        </el-form-item>
        <el-form-item label="付款节点" prop="paymentNode">
          <el-input v-model="ruleForm.paymentNode" :disabled="disabled" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="付款期限" prop="paymentTerm">
          <el-input v-model="ruleForm.paymentTerm" :disabled="disabled" style="width: 210px;" />
        </el-form-item>
        <cy-info-title style="margin: 10px 0">质保金</cy-info-title>
        <el-form-item label="是否有质保金" prop="isRetention">
          <el-radio-group v-model="ruleForm.isRetention" disabled>
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.isRetention" label="质保金比例" prop="retentionPercent" class="two-form-item">
          <el-input v-model="ruleForm.retentionPercent" class="two-form-item" disabled>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="质保金是否有上限" prop="top">
          <el-radio-group v-model="ruleForm.top" :disabled="disabled">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.top" label="质保金上限（元）" prop="retentionLimit" class="two-form-item">
          <el-input v-model="ruleForm.retentionLimit" class="two-form-item" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="质保金释放规则" prop="releaseMethod" class="one-form-item">
          <el-input v-model="ruleForm.releaseMethod" class="one-form-item" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="质保期限（天）" prop="retentionPeriod" class="one-form-item">
          <el-input v-model="ruleForm.retentionPeriod" class="one-form-item" :disabled="disabled" />
        </el-form-item>
        <cy-info-title style="margin: 10px 0">履约保证金</cy-info-title>
        <el-form-item label="履约保证金上限（元）" prop="performanceBondLimit" style="width: 100%">
          <el-input v-model="ruleForm.performanceBondLimit" :disabled="disabled" />
        </el-form-item>
      </template>
    </el-form>
    <!-- <cy-info-title>签署确认</cy-info-title> -->
    <sign-confirmation-content
      v-if="ruleForm.approvalConclusion === 'pass'"
      ref="signConfirmation"
      :sign-confirmation="signConfirmation"
      :sign-disabled="signDisabled"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
    SignConfirmationContent: () => import('./SignConfirmationContent.vue')
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      key: 0,
      ruleForm: {
        approvalConclusion: 'pass',
        approvalComments: '',
        settleCycleMethod: '',
        isRetention: '',
        retentionPercent: '',
        top: '',
        retentionLimit: '',
        releaseMethod: '',
        retentionPeriod: '',
        performanceBond: '',
        performanceBondLimit: '',
        settleCycle: '',
        paymentNode: '',
        paymentTerm: ''
      },
      rules: {
        approvalConclusion: [
          { required: true, message: '请选择审批结论', trigger: 'change' }
        ],
        settleCycleMethod: [
          { required: true, message: '请选择结算周期方式', trigger: 'change' }
        ],
        settleCycle: [
          { required: true, message: '请输入结算周期', trigger: 'blur' }
        ],
        top: [
          { required: true, message: '请选择质保金是否有上限', trigger: 'change' }
        ],
        retentionLimit: [
          { required: true, message: '请输入质保金上限', trigger: 'blur' }
        ],
        releaseMethod: [
          { required: true, message: '请输入质保金释放规则', trigger: 'blur' }
        ],
        retentionPeriod: [
          { required: true, message: '请输入质保期限', trigger: 'blur' }
        ],
        performanceBondLimit: [
          { required: true, message: '请输入履约保证金上限', trigger: 'blur' }
        ],
        paymentNode: [
          { required: true, message: '请输入付款节点', trigger: 'blur' }
        ],
        paymentTerm: [
          { required: true, message: '请输入付款期限', trigger: 'blur' }
        ]
      },
      signConfirmation: {
        signeListDeatails: [],
        salesContractApprovalFile: [],
        signConfirm: ''
      },
      signDisabled: false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'constant'
    ])
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (Object.keys(newV).length) {
          const { taskName } = this.$route.query
          setTimeout(() => {
            const { approvalConclusion, settleCycleMethod, settleCycle, retentionInfo, performanceBondLimit, signConfirm, personInfoHistoryRefList, fileStorages, performanceBond, paymentNode, paymentTerm } = JSON.parse(JSON.stringify(newV))
            this.ruleForm = {
              approvalConclusion: approvalConclusion || '',
              isRetention: retentionInfo ? retentionInfo.retention : '',
              performanceBond,
              settleCycleMethod: settleCycleMethod || '',
              settleCycle,
              retentionPercent: retentionInfo ? retentionInfo.retentionPercent : '',
              top: retentionInfo ? retentionInfo.top : '',
              retentionLimit: retentionInfo ? retentionInfo.retentionLimit : '',
              releaseMethod: retentionInfo ? retentionInfo.releaseMethod : '',
              retentionPeriod: retentionInfo ? retentionInfo.retentionPeriod : '',
              performanceBondLimit,
              paymentNode: paymentNode || '',
              paymentTerm: paymentTerm || ''
            }
            this.signConfirmation = {
              signConfirm,
              signeListDeatails: personInfoHistoryRefList,
              salesContractApprovalFile: fileStorages || []
            }
            if (taskName !== '信息审核') {
              this.signDisabled = true
            }
          }, 100)
          // }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['salesContractSettleCycleMethod'])
  },
  methods: {
    getParams() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const { id, taskId } = this.$route.query
            const { approvalConclusion, approvalComments, settleCycleMethod, isRetention, retentionPercent, top, retentionLimit, releaseMethod, retentionPeriod, performanceBondLimit, settleCycle, paymentNode, paymentTerm } = this.ruleForm
            if (approvalConclusion === 'pass') {
              this.$refs.signConfirmation.getParams().then(data => {
                const retentionInfo = {
                  isRetention,
                  top,
                  releaseMethod,
                  retentionPeriod
                }
                if (top) {
                  retentionInfo.retentionLimit = retentionLimit
                }
                if (isRetention) {
                  retentionInfo.retentionPercent = retentionPercent
                }
                const params = {
                  ...data,
                  businessKey: id,
                  taskId,
                  approvalConclusion,
                  approvalComments,
                  settleCycleMethod,
                  settleCycle,
                  performanceBondLimit,
                  retentionInfo,
                  paymentNode,
                  paymentTerm
                }
                resolve(params)
              })
            } else {
              const params = {
                businessKey: id,
                taskId,
                approvalConclusion,
                approvalComments
              }
              resolve(params)
            }
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

<style  scoped>

</style>
