<!--
  费率显示卡片（ 根据支付类型区分 ）

  @author terrfly
  @site https://www.jeequan.com
  @date 2023/02/21 14:26
-->

<template>
  <div v-if="pvdata.allPaywayList.filter( r => (r.wayType == props.wayType)).length > 0 ">
    <div class="rate-header">
      <div class="rate-title">
        <template v-if="props.wayType == 'WECHAT'">微信</template>
        <template v-if="props.wayType == 'ALIPAY'">支付宝</template>
        <template v-if="props.wayType == 'YSFPAY'">云闪付</template>
        <template v-if="props.wayType == 'UNIONPAY'">银联</template>
        <template v-if="props.wayType == 'DCEPPAY'">数字人民币</template>
        <template v-if="props.wayType == 'OTHERS'">其他</template>
        产品费率
      </div>
      <div class="rate-header-right">
        <template v-if="isMergeFeeMode()">
          <template v-for="(record, i) in pvdata.allPaywayList.filter( r => (r.wayType == props.wayType) )" :key="i">
            <a-checkbox :disabled="isMainReadonly()" :checked="pvdata.mainRateMap[record.wayCode].state" @change="(e) => pvdata.mainRateMap[record.wayCode].state = e.target.checked ? 1 : 0 ">{{ record.wayName }}</a-checkbox>
          </template>
        </template>

        <template v-if="!isMainReadonly()">
          <a-button v-if="!isMergeFeeMode()" type="primary" style="margin-right: 15px" @click="mergeFeeFunc(true)">合并配置</a-button>
          <a-button v-if="isMergeFeeMode()" type="primary" style="margin-right: 15px" @click="mergeFeeFunc(false)">拆分配置</a-button>
        </template>
      </div>
    </div>


    <div v-for="(record, i) in getAllPaywayList()" :key="i" class="rate-card-wrapper">
      <div v-if="!isMergeFeeMode() || !isMainReadonly()" class="card-header">
        <div v-if="!isMergeFeeMode()" class="h-left">{{ record.wayName }} ( {{ record.wayCode }} )</div>
        <div v-if="!isMainReadonly()" class="h-right h-right2" style="display: flex;">
          <div class="h-right2-div">是否开通：<a-switch v-model:checked="pvdata.mainRateMap[record.wayCode].state" :checkedValue="1" :unCheckedValue="0" @change="changeStateFunc($event, record.wayCode)" /></div>
          <div v-if="props.configMode == 'mgrIsv'" class="h-right2-div">是否可进件：<a-switch v-model:checked="pvdata.mainRateMap[record.wayCode].applymentSupport" :checkedValue="1" :unCheckedValue="0" /></div>
          <div class="h-right2-div">阶梯费率：<a-switch v-model:checked="pvdata.mainRateMap[record.wayCode].feeType" checkedValue="LEVEL" unCheckedValue="SINGLE" @change="changeFeeTypeFunc($event, record.wayCode)" /></div>
          <div class="h-right2-div">银联模式：<a-switch :disabled="pvdata.mainRateMap[record.wayCode].feeType == 'SINGLE'" :checked="pvdata.mainRateMap[record.wayCode].creditCardPaywayFee != null " @change="changeIsYLmodel($event, record.wayCode)" /></div>
        </div>
      </div>

      <div v-if="pvdata.mainRateMap[record.wayCode].state == 1" class="rate-card-content">
        <!-- 单笔费率 -->
        <div v-if="pvdata.mainRateMap[record.wayCode].feeType == 'SINGLE'" class="weChat-pay-list">
          <!-- 服务商底价 -->
          <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item">
            <div class="w-pay-title">服务商底价：</div>
            单笔： {{ pvdata.readonlyIsvCostRateMap[record.wayCode].feeRate }}%
          </div>

          <!-- 上级代理商底价 -->
          <div v-if="readonlyParentAgentRate()" class="w-pay-item">
            <div class="w-pay-title">上级代理商费率：</div>
            单笔： {{ pvdata.readonlyParentAgentRateMap[record.wayCode].feeRate }}%
          </div>

          <!-- 主配置项 -->
          <div class="w-pay-item">
            <div class="w-pay-title">{{ getShowName('mainRateMap') }}：</div>
            <template v-if="isMainReadonly()">
              单笔： {{ pvdata.mainRateMap[record.wayCode].feeRate }}%
            </template>
            <a-input-number v-else v-model:value="pvdata.mainRateMap[record.wayCode].feeRate"><template #addonAfter>%</template></a-input-number>
          </div>

          <!-- 下级代理默认 -->
          <div v-if=" getShowName('agentdefMap')" class="w-pay-item">
            <div class="w-pay-title">{{ getShowName('agentdefMap') }}：</div>
            <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].feeRate"><template #addonAfter>%</template></a-input-number>
          </div>

          <!-- 商户默认 -->
          <div v-if=" getShowName('mchapplydefMap')" class="w-pay-item">
            <div class="w-pay-title">{{ getShowName('mchapplydefMap') }}：</div>
            <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].feeRate"><template #addonAfter>%</template></a-input-number>
          </div>
        </div>

        <!-- 阶梯费率 -->
        <template v-if="pvdata.mainRateMap[record.wayCode].feeType == 'LEVEL'">
          <!-- 服务商底价 -->
          <div v-if="isShowReadonlyIsvCostRate()">
            服务商底价： 
            [ 保底费用：{{ pvdata.readonlyIsvCostRateMap[record.wayCode].minFee }} 元, 封顶费用：{{ pvdata.readonlyIsvCostRateMap[record.wayCode].maxFee }} 元 ]
            <template v-for="(levelItem, i) in pvdata.readonlyIsvCostRateMap[record.wayCode].levelList" :key="i">
              <br>
              {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
            </template>
          </div>

          <!-- 上级代理商底价 -->
          <div v-if="readonlyParentAgentRate()">
            上级代理商费率： 
            [ 保底费用：{{ pvdata.readonlyParentAgentRateMap[record.wayCode].minFee }} 元, 封顶费用：{{ pvdata.readonlyParentAgentRateMap[record.wayCode].maxFee }} 元 ]
            <template v-for="(levelItem, i) in pvdata.readonlyParentAgentRateMap[record.wayCode].levelList" :key="i">
              <br>
              {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
            </template>
          </div>


          <!-- 阶梯模式： 非银联 -->
          <template v-if="!pvdata.mainRateMap[record.wayCode].creditCardPaywayFee">
            <template v-if="isMainReadonly()">
              <div>
                [ 保底费用：{{ pvdata.mainRateMap[record.wayCode].minFee }} 元, 封顶费用：{{ pvdata.mainRateMap[record.wayCode].maxFee }} 元 ]
                <template v-for="(levelItem, i) in pvdata.mainRateMap[record.wayCode].levelList" :key="i">
                  <br>
                  {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
                </template>
              </div>
            </template>
            <template v-else>
              <div v-for="(levelItem, j) in pvdata.mainRateMap[record.wayCode].levelList" :key="j" class="weChat-pay-list">
                <div class="w-pay-item">
                  <div v-if="j == 0" class="w-pay-title">价格区间：</div>
                  <a-input-number v-model:value="levelItem.minFee" style="width:150px" @change="levelItemChangeFunc($event, record.wayCode, j, 'minFee')"><template #addonAfter>~</template></a-input-number>
                  <a-input-number v-model:value="levelItem.maxFee" style="width:150px;" @change="levelItemChangeFunc($event, record.wayCode, j, 'maxFee')"><template #addonAfter>元</template></a-input-number>
                </div>
                <div class="w-pay-item">
                  <div v-if="j == 0" class="w-pay-title">{{ getShowName('mainRateMap') }}：</div>
                  <a-input-number v-model:value="levelItem.feeRate"><template #addonAfter>%</template></a-input-number>
                </div>
                <div v-if=" getShowName('agentdefMap')" class="w-pay-item">
                  <div v-if="j == 0" class="w-pay-title">{{ getShowName('agentdefMap') }}：</div>
                  <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].levelList[j].feeRate"><template #addonAfter>%</template></a-input-number>
                </div>
                <div v-if=" getShowName('mchapplydefMap')" class="w-pay-item">
                  <div v-if="j == 0" class="w-pay-title">{{ getShowName('mchapplydefMap') }}：</div>
                  <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].levelList[j].feeRate"><template #addonAfter>%</template></a-input-number>
                </div>
                <div class="w-pay-item">
                  <a-button style="margin-top:40px" type="link" danger @click="removeLevelItem(record.wayCode, j)">删除</a-button>
                </div>
              </div>
          
              <div style="margin-top:30px; margin-bottom: 20px; display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-around;">
                <a-button type="dashed" @click="addLevelItem(record.wayCode)">新增阶梯</a-button>
              </div>
            </template>
          </template>
          <!-- 阶梯模式： 银联 -->
          <template v-else>
            <div class="weChat-pay-list">
              <div class="w-pay-item">
                <div class="w-pay-title">类型：</div><br><br>
                <div class="w-pay-title">借记卡：</div><br><br><br><br>
                <div class="w-pay-title">贷记卡：</div><br><br>
              </div>
              <div class="w-pay-item">
                <div class="w-pay-title">{{ getShowName('mainRateMap') }}：</div>


                <template v-if="isMainReadonly()">
                  <div>
                    [ 保底费用：{{ pvdata.mainRateMap[record.wayCode].minFee }} 元, 封顶费用：{{ pvdata.mainRateMap[record.wayCode].maxFee }} 元 ]
                    <template v-for="(levelItem, i) in pvdata.mainRateMap[record.wayCode].levelList" :key="i">
                      <br>
                      {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
                    </template>
                  </div>
                  <div style="margin-top:20px">
                    [ 保底费用：{{ pvdata.mainRateMap[record.wayCode].creditCardPaywayFee.minFee }} 元, 封顶费用：{{ pvdata.mainRateMap[record.wayCode].creditCardPaywayFee.maxFee }} 元 ]
                    <template v-for="(levelItem, i) in pvdata.mainRateMap[record.wayCode].creditCardPaywayFee.levelList" :key="i">
                      <br>
                      {{ levelItem.minFee }} 元 ~  {{ levelItem.maxFee }}元， 费率： {{ levelItem.feeRate }}%
                    </template>
                  </div>
                </template>
                <template v-else>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].levelList[0].feeRate"><template #addonBefore>交易金额 &lt;= 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].levelList[1].feeRate"><template #addonBefore>交易金额 &gt; 1000元：</template><template #addonAfter>%</template></a-input-number><br><br><br><br>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].creditCardPaywayFee.levelList[0].feeRate"><template #addonBefore>交易金额 &lt;= 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].creditCardPaywayFee.levelList[1].feeRate"><template #addonBefore>交易金额 &gt; 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
                </template>
              </div>
              <div v-if=" getShowName('agentdefMap')" class="w-pay-item">
                <div class="w-pay-title">{{ getShowName('agentdefMap') }}：</div>
                <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].levelList[0].feeRate"><template #addonBefore>交易金额 &lt;= 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].levelList[1].feeRate"><template #addonBefore>交易金额 &gt; 1000元：</template><template #addonAfter>%</template></a-input-number><br><br><br><br>
                <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].creditCardPaywayFee.levelList[0].feeRate"><template #addonBefore>交易金额 &lt;= 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].creditCardPaywayFee.levelList[1].feeRate"><template #addonBefore>交易金额 &gt; 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
              </div>
              <div v-if=" getShowName('mchapplydefMap')" class="w-pay-item">
                <div class="w-pay-title">{{ getShowName('mchapplydefMap') }}：</div>
                <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].levelList[0].feeRate"><template #addonBefore>交易金额 &lt;= 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].levelList[1].feeRate"><template #addonBefore>交易金额 &gt; 1000元：</template><template #addonAfter>%</template></a-input-number><br><br><br><br>
                <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].creditCardPaywayFee.levelList[0].feeRate"><template #addonBefore>交易金额 &lt;= 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].creditCardPaywayFee.levelList[1].feeRate"><template #addonBefore>交易金额 &gt; 1000元：</template><template #addonAfter>%</template></a-input-number><br><br>
              </div>
            </div>
          </template>

          <a-collapse v-if="!isMainReadonly()">
            <a-collapse-panel key="1" header="高级配置">
              <div class="weChat-pay-list" style="margin-top:10px">
                <div class="w-pay-item" />
                <div class="w-pay-item">
                  <div class="w-pay-title">{{ getShowName('mainRateMap') }} 保底/封顶费用：</div>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].minFee"><template #addonBefore>保底费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].maxFee"><template #addonBefore>封顶费用：</template><template #addonAfter>元</template></a-input-number>
                </div>
                <div v-if=" getShowName('agentdefMap')" class="w-pay-item">
                  <div class="w-pay-title">{{ getShowName('agentdefMap') }} 保底/封顶费用：</div>
                  <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].minFee"><template #addonBefore>保底费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].maxFee"><template #addonBefore>封顶费用：</template><template #addonAfter>元</template></a-input-number>
                </div>
                <div v-if=" getShowName('mchapplydefMap')" class="w-pay-item">
                  <div class="w-pay-title">{{ getShowName('mchapplydefMap') }} 保底/封顶费用：</div>
                  <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].minFee"><template #addonBefore>保底费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].maxFee"><template #addonBefore>封顶费用：</template><template #addonAfter>元</template></a-input-number>
                </div>
              </div>

              <div v-if="pvdata.mainRateMap[record.wayCode].creditCardPaywayFee" class="weChat-pay-list" style="margin-top:50px">
                <div class="w-pay-item" />
                <div class="w-pay-item">
                  <div class="w-pay-title">(贷记卡) {{ getShowName('mainRateMap') }} 保底/封顶费用：</div>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].creditCardPaywayFee.minFee"><template #addonBefore>保底费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.mainRateMap[record.wayCode].creditCardPaywayFee.maxFee"><template #addonBefore>封顶费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                </div>
                <div v-if=" getShowName('agentdefMap')" class="w-pay-item">
                  <div class="w-pay-title">(贷记卡){{ getShowName('agentdefMap') }}保底/封顶费用：</div>
                  <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].creditCardPaywayFee.minFee"><template #addonBefore>保底费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.agentdefMap[record.wayCode].creditCardPaywayFee.maxFee"><template #addonBefore>封顶费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                </div>
                <div v-if=" getShowName('mchapplydefMap')" class="w-pay-item">
                  <div class="w-pay-title">(贷记卡){{ getShowName('mchapplydefMap') }} 保底/封顶费用：</div>
                  <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].creditCardPaywayFee.minFee"><template #addonBefore>保底费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="pvdata.mchapplydefMap[record.wayCode].creditCardPaywayFee.maxFee"><template #addonBefore>封顶费用：</template><template #addonAfter>元</template></a-input-number><br><br>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </template>
      </div>
    </div>


    <div v-show="vdata.highConfigFlag" class="high-card" />
    <div style="margin-bottom: 20px" />
  </div>
</template>

<script setup lang="ts">

import { ref, defineProps, reactive, inject, getCurrentInstance } from 'vue'
  
  // 导入全局函数
const { $infoBox, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties


// 获取到上一级的 所有vdata参数 
let pdataInject : any = inject('pvdata')
let pvdata : any = pdataInject.value


// 组件注入
const props: any = defineProps({
  wayType: { type:String, default: '' }, // 筛选的类型 
  configMode: { type: String, default: '' },   // 模式
})

const vdata: any = reactive({
})

// 新增一条 阶梯 记录 
function addLevelItem(wayCode){
  getList().forEach(r => r[wayCode].levelList.push({}))
}

// 删除一个阶梯费率 
function removeLevelItem(wayCode, i){
  getList().forEach(r => r[wayCode].levelList.splice(i, 1))
}

// 切换 主 状态时： 切换其他状态。 
function changeStateFunc(state, wayCode){
  getList().forEach(r => r[wayCode].state = state)
}


// 切换 主 费率模式时， 切换其他的费率模式
function changeFeeTypeFunc(feeType, wayCode){
  getList().forEach(r => r[wayCode].feeType = feeType)
}

// 阶梯费率变化时： 需要将其他的费率也同步更改
function levelItemChangeFunc(amount, wayCode, levelIndex, type){
  getList().forEach(r => r[wayCode].levelList[levelIndex][type] = amount)
}

// 切换是否银联模式 
function changeIsYLmodel(state, wayCode){

  getList().forEach(r => {

    // 银联模式
    if(state){
      r[wayCode].levelList = [{minFee: 0, maxFee: 1000}, {minFee: 1000, maxFee: 999999.99}]
      r[wayCode].creditCardPaywayFee = { levelList: [{minFee: 0, maxFee: 1000}, {minFee: 1000, maxFee: 999999.99}] }

    }else{

      delete r[wayCode].creditCardPaywayFee
    }

  })

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


// 获取到需要处理的哪几个记录 
function getList(){

  let result = [pvdata.mainRateMap]

  if(getShowName('agentdefMap')){
    result.push(pvdata.agentdefMap)
  }
  if(getShowName('mchapplydefMap')){
    result.push(pvdata.mchapplydefMap)
  }

  return result
}


// 合并配置  和 拆分配置
function mergeFeeFunc(ctrl){

  getList().forEach(r => {

    if(ctrl){
      // 默认为第一条数据 
      r[getMergeWayCode()] = JSON.parse(JSON.stringify(pvdata.mainRateMap[pvdata.allPaywayList.filter( r => (r.wayType == props.wayType) )[0].wayCode]))
      r[getMergeWayCode()].state = 1
      r[getMergeWayCode()].wayCode = getMergeWayCode()
    }else{

      delete r[getMergeWayCode()]
    }
  })
  
}

// 合并模式 返回一条数据，   拆分模式按照所有的列表进行返回。  
function getAllPaywayList(){

  if(pvdata.mainRateMap[getMergeWayCode()]){
    return [{ wayCode: getMergeWayCode() }]
  }
  return pvdata.allPaywayList.filter( r => (r.wayType == props.wayType) )
}

// 判断是否： 合并模式 
function isMergeFeeMode(){
  if(pvdata.mainRateMap[getMergeWayCode()]){
    return true
  }
  return false
}

// 拼接合并费率的唯一编号。 
function getMergeWayCode(){
  return '$$MERGE_FEE_' + props.wayType
}


function getShowName(mapName){
  
  // 运营平台： 服务商的配置费率模式
  if(props.configMode == 'mgrIsv'){
      if(mapName == 'mainRateMap') return '服务商底价'
      if(mapName == 'agentdefMap' && $hasAgentEnt() ) return '代理商默认费率'
      if(mapName == 'mchapplydefMap') return '商户进件默认费率'
      if(mapName == 'mchapplyupperMap') return '商户进件费率上限'
  }

  if(props.configMode == 'mgrAgent'){
      if(mapName == 'mainRateMap') return '当前代理商费率'
      if(mapName == 'agentdefMap' && $hasAgentEnt() ) return '下级代理商默认费率'
      if(mapName == 'mchapplydefMap' && $hasAgentEnt() ) return '代理商所属商户进件默认费率'
     if(mapName == 'mchapplyupperMap' && $hasAgentEnt() ) return '商户进件费率上限'
  }

    if(props.configMode == 'agentSelf'){
      if(mapName == 'mainRateMap') return '我的代理费率'
      if(mapName == 'agentdefMap' && $hasAgentEnt() ) return '下级代理商默认费率'
      if(mapName == 'mchapplydefMap') return '商户进件默认费率'
      if(mapName == 'mchapplyupperMap') return '商户进件费率上限'
  }

  if(props.configMode == 'agentSubagent'){
      if(mapName == 'mainRateMap') return '代理费率'
  }

  if(props.configMode == 'mgrMch' || props.configMode == 'agentMch' ){
      if(mapName == 'mainRateMap') return '商户费率'
  }

  if(props.configMode == 'mgrApplyment' || props.configMode == 'agentApplyment'){
      if(mapName == 'mainRateMap') return '进件费率'
  }

  if(props.configMode == 'mchSelfApp1'){
    if(mapName == 'mainRateMap') return '接口费率'
  }

 
  // 新添加的判断逻辑：  
  if(props.configMode == 'mchApplyment'){
    if(mapName == 'mainRateMap') return '进件费率'
  }


  return ''
}

// 判断 main数据是否只读 
function isMainReadonly(){
  return props.configMode == 'mchApplyment' || props.configMode == 'agentSelf' 
}


// 判断 是否显示 服务商底价的显示列
function isShowReadonlyIsvCostRate(){
  return props.configMode == 'mgrMch'
}

// 判断 是否显示 上级代理商 显示列
function readonlyParentAgentRate(){
  return props.configMode == 'mgrMch'
}


</script>

<style lang="less" scoped>

.rate-card-wrapper {
  margin-bottom: 20px;
  position: relative;

  width: 100%;
  // height: 182px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 48px;
    border-radius: 5px 5px 0 0;
    background-color: #fafafa;
    .card-title {
      font-size: 14px;
      font-weight: 700;
    }
    .h-left {
      display: flex;
      align-items: center;
      div {
        display: flex;
        align-items: center;
      }
      div:nth-child(n + 2) {
        margin-left: 30px;
      }
    }
  }
  .rate-card-content {
    padding: 30px 30px 40px 30px;
  }
  .high-config {
    position: absolute;
    bottom: -20px;
    left: 30px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 40px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
    background-color: #fafaff;
    user-select: none;
  }
}
.high-card {
  transform: translateY(-5px);
  border: 1px solid #d9d9d9;
  border-top: none;
  padding: 55px 30px 40px 30px;
  border-radius: 0 0 5px 5px;
}
.rate-header {
  padding-top: 30px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  .rate-title {
    text-indent: 20px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
  }
}


.weChat-pay-list {
  display: flex;
  align-items: center;

  .w-pay-title {
    margin-bottom: 20px;
  }

  .w-pay-item:nth-child(n+2) {
    margin-left: 70px;
  }
}

.unPay-title-list {
  display: flex;
  margin-bottom: 20px;

  .unPay-title-item {
    width: 300px;
    font-size: 14px;
    font-weight: 700;
  }

  .unPay-title-item:nth-child(n + 2) {
    margin-left: 70px;
  }
}

.unPay-input-list {
  display: flex;
  margin-bottom: 20px;

  .unPay-input-item {
    width: 300px;
  }

  .unPay-input-item :deep .ant-input-group-wrapper:nth-child(1) {
    margin-bottom: 20px;
  }

  .unPay-input-item:nth-child(n + 2) {
    margin-left: 70px;
  }
}

.save-but-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 90px;

  .save-but-item {
    width: 160px;
  }


}

.h-right2-div{
    margin-left: 20px
  }


</style>
