<template>
  <div class="retention-money">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
      :style="formStyle"
    >
      <el-form-item
        label="是否有质保金"
        prop="resource"
        class="industry"
      >
        <el-radio-group v-model="ruleForm.retention" disabled>
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="ruleForm.retention">
        <el-form-item label="质保金比例">
          <el-input v-model="ruleForm.retentionPercent" placeholder="请输入质保金比例" disabled>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="质保金是否有上限">
          <el-radio-group v-model="ruleForm.top" 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.top" label="质保金上限">
          <cy-amount-input
            v-model="ruleForm.retentionLimit"
            placeholder="请输入质保金上限（元）"
            unit-name="CNY"
            is-unit
            disabled
          />
        </el-form-item>
        <el-form-item label="质保金释放规则">
          <el-input v-model="ruleForm.releaseMethod" placeholder="请输入质保金释放规则" disabled />
        </el-form-item>
        <el-form-item label="质保金释放时间" prop="releaseTime">
          <el-select
            v-model="ruleForm.releaseTime"
            placeholder="请选择质保金释放时间"
            clearable
          >
            <el-option
              v-for="item in constant.salesContractReleaseMethod"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.releaseTime === 'salesContractReleaseMethod_fixed'" label="固定日期" prop="releaseDate"
          :rules="[{ required: true, message: '请选择固定日期', trigger: 'change' }]">
          <el-date-picker v-model="ruleForm.releaseDate" type="date" placeholder="请选择固定日期" />
        </el-form-item>
        <el-form-item v-if="ruleForm.releaseTime === 'salesContractReleaseMethod_fixed_payment'" label="固定天数" prop="releaseDays"
          :rules="[{ required: true, message: '请输入固定天数', trigger: 'blur' }]">
          <el-input v-model="ruleForm.releaseDays" placeholder="请输入固定天数" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { purchManagementGetRetention } from '@/api/myTrade/purchaseContractManagement/purchaseContractManagement'
export default {
  components: {
  },
  props: {
    'formStyle': {
      type: Object,
      default: () => {}
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        retention: '',
        retentionPercent: '',
        limit: '',
        retentionLimit: '',
        releaseMethod: '',
        releaseTime: '',
        releaseDate: '',
        releaseDays: '',
        id: '',
        top: ''
      },
      rules: {
        releaseTime: [{ required: true, message: '请选择质保金释放时间', trigger: 'change' }]
      },
      businessNumber: ''
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if (newV) {
          Object.keys(this.ruleForm).forEach(key => {
            this.ruleForm[key] = this.info.purchContractRetentionInfo[key]
          })
        }
      },
      immediate: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['salesContractReleaseMethod'])
    window.$bus.$on('change', (msg) => {
      this.businessNumber = msg.businessNumber
      this.purchManagementGetRetention()
    })
  },
  methods: {
    purchManagementGetRetention() {
      purchManagementGetRetention({ businessNumber: this.businessNumber }).then(data => {
        this.ruleForm.retention = data.data.retention
        this.ruleForm.retentionPercent = data.data.retentionPercent
        this.ruleForm.top = data.data.top
        this.ruleForm.retentionLimit = data.data.retentionLimit
        this.ruleForm.releaseMethod = data.data.releaseMethod
      })
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    }
  },
  beforeDestroy() {
    window.$bus.$off('change')
  }
}
</script>

  <style lang="scss" scoped>
  .retention-money {
  }
  </style>
