<!--
  费率配置： 设置费率模式

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->
<template>
  <div>
    <!-- 当前开启状态 && 非商户的只读模式 -->
    <template v-if="vdata.item.state == 1 && !props.readonly">
      <div>
        <a-radio-group v-model:value="vdata.item.feeType" :disabled="vdata.isFix">
          <a-radio value="SINGLE">单笔费率</a-radio>
          <a-radio value="LEVEL">阶梯费率</a-radio>
        </a-radio-group>
        
        <div v-if="vdata.item.feeType == 'SINGLE'">
          单笔费率： 
          <a-input-number v-model:value="vdata.item.feeRate" style="width: 130px;"><template #addonAfter>%</template></a-input-number>
        </div>

        <!-- 阶梯费率 -->
        <div v-else style="margin-top:20px">
          <a-checkbox :checked="vdata.isUpMode" style="margin-left:10px" @change="changeUpMode">银联模式</a-checkbox>  

          <div v-if="vdata.isUpMode">
            <div style="border:1px solid #c5c5c5; border-radius:20px; padding:10px; margin-top:20px">
              <div> 借记卡（储蓄卡）</div>
              <a-divider />
              保底费用： <a-input-number v-model:value="vdata.item.minFee" style="width: 140px;"><template #addonAfter>元</template></a-input-number>&nbsp;&nbsp;
              封顶费用： <a-input-number v-model:value="vdata.item.maxFee" style="width: 140px;"><template #addonAfter>元</template></a-input-number>
              <br><br>交易金额 &lt;= 1000元（小于等于） 设置费率：
              <a-input-number v-model:value="vdata.item.levelList[0].feeRate" style="width: 140px; margin-right: 10px;"><template #addonAfter>%</template></a-input-number>
              <br><br>交易金额 &gt;1000元（大于） 设置费率：
              <a-input-number v-model:value="vdata.item.levelList[1].feeRate" style="width: 140px; margin-right: 10px;"><template #addonAfter>%</template></a-input-number>
            </div>


            <div style="border:1px solid #c5c5c5; border-radius:20px; padding:10px; margin-top:20px">
              <div> 贷记卡（信用卡）</div>
              <a-divider />
              保底费用： <a-input-number v-model:value="vdata.item.creditCardPaywayFee.minFee" style="width: 140px;"><template #addonAfter>元</template></a-input-number>&nbsp;&nbsp;
              封顶费用： <a-input-number v-model:value="vdata.item.creditCardPaywayFee.maxFee" style="width: 140px;"><template #addonAfter>元</template></a-input-number>
              <br><br>交易金额 &lt;= 1000元（小于等于） 设置费率：
              <a-input-number v-model:value="vdata.item.creditCardPaywayFee.levelList[0].feeRate" style="width: 140px; margin-right: 10px;"><template #addonAfter>%</template></a-input-number>
              <br><br>交易金额 &gt;1000元（大于） 设置费率：
              <a-input-number v-model:value="vdata.item.creditCardPaywayFee.levelList[1].feeRate" style="width: 140px; margin-right: 10px;"><template #addonAfter>%</template></a-input-number>
            </div>
          </div>

          <div v-else>
            <div style="border:1px solid #c5c5c5; border-radius:20px; padding:10px; margin-top:20px">
              <br>
              保底费用： <a-input-number v-model:value="vdata.item.minFee" style="width: 140px;"><template #addonAfter>元</template></a-input-number>&nbsp;&nbsp;
              封顶费用： <a-input-number v-model:value="vdata.item.maxFee" style="width: 140px;"><template #addonAfter>元</template></a-input-number>

              <br><br>
              <a-button v-if="!vdata.isFix" size="small" type="primary" @click="addLevelItem()">新增阶梯</a-button> 
            
              <br><br>
              <template v-for="(levelItem, i) in vdata.item.levelList" :key="i">
                {{ i + 1 }}. <a-input-number v-model:value="levelItem.minFee" :disabled="vdata.isFix" style="width: 140px;"><template #addonAfter>元</template></a-input-number>
                ~ 
                <a-input-number v-model:value="levelItem.maxFee" :disabled="vdata.isFix" style="width: 140px;"><template #addonAfter>元</template></a-input-number>
                <a-popover placement="top">
                  <template #content>
                    <span>范围描述：(大于 ~ 小于等于]， 比如 100 ~ 200 表示：大于100并且小于等于200的范围。 </span>
                  </template>
                  <span style="margin:8px"><question-circle-outlined /></span>
                </a-popover>设置费率：
                <a-input-number v-model:value="levelItem.feeRate" style="width: 140px; margin-right: 10px;"><template #addonAfter>%</template></a-input-number>

                <a-button v-if="!vdata.isFix" @click="removeLevelItem(i)"><delete-outlined /></a-button>
                <br><br>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>


    <!-- 只读模式 -->
    <template v-if="props.readonly">
      <div>
        <div v-if="vdata.item.feeType == 'SINGLE'">
          单笔费率： {{ vdata.item.feeRate }} %
        </div>
        <div v-else>
          <!-- 银联模式 -->
          <div v-if="vdata.isUpMode">
            【借记卡（储蓄卡）】费率:   [ 保底费用：{{ vdata.item.minFee }} 元, 封顶费用：{{ vdata.item.maxFee }} 元 ]
            <template v-for="(levelItem, i) in vdata.item.levelList" :key="i">
              <br>
              {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
            </template>

            <template v-if="vdata.item.creditCardPaywayFee">
              <hr>
              【贷记卡（信用卡）】费率:   [ 保底费用：{{ vdata.item.creditCardPaywayFee.minFee }} 元, 封顶费用：{{ vdata.item.creditCardPaywayFee.maxFee }} 元 ]
              <template v-for="(levelItem, i) in vdata.item.creditCardPaywayFee.levelList" :key="i">
                <br>
                {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
              </template>
            </template>
          </div>
          <div v-else>
            阶梯费率:   [ 保底费用：{{ vdata.item.minFee }} 元, 封顶费用：{{ vdata.item.maxFee }} 元 ]
            <template v-for="(levelItem, i) in vdata.item.levelList" :key="i">
              <br>
              {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
            </template>
          </div>
        </div>
      </div>
    </template>
  </div>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from 'vue'

const vdata : any = reactive({
  item: {}, // 响应式对象
  isFix: false, //是否固定
  isUpMode: false, // 是否银联模式， 当银联模式时， 填入的金额比较固定。 
})

// 定义父组件的传值
const props : any = defineProps({
  readonly: { type: Boolean, default: true }, //是否只读， 参考父类
  value: { type: Object, default: () => { return {} } },
  fixConfig: { type: Object, default: () => { return null } }, // 固定格式， 不允许修改
  prcessValRate: { type: Boolean, default: false }, // 是否处理，value的金额值（比如 得到配置，自动回显使用）
})

onMounted(() => {

  vdata.item = props.value

  if(vdata.item.creditCardPaywayFee){ // 银联模式
    vdata.isUpMode = true
  }

  if(props.prcessValRate){
    if(typeof(vdata.item.feeRate) == 'number'){
        vdata.item.feeRate = Number.parseFloat((vdata.item.feeRate * 100).toFixed(6))
    }

    if(typeof(vdata.item.maxFee) == 'number'){
        vdata.item.maxFee = Number.parseFloat((vdata.item.maxFee / 100).toFixed(2))
    }

    if(typeof(vdata.item.minFee) == 'number'){
        vdata.item.minFee = Number.parseFloat((vdata.item.minFee / 100).toFixed(2))
    }

    if(vdata.item.levelList){
        vdata.item.levelList.forEach(levelItem => {
            if(typeof(levelItem.feeRate) == 'number'){
                levelItem.feeRate = Number.parseFloat((levelItem.feeRate * 100).toFixed(6))
            }

            if(typeof(levelItem.maxFee) == 'number'){
                levelItem.maxFee = Number.parseFloat((levelItem.maxFee / 100).toFixed(2))
            }

            if(typeof(levelItem.minFee) == 'number'){
                levelItem.minFee = Number.parseFloat((levelItem.minFee / 100).toFixed(2))
            }
        })
    }


    // 贷记卡的金额回显
    if(vdata.item.creditCardPaywayFee){

      if(typeof(vdata.item.creditCardPaywayFee.feeRate) == 'number'){
        vdata.item.creditCardPaywayFee.feeRate = Number.parseFloat((vdata.item.creditCardPaywayFee.feeRate * 100).toFixed(6))
      }

      if(typeof(vdata.item.creditCardPaywayFee.maxFee) == 'number'){
          vdata.item.creditCardPaywayFee.maxFee = Number.parseFloat((vdata.item.creditCardPaywayFee.maxFee / 100).toFixed(2))
      }

      if(typeof(vdata.item.creditCardPaywayFee.minFee) == 'number'){
          vdata.item.creditCardPaywayFee.minFee = Number.parseFloat((vdata.item.creditCardPaywayFee.minFee / 100).toFixed(2))
      }

      if(vdata.item.creditCardPaywayFee.levelList){
          vdata.item.creditCardPaywayFee.levelList.forEach(levelItem => {
              if(typeof(levelItem.feeRate) == 'number'){
                  levelItem.feeRate = Number.parseFloat((levelItem.feeRate * 100).toFixed(6))
              }

              if(typeof(levelItem.maxFee) == 'number'){
                  levelItem.maxFee = Number.parseFloat((levelItem.maxFee / 100).toFixed(2))
              }

              if(typeof(levelItem.minFee) == 'number'){
                  levelItem.minFee = Number.parseFloat((levelItem.minFee / 100).toFixed(2))
              }
          })
      }

    }

  }

  //当包含服务商的固定格式时
  vdata.isFix = (typeof props.fixConfig == 'object' && props.fixConfig)

  if(vdata.isFix){

      // 以下： 设置固定格式的： 费率模式 和 阶梯的标准（不包含配置的值） 【配置的值(比如费率值, 最大，最新费用)， 都应该重新设置。 】
      vdata.item.feeType = props.fixConfig.feeType

      let originMap  : any = {}
      if(vdata.item.levelList){

        vdata.item.levelList.forEach(element => {
          
          originMap[element.minFee +'_'+ element.maxFee] =  element.feeRate
        })
      }

      let levelResult : any = []
      if(props.fixConfig.levelList){
        levelResult = JSON.parse(JSON.stringify(props.fixConfig.levelList))
      }

      levelResult.forEach(element => {

        element.minFee = Number.parseFloat((element.minFee / 100).toFixed(2))
        element.maxFee = Number.parseFloat((element.maxFee / 100).toFixed(2))

        element.feeRate = originMap[element.minFee +'_'+ element.maxFee]
      })

      vdata.item.levelList = levelResult

      // 包含贷记卡， 肯定是银联模式了。 
      if(props.fixConfig.creditCardPaywayFee){

          vdata.isUpMode = true

          let originMap2  : any = {}
          if(vdata.item.creditCardPaywayFee && vdata.item.creditCardPaywayFee.levelList){

            vdata.item.creditCardPaywayFee.levelList.forEach(element => {
              
              originMap2[element.minFee +'_'+ element.maxFee] =  element.feeRate
            })
          }

          let levelResult2 : any = []
          if(props.fixConfig.creditCardPaywayFee.levelList){
            levelResult2 = JSON.parse(JSON.stringify(props.fixConfig.creditCardPaywayFee.levelList))
          }

          levelResult2.forEach(element => {

            element.minFee = Number.parseFloat((element.minFee / 100).toFixed(2))
            element.maxFee = Number.parseFloat((element.maxFee / 100).toFixed(2))

            element.feeRate = originMap2[element.minFee +'_'+ element.maxFee]
          })

          // 首次可能为空， 第二次是有值的， 直接赋值（可能包含  最大， 最新值）
          if(!vdata.item.creditCardPaywayFee){
            vdata.item.creditCardPaywayFee = {
              levelList: levelResult2
            }
          }else{
            vdata.item.creditCardPaywayFee.levelList = levelResult2
          }
          

      }

  }

})


function addLevelItem(){
  vdata.item.levelList.push({})
}

function removeLevelItem(i){
  vdata.item.levelList.splice(i, 1)
}


function changeUpMode(e){

  // 银联模式
  if(e.target.checked){

    vdata.item.levelList = [{minFee: 0, maxFee: 1000}, {minFee: 1000, maxFee: 999999.99}]
    vdata.item.creditCardPaywayFee = { levelList: [{minFee: 0, maxFee: 1000}, {minFee: 1000, maxFee: 999999.99}] }

  }else{

    delete vdata.item.creditCardPaywayFee
  }

  // 最后在赋值并进行页面的渲染（如果采用v-model 可能导致页面渲染报错的问题）
  vdata.isUpMode =e.target.checked

}


</script>