<template>
  <div>
    <el-form v-model="form" :label-position="labelPosition" :label-width="labelWidth" class="form">
      <div class="item-box mb-10">
        <el-select v-model="form.dealType" placeholder="" style="width:100%;padding-right: 5px" @change="payDirectionChange">
          <el-option v-for="item in RPOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="form.indexation" placeholder="" style="width:100%;padding-right: 5px" @change="rateTypeChange">
          <el-option v-for="item in rateTypeOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="form.ccy" placeholder="" style="width:100%;" :disabled="currencyDisabled">
          <el-option v-for="item in currencyOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <el-form-item :label="form.indexation === 'FIXED' ? $t('field.rate') : $t('field.floatingRateIndicator')" props="fixedRate" required>
        <el-input v-if="form.indexation === 'FIXED'" type="number" v-model="form.fixedRate" controls-position="right" @blur="inputBlur($event, 'fixedRate', '2')" style="width: 90%"  />
        <el-select v-else v-model="form.floatingIndex" placeholder="" @change="floatRateChange" value-key="id" filterable class="wd90">
          <el-option v-for="item in floatRateOptions" :key="item.value" :label="item.text" :value="item"></el-option>
        </el-select>
        <i class="el-icon-tickets" @click="iconClick"></i>
      </el-form-item>
      <el-form-item :label="$t('field.notional')" props="notional" required>
        <el-input type="number" v-model="form.notional" controls-position="right" @blur="inputBlur($event, 'notional', '2')"  />
      </el-form-item>
      <el-form-item :label="$t('form.compoundFrequency')" props="compoundFrequency" required>
        <div class="item-box">
          <el-select v-model="form.compoundFrequency" :disabled="calcRateDisabled" placeholder="" class="wd40">
            <el-option v-for="item in calcRateOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="form.interestCalcMethod" :disabled="calcRateDisabled" placeholder="" class="wd60">
            <el-option v-for="item in InterestCalcMethodOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item :label="$t('field.couponFrequency')" props="couponFrequency" required>
        <div class="item-box">
          <el-select v-model="form.couponFrequency" placeholder="" class="wd40" @change="payRateFrequencyChange">
            <el-option v-for="item in payRateOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="form.basis" placeholder="" class="wd60">
            <el-option v-for="item in basisRcsOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item :label="$t('field.payConvention')" props="rollConvention" >
        <el-select v-model="form.rollConvention" placeholder="" class="wd100">
          <el-option v-for="item in payConventionOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('field.holiday')" props="paymentHoliday" >
        <el-select v-model="form.paymentHoliday" filterable   multiple clearable placeholder="" class="wd100">
          <el-option v-for="item in HolidaysOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" props="checkList">
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox label="Adjusted" />
            <el-checkbox label="EOMA" />
          </el-checkbox-group>
      </el-form-item>
    </el-form>
    <RateDetailDialog v-if="showRateDetail" ref="rateDetailDialog" :form="dialogForm" :msgData="msgData" :rateType="form.indexation" :isSofr="isSofr" :visible="showRateDetail" @close="closeDialog" :sysTimes="sysTimes"></RateDetailDialog>
  </div>
  
  
</template>
<script>
import {debounce} from '@/utils/index.js'
export default {
  name: 'interestTerm',
  components: {
    RateDetailDialog: () => import('../components/rateDetailDialog'),
  },
  data() {
    return {
      showRateDetail: false,
      rateTypeOptions: [],
      RPOptions: [
        {text: '收取', value: 'R'},
        {text: '支付', value: 'P'},
      ],
      calcRateOptions: [],        // 计息频率
      payRateOptions: [],         // 付息频率
      payConventionOptions: [],   // 支付惯例
      basisRcsOptions: [],        // 计息基础选项
      InterestCalcMethodOptions: [],  // 单利复利
      HolidaysOptions: [],
      currencyOptions: [],      // 币种选项
      form: {
        ccy: '',           // 币种
        indexation: '',
        paymentHoliday: [],
        dealType: 'BUY',
        fixedRate: '',              // 利率
        floatingIndex: '',         // 浮动利率指标
        notional: '1000000.00',
        compoundFrequency: '6M',
        interestCalcMethod: '',     // 单利复利
        basis: '',          // 计息基础
        couponFrequency: '6M',
        rollConvention: '',        // 支付惯例
        checkList: [],
      },
      msgData: {},
      currencyDisabled: true,
      calcRateDisabled: true,
      floatRateOptions: [],       // 浮动利率指标选项
      isSofr: false,              // 是否是SOFR
      dialogForm: {               // 弹窗表单
        floatingRatio: '',
        floatingSpread: '',
        paymentLag: 0,
        resetLag: 0,
        scheduleGeneration: 'BEGIN',
        resetRollConvention: 'MODIFIED_FOLLOWING',
        resetGeneration: 'END',
        paymentAt: 'END',
        resetAt: 'BEGIN',
        amortType: 'NONE',
        amortForm: 'INCREASE',
        fixingHoliday: []
      }
    }
  },
  props: {
    componentkey: {
      type: String,
      default: () => ''
    },
    labelPosition: {
      type: String,
      default: () =>'right'
    },
    labelWidth: {
      type: String,
      default:() => '100px'
    },
    sysTimes: {
      type: Number,
      default: () => 0
    },
    // 下拉框数据
    legItems: {
      type: Object,
      default: () => {}
    },
    buySell: {
      type: String,
      default: () => ''
    },
    // 固息、浮息
    floatType: {
      type: String,
      default: () => ''
    },
    // 默认币种
    legCurrency: {
      type: String,
      default: () => ''
    },
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler: debounce(function(newVal, oldVal) {
        let data = {
          ...newVal,
          ...this.dialogForm
        }
        this.$emit('backData', this.componentkey, data)
      }, 500)
    },
    'legItems.defaultHolidays': {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.form.paymentHoliday = newVal || [] // 默认假日
        this.dialogForm.fixingHoliday = newVal || [] // 默认假日
      }
    },
    'legItems.instrument': {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.currencyDisabled = newVal === 'IRS'
      }
    },
    legCurrency: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.form.ccy = newVal || '' // 默认币种
        this.form.floatingIndex = ''
        this.floatRateOptions = this.legItems['FloatingIndexValue'].filter(item => {
          return item.domain.ccy === newVal && item.domain.indexType === 'IR'
        })
      }
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.rateTypeOptions = this.legItems['IndexFVRcs']              // 利息类型
      // 浮动利率指标
      
      this.calcRateOptions = this.legItems['CompoundType']            // 计息频率
      this.payRateOptions = this.legItems['FrequencyTypeRcs']         // 付息频率
      this.payConventionOptions = this.legItems['RollConventionRcs']  // 支付惯例
      this.basisRcsOptions = this.legItems['BasisRcs']               // 计息基础
      
      this.InterestCalcMethodOptions = this.legItems['InterestCalcMethodRcs']   // 单利复利
      this.HolidaysOptions = this.legItems['HolidaysOptions']
      this.currencyOptions = this.legItems['currencyOptions']        // 币种选项

      this.form.indexation = this.floatType
      this.form.dealType = this.buySell
      this.form.fixedRate = ''
      this.form.floatingIndex = ''
      this.form.notional = '1000000.00',
      this.form.compoundFrequency = '6M'
      this.form.interestCalcMethod = this.InterestCalcMethodOptions[0].value
      this.form.basis = this.basisRcsOptions[0].value
      this.form.couponFrequency = '6M'
      this.form.rollConvention = this.payConventionOptions[1].value

      this.msgData = this.legItems['rateMsgBoxData']
      this.msgData.holiday = this.legItems['HolidaysOptions']
      this.calcRateDisabled = this.form.indexation === 'FIXED' 

      this.$emit('backData', this.componentkey, {...this.form, ...this.dialogForm})
    },
    payDirectionChange(val) {
      this.$emit('payDirectionChange', this.componentkey, val)
    },
    changePay(val) {
      this.form.dealType = val
    },
    inputBlur(event, field, type) {
      // Handle input blur event
      console.log(`Field: ${field}, Type: ${type}, Value: ${event.target.value}`);
    },
    iconClick() {
      this.showRateDetail = true
      // this.
    },
    closeDialog(val) {
      this.showRateDetail = false
      this.dialogForm = val
      this.form = {
        ...this.form,
        ...this.dialogForm
      }
      // console.log(this.form, );
      
    },
    collectFormData() {
      return this.form
    },
    rateTypeChange(val) {
      this.calcRateDisabled = val === 'FIXED' 
      this.form.interestCalcMethod = ''
      this.form.fixedRate = ''
      this.form.floatingIndex = ''
      this.isSofr = false
    },
    // 浮动利率指标事件
    floatRateChange(val) {
      this.isSofr = val.domain.rfrsFlag === 1
      
    },
    // 付息频率事件
    payRateFrequencyChange(val) {
      if(this.form.indexation === 'FIXED') {
        this.form.compoundFrequency = val
      }
    }
  },
  
}
</script>
<style lang="scss" scoped>
.form {
  .item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .bottom-check {
    margin-top: 8px;
    text-align: right;
  }
  .mb-10 {
    margin-bottom: 10px;
  }
  .wd30 {
    width: 30%;
  }
  .wd40 {
    width: 40%;
  }
  .wd60 {
    width: 60%;
  }
  .wd70 {
    width: 70%;
  }
  .wd90 {
    width: 90%;
  }
  .wd100 {
    width: 100%;
  }
}
.el-form-item {
  margin-bottom: 5px;
  width: 100%;
}
::v-deep .el-icon-tickets {
  float: right;
  margin-top: 6px;
  font-size: 18px;
  cursor: pointer;
}
</style>