<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="400px"
    height="200px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    @close="handleClose"
    :show-close="false"
    :destroy-on-close="true">
    <div class="detail">
      <el-form v-model="form" :label-position="labelPosition" :label-width="labelWidth">
        <el-collapse v-model="list">
          <el-collapse-item title="结构" name="structure" v-if="rateType === 'FLOAT'">
            <el-form-item  label="浮动利率比例" props="floatingRatio"  required >
              <el-input v-model="form.floatingRatio" placeholder="" type="number"></el-input>
            </el-form-item>
            <el-form-item  label="浮动利率点差" props="floatingSpread" required>
              <el-input v-model="form.floatingSpread" placeholder="" type="number"></el-input>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="基础" name="basic">
            <el-form-item label="现金流方向" props="scheduleGeneration">
              <el-select v-model="form.scheduleGeneration" placeholder="" class="wd50">
                <el-option v-for="item in cashFlowOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
              <el-checkbox v-model="form.longPeriod"><span style="font-size: 12px">付息残段合并</span></el-checkbox>
            </el-form-item>
            <el-form-item label="计息惯例" props="resetRollConvention">
              <el-select v-model="form.resetRollConvention" placeholder="" class="wd100" :disabled="fixDisabled">
                <el-option v-for="item in rateConventionOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计息残段" props="resetGeneration">
              <el-select v-model="form.resetGeneration" placeholder="" class="wd50" :disabled="fixDisabled">
                <el-option v-for="item in interestPeriodOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
              <el-checkbox v-model="form.resetLongPeriod" :disabled="fixDisabled"><span style="font-size: 12px">计息残段合并</span></el-checkbox>
            </el-form-item>
            <el-form-item label="支付时点" props="paymentAt">
                <el-select v-model="form.paymentAt" placeholder="" class="wd50" :disabled="fixDisabled">
                  <el-option v-for="item in payPointOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
                </el-select>
                <div class="" style="display: flex;width: 50%;float:right">
                  <span style="font-size:12px;padding-right:8px;width: 70px;padding-left:20px">延迟</span>
                  <el-input v-model="form.paymentLag" placeholder="" type="number" :disabled="fixDisabled"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="定盘时点" props="resetAt">
                <el-select v-model="form.resetAt" placeholder="" class="wd50" :disabled="fixDisabled">
                  <el-option v-for="item in payPointOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
                </el-select>
                <div class="" style="display: flex;width: 50%;float:right">
                  <span style="font-size:12px;padding-right:8px;width: 70px;padding-left:20px">提前</span>
                  <el-input v-model="form.resetLag" placeholder="" type="number" :disabled="fixDisabled"></el-input>
                </div>
            </el-form-item>
            <el-row>
              <el-col span="12">
                <el-form-item label="锁定天数" props="lockOut">
                  <el-input v-model="form.lockOut" placeholder="" type="number" :disabled="!isSofr"></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="偏移天数" props="backWardShift">
                  <el-input v-model="form.backWardShift" placeholder="" type="number" :disabled="!isSofr"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="计算方式" props="rfrsCalcMode">
              <el-select v-model="form.rfrsCalcMode" placeholder="" class="wd100" :disabled="!isSofr">
                <el-option v-for="item in calcTypeOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="偏移方式" props="rfrsShiftType">
              <el-select v-model="form.rfrsShiftType" placeholder="" class="wd100" :disabled="!isSofr">
                <el-option v-for="item in offSetTypeOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="指标节假日" props="fixingHoliday">
              <el-select v-model="form.fixingHoliday" placeholder="" class="wd100" filterable clearable  multiple :disabled="fixDisabled">
                <el-option v-for="item in holidays" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-checkbox v-model="form.restartInterestCalc"><span style="font-size: 12px">付息区间重新计息</span></el-checkbox>
          </el-collapse-item>
          <el-collapse-item title="利率" name="interest">
            <el-form-item label="首次重置日" props="rateResetDate">
             <el-date-picker v-model="form.rateResetDate" :disabled="fixDisabled" type="date" placeholder="" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="首次付息日" props="firstPaymentDate">
             <el-date-picker v-model="form.firstPaymentDate" type="date" placeholder="" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="首期利率" props="firstInterest">
             <el-input v-model="form.firstInterest" placeholder="" :disabled="fixDisabled" type="number"></el-input>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="摊还" name="amortization">
            <el-form-item label="摊还形式" props="amortType">
              <el-select v-model="form.amortType" placeholder="" class="wd50 pd-r-10" @change="repaymentChange">
                <el-option v-for="item in repaymentOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
              <el-select v-model="form.amortForm" placeholder="" class="wd50">
                <el-option v-for="item in repaymentKindOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="repayType" props="amortValue" :required="repayRequired">
              <el-input v-model="form.amortValue" placeholder="" type="number" :disabled="repayDisabled"></el-input>
            </el-form-item>
            <el-form-item label="摊还频率" props="amortFrequency" :required="repayRequired">
              <el-select v-model="form.amortFrequency" placeholder="" class="wd100" :disabled="repayDisabled">
                <el-option v-for="item in repaymentFrequencyOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="摊还开始日" props="amortFirstDate">
              <el-date-picker v-model="form.amortFirstDate" type="date" :disabled="repayDisabled" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="摊还结束日" props="amortEndDate">
              <el-date-picker v-model="form.amortEndDate" type="date" :disabled="repayDisabled" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      
    </div>
    <template #footer>
      <div class="btns">
        <el-button size="medium" type="primary" @click="handleClose">保存</el-button>
      </div>
    </template>
  </el-dialog> 
</template>
<script>
export default {
  name: 'RateDetailDialog',
  data() {
    return {
      list: ['structure', 'basic', 'interest', 'amortization'],
      cashFlowOptions: [],
      rateConventionOptions: [],
      interestPeriodOptions: [],
      payPointOptions: [],
      holidays: [],
      calcTypeOptions: [],
      offSetTypeOptions: [],
      repaymentOptions: [],
      repaymentKindOptions: [],
      repaymentFrequencyOptions: [],
      repayDisabled: true,
      repayRequired: false,
      fixDisabled: false,
      repayType: '摊还金额'
    }
  },
  props: {
    form: {
      type: Object,
      default: () => ({
        
      })
    },
    msgData: {
      type: Object,
      default: () => {}
    },
    visible: {
      type: Boolean,
      default: () => false
    },
    title: {
      type: String,
      default: () => '利率编辑'
    },
    width: {
      type: Number,
      default: () => 400
    },
    labelPosition: {
      type: String,
      default: () => 'right'
    },
    labelWidth: {
      type: String,
      default: () => '100px'
    },
    rateType: {
      type: String,
      default: () => 'FLOAT'
    },
    isSofr: {
      type: Boolean,
      default: () => false
    },
    sysTimes: {
      type: Number,
      default: () => 0
    },
  },
  watch: {
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.rateType === 'FIXED') {
        this.fixDisabled = true
        this.form.resetAt = ''
        this.form.resetLag = ''
      }
      this.cashFlowOptions = this.msgData['cashDirection']
      this.rateConventionOptions = this.msgData['rollConvention']
      this.interestPeriodOptions = this.msgData['segmentsDirection']
      this.payPointOptions = this.msgData['paymentAt']
      this.holidays = this.msgData['holiday']
      this.calcTypeOptions = this.msgData['calcTypeOptions']
      this.offSetTypeOptions = this.msgData['shiftTypeOptions']
      this.repaymentOptions = this.msgData['amortTypeOptions']
      this.repaymentKindOptions = this.msgData['amortFormRcs']
      this.repaymentFrequencyOptions = this.msgData['compoundTypeOptions']

      if (this.isSofr) {
        this.form.lockOut = 0
        this.form.backWardShift = 0
        this.form.rfrsCalcMode = 'SIMPLE_AVERAGE'
        this.form.rfrsShiftType = 'LOOK_BACK'
      }
      this.repayDisabled = this.form.amortType === 'NONE'
    },
    repaymentChange(val) {
      this.repayDisabled = val === 'NONE' ? true : false
      this.form.amortFrequency = val === 'NONE' ? '' : '6M'
      this.repayRequired = val === 'NONE' ? false : true
      this.repayType = val === 'PERCENT' ? '摊还比例' : '摊还金额'
      if (val !== 'NONE') {
        this.form.amortFirstDate = new Date(this.sysTimes + 1 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
        this.form.amortEndDate = new Date(this.sysTimes + 2 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
      } else {
        this.form.amortFirstDate = ''
        this.form.amortEndDate = ''
      }
    },
    handleClose() {
      if (this.rateType === 'FLOAT') {
        if (!this.form.floatingRatio) return this.$message.error('浮动利率比例不能为空')
        if (!this.form.floatingSpread) return this.$message.error('浮动利率点差不能为空')
      }
      if (this.form.amortType !== 'NONE') {
        if (!this.form.amortValue) return this.$message.error(this.repayType + '不能为空')
        if (!this.form.amortFrequency) return this.$message.error('摊还频率不能为空')
      }
      this.$emit('close', this.form)
    },
  },
}
</script>
<style lang="scss" scoped>
.detail {
  // height: 268px;
  // overflow: auto;
  .flex {
    display: flex;
    justify-content: space-between;
  }
  .wd50 {
    width: 50%;
  }
  .wd80 {
    width: 80%;
  }
  .wd100 {
    width: 100%;
  }
  .pd-r-10 {
    padding-right: 10px;
  }
}
::v-deep .el-dialog__body {
  max-height: 468px;
  overflow: auto;
  .el-form-item {
    margin-bottom: 5px;
    width: 100%;
  }
  .el-collapse-item__content {
    // padding-bottom: 10px;
    .el-checkbox {
      float: right;
    }
  }
  
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #ddd;
  box-shadow: 0 -5px 5px -5px solid;
}
</style>