<!--
  选址商户 和 支付接口 的页面

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/05/07 10:20
-->
<template>
  <div>
    <a-card class="table-card">
      <a-affix offsetTop="0">
        <div style="display: flex; justify-content: space-between; line-height: 60px; background-color: white; ">
          <div style="font-weight: bold; margin-left: 30px;"> {{ (configMode == 'mgrApplyment' || configMode == 'agentApplyment') ? '选择商户及进件渠道' : '选择进件渠道' }}  </div>
        </div>
        <a-divider style="margin: 0" />
      </a-affix>

      <div v-if="copyInfoSourceApplyId" style="margin:20px; margin-left:20px">
        <a-tag color="orange">进件资料自动填充来源： {{ copyInfoSourceApplyId }} </a-tag>
      </div>

<!--      <JeepaySearchForm v-if="(configMode == 'mgrApplyment' || configMode == 'agentApplyment')" :searchFunc="searchFunc" :resetFunc="() => vdata.mchListSearchData= { state: 1, type: 2 }">-->
<!--        <jeepay-text-up v-model:value="vdata.mchListSearchData.mchName" :placeholder="'用户名称'" />-->
<!--        <jeepay-text-up v-model:value="vdata.mchListSearchData.mchNo" :placeholder="'用户号'" />-->
<!--      </JeepaySearchForm>-->
      <a-row type="flex" align="top">
        <!--        <a-col :span="(configMode == 'mgrApplyment' || configMode == 'agentApplyment') ? 12 : 24" class="state-box-div">-->
        <!--          <div class="state-box"   @click="getVisibleState(1)">-->
        <!--            <img src="https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/xainxia.png" alt="" :class="{ 'state-selected': vdata.visibleState == 1 }">-->
        <!--          </div>-->
        <!--          <div class="state-box"  @click="getVisibleState(2)">-->
        <!--            <img src="https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/xianshang.png" alt="" :class="{ 'state-selected': vdata.visibleState == 2 }">-->
        <!--          </div>-->
        <!--        </a-col>-->
        <a-col  :span="15"  v-if="(configMode == 'mgrApplyment' || configMode == 'agentApplyment')" >
          <div  style="display:flex;margin: 30px 0px 0px 30px;">
            <a-form-item label="请选择用户" name="autoConfigMchAppId" >
              <JeepaySearchInfoInput v-model:value="mchApplymentData.mchNo" @itemRender="getUserInfo" placeholder="用户号/名称/手机号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />
            </a-form-item>
            <div style="margin-left: 10px;">
              <a-button  type="primary" @click="getAddApps(1)"><plus-outlined />新增用户</a-button>
            </div>
          </div>
        </a-col>
        <a-col :span="24">


          <!-- 列表渲染 -->
<!--          <JeepayTable-->
<!--              v-if="(configMode == 'mgrApplyment' || configMode == 'agentApplyment')"-->
<!--              ref="mchListTableRef"-->
<!--              :initData="false"-->
<!--              :reqTableDataFunc="reqTableDataFunc"-->
<!--              :tableColumns="mchListTableColumns"-->
<!--              :searchData="vdata.mchListSearchData"-->
<!--              :topRowIsShow="false"-->
<!--              row-key="mchNo"-->
<!--              :rowSelection="{ type: 'radio', selectedRowKeys: vdata.mchSelectedRowKeys, onChange: mchTableSelectChangeFunc }"-->
<!--              :customRow="mchCustomRow"-->
<!--          >-->
<!--            <template #topBtnSlot>-->
<!--              <a-tag v-if="mchApplymentData.mchNo" closable color="green" @close="() => {mchApplymentData.mchNo = undefined}">已选择商户： {{ mchApplymentData.mchNo }} </a-tag>-->
<!--            </template>-->
<!--          </JeepayTable>-->

          <!--          <a-col :span="4" :offset="1">-->
          <!--            <a-form-item>-->
          <!--              <a-checkbox :checked="mchApplymentData.autoConfigMchAppId" @change="changeAautoConfigMchAppIdFunc">自动配置到应用</a-checkbox>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <!-- 选择自动配置应用 -->
          <a-row v-if="vdata.visibleState == 2" type="flex" style="margin-left: 45px;margin-top: 30px;">

            <a-col  :span="15" style="display:flex;">
              <div>
                <a-form-item label="请选择线上应用" name="autoConfigMchAppId" >
                  <!--                 show-search-->
                  <a-select v-model:value="mchApplymentData.autoConfigMchAppId" placeholder="请选择线上应用"   @search="handleAppidChange">
                    <a-select-option v-for="d in vdata.filteredAppInfoList" :key="d.appId" :value="d.appId">
                      {{ d.appName + " [ " + d.appId + " ]" }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <span class="jeepay-tip-text jeepay-tip-title">(线上场景需要通过应用获取各种能力并进行开发对接（如APP支付、分账、代付等），当前进件商户需要与应用进行关联。 <a target="_blank" href="https://shouyinbei.yuque.com/rv7pt7/xczlxt/dgxuxxgl17vsvwvl?singleDoc#" style="font-weight: 600">了解应用</a>  )</span>
              </div>
              <div style="margin-left: 10px;">
                <a-button  type="primary" @click="getAddApps()"><plus-outlined />新增应用</a-button>
              </div>
            </a-col>
          </a-row>
        </a-col>

        <a-col :span="(configMode == 'mgrApplyment' || configMode == 'agentApplyment') ? 24 : 24">
          <!-- 列表渲染 -->
          <JeepayTable
              ref="ifCodeListTableRef"
              :initData="false"
              :reqTableDataFunc="reqIfCodeTableDataFunc"
              :tableColumns="ifCodeTableColumns"
              :searchData="vdata.ifCdoeListSearchData"
              :topRowIsShow="false"
              row-key="ifCode"
              :rowSelection="{ type: 'radio', selectedRowKeys: vdata.ifCodeSelectedRowKeys, onChange: ifCodeTableSelectChangeFunc }"
              :customRow="ifCodeCustomRow"
              style="display:none;"
          />

          <div class="pay-list-wrapper" :style="{ height: vdata.rateListHeight }" >
            <div v-for="(v, i) in vdata.ifCodeList" :key="i" class="pay-item-wrapper">
              <div class="pay-content" :class="{ 'pay-selected': vdata.currentIfCode == v.ifCode }" :style="v.stateBgColor" @click="selectIfCode(v.ifCode,v)">
                <div class="pay-img" :style="{ backgroundColor: v.bgColor }">
                  <img :src="v.icon" alt="">
                  <div class="pay-state-dot" :style="{ backgroundColor: calcStateBgColor(v.configState) }" />
                </div>
                <div class="pay-info">
                  <div class="pay-title">{{ v.ifName }}</div>
                  <div class="pay-code">{{ v.ifCode }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <a-col v-if="vdata.currentIfCode" :span="(configMode == 'mgrApplyment' || configMode == 'agentApplyment') ? 24 : 24">

          <!--        <JeepayTable-->
          <!--            ref="infoPayTable"-->
          <!--            :initData="false"-->
          <!--            :reqTableDataFunc="reqTableChannelDataFunc"-->
          <!--            :tableColumns="tableColumns"-->
          <!--            :searchData="vdata.searchData"-->
          <!--            :topRowIsShow="false"-->
          <!--            row-key="ifCode"-->
          <!--            :rowSelection="{ type: 'radio', selectedRowKeys: vdata.ifCodeSelectedRowKeys, onChange: ifCodeTableSelectChangeFunc }"-->
          <!--            :customRow="ifCodeCustomRow"-->
          <!--            -->
          <!--        />-->

          <JeepayTable
              ref="infoPayTable"
              :initData="true"
              :reqTableDataFunc="reqTableChannelDataFunc"
              :tableColumns="tableColumns"
              :searchData="vdata.ifCdoeChannelListSearchData"
              :topRowIsShow="false"
              row-key="isvNo"
              :rowSelection="{ type: 'radio', selectedRowKeys: vdata.ifCodeChannelSelectedRowKeys, onChange: ifCodeTableChannelSelectChangeFunc }"
              :customRow="ifCodeChannelCustomRow"
          />

        </a-col>
      </a-row>


      <a-affix :offset-bottom="20">
        <div style="background-color: white;">
          <a-divider style="margin: 0; margin-top: 20px;" />

          <div class="bottom-buttons">
            <div class="bottom-buttons-item" @click="emits('switchApplyPage', 'list')">
              <a-button type="link" style="color: #808080 ;"><left-outlined />返回列表页</a-button>
            </div>
            <div style="width: 1px; height: 100%; background-color: #f0f0f0;" />
            <div class="bottom-buttons-item" @click="toNextPage()">
              <a-button type="link">去填写资料<right-outlined /></a-button>
            </div>
          </div>
        </div>
      </a-affix>
    </a-card>
  </div>
</template>
<script setup lang="ts">

import { ref, reactive, getCurrentInstance, defineEmits, defineExpose, inject,nextTick } from 'vue'
import {
  API_URL_MCH_LIST,
  API_URL_MCH_APP,
  $getPayConfigIfcodes,
  req,
  $applyPreCheck,
  $getMchPayParamsExist,
  API_URL_ISV_INFO_LIST
} from '@/api/manage'
import {message} from "ant-design-vue";
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties


// list页面的 切换页面的函数
const emits = defineEmits(['switchApplyPage'])

// 参数注入： 接收进件参数（包含 用户号， ifCode ） 【  当修改操作时：  列表页面需要查询出进件信息，并provice该信息 】
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 参数注入： 配置方式
let configMode : any = inject('configMode')


// 参数注入： 副本来源
let copyInfoSourceApplyId : any = inject('copyInfoSourceApplyId')

// 定义父组件的传值
const props : any = defineProps({
  listPageSearchMchNo: { type: String, default: '' }, // 上级搜索的商户号
})

// 表格的对象
const mchListTableRef = ref()
const ifCodeListTableRef = ref()

// 响应式对象
const vdata : any = reactive({
  visibleState:0,
  ifCdoeChannelListSearchData: {},
  rateListHeight: 'auto', // 初始高度
  mchListSearchData: { state: 1, type: 2, mchNo: '' },
  ifCdoeListSearchData: {},
  ifCodeList: [], // 支付接口的全部列表信息
  filteredAppInfoList:[] as any,
  mchSelectedRowKeys: [], // 商户表格 选中行的key数组
  ifCodeSelectedRowKeys: [], // 支付接口 选中行的key数组
  selectedIfName: '', // 选中的接口名称
  ifCodeChannelSelectedRowKeys:[],
  selectedIfChannelName:"" as any
})

// 商户列表
let mchListTableColumns = reactive([
  { key: 'mchName',  dataIndex: 'mchName', title: '用户名称' },
  { key: 'mchNo', title: '用户号', dataIndex: 'mchNo' },
])

// 支付接口列表
let ifCodeTableColumns = reactive([
  { key: 'ifName', dataIndex: 'ifName', title: '支付接口名称' },
  { key: 'ifCode',  dataIndex: 'ifCode', title: '支付接口代码' },
])
const tableColumns = ref([
  { key: 'isvName', title: '渠道名称', dataIndex: 'isvName' },
  { key: 'isvShortName', title: '渠道简称', dataIndex: 'isvShortName' },
  { key: 'isvNo', title: '渠道商号', dataIndex: 'isvNo' },
  // { key: 'category', title: '渠道号所属', dataIndex: 'category' },
  // { key: 'isvShortName', title: '渠道标记', dataIndex: 'isvShortName' },
])
function reqTableChannelDataFunc(params) {
  params.isvNo = props.infoId;

  params.ifCode = vdata.currentIfCode;
  params.state = 1;
  // params.state = 0;
  params.range = parseInt(vdata.visibleState)-1;
  params.infoType = 'mch';
  if(mchApplymentData.mchNo){
    params.infoId = mchApplymentData.mchNo;
  }
  if(!params.infoId){
     // return $infoBox.message.error('请选择用户')
  }

  return req.list(API_URL_ISV_INFO_LIST, params)
}

// 请求table接口数据 （ 请求商户列表 ）
function reqTableDataFunc(params: any) {
  return req.list(API_URL_MCH_LIST, params)
}

// 点击 商户的搜索事件
function searchFunc () { // 点击【查询】按钮点击事件
  mchListTableRef.value.refTable(true)
}
// reqIfCodeTableDataFunc({pageSize:"-1",state:1});
// 请求table接口数据 （ 请求支付接口列表 ）
function reqIfCodeTableDataFunc(params: any) {
  if( vdata.ifCodeList.length > 0 ){
    return new Promise((resolve, reject) => {
      resolve({ total: vdata.ifCodeList.length, records: frontPagination(vdata.ifCodeList,params.pageNumber,params.pageSize), hasNext: false })
    })
  }
 if(configMode == 'mgrApplyment' || configMode == 'agentApplyment'){
     if(!params.infoId){
       return  false;
     }
 }

      // selectedIsvNo 可能是 CURRENT(原逻辑)   仅当运营平台发起进件时可能是： mchNo
  return $getPayConfigIfcodes(params.infoId, params.configMode, '').then(res => {
    // 接口支持进件（后端处理）、进件开关开启，选择商户及进件渠道页面才显示相应接口
    const ifCodeList = [] as any
    console.log(res,'resresresresres')
    vdata.ifCodeList = res
    res.forEach(item => {
      if(item.isOpenApplyment && item.isOpenApplyment == 1) {
        if(item.jsonChannelTypes.indexOf(vdata.visibleState) !== -1)
          ifCodeList.push(item)
      }
    })
    console.log(ifCodeList,'ifCodeListifCodeListifCodeList')
    // vdata.ifCodeList = ifCodeList
    return { total: ifCodeList.length, records: frontPagination(ifCodeList,params.pageNumber,params.pageSize), hasNext: false }
  })
}

// 商户表格  行选择事件
function mchTableSelectChangeFunc(e, record) {
  const selectRecord = record[0]
  vdata.mchSelectedRowKeys = []
  vdata.mchSelectedRowKeys.push(selectRecord.mchNo)
  vdata.currentIfCode = ''

  mchApplymentData.mchNo = selectRecord.mchNo

  getMchAppList(selectRecord.mchNo) // 获取商户app列表

  refIfCodeListTable(selectRecord.mchNo) // 刷新接口列表
  // 清空已选择接口
  vdata.ifCodeSelectedRowKeys = []
}

function getUserInfo(e){
  console.log(e,'getUserInfogetUserInfogetUserInfo')

  const selectRecord = e
  vdata.mchSelectedRowKeys = []
  vdata.mchSelectedRowKeys.push(selectRecord.mchNo)
  vdata.currentIfCode = ''

  mchApplymentData.mchNo = selectRecord.mchNo
  vdata.mchAppList = [];
  vdata.filteredAppInfoList = [];
  getMchAppList(selectRecord.mchNo) // 获取商户app列表

  refIfCodeListTable(selectRecord.mchNo) // 刷新接口列表
  // 清空已选择接口
  vdata.ifCodeSelectedRowKeys = []

}

// 获取商户appList
function getMchAppList(mchNo = undefined) {
  const reqData:any = { 'pageSize': -1, 'state': 1,'range':parseInt(vdata.visibleState)-1 }

  if (mchNo) {
    reqData.mchNo = mchNo
  }

  req.list(API_URL_MCH_APP, reqData).then(res => { // 应用下拉选择列表
    if (res && res.records && res.records.length > 0) {
      vdata.mchAppList = res.records
      vdata.filteredAppInfoList = res.records

      vdata.mchAppList.forEach(item => {
        if (item.defaultFlag) {
          mchApplymentData.autoConfigMchAppId = item.appId
        }
      })
      if(vdata.visibleState == 1){
        mchApplymentData.autoConfigMchAppId = undefined
      }


    }
  })
}

// 商户表格 行点击 事件
function mchCustomRow(record) {
  return {
    onClick: () => {
      mchTableSelectChangeFunc(null, [record])
    },
  }
}

// 支付接口表格  行选择事件
function ifCodeTableSelectChangeFunc(e, record) {
  const selectRecord = record[0]
  vdata.ifCodeSelectedRowKeys = []
  vdata.ifCodeSelectedRowKeys.push(selectRecord.ifCode)

  mchApplymentData.ifCode = selectRecord.ifCode
  vdata.selectedIfName = selectRecord.ifName
}
//渠道方法
function ifCodeTableChannelSelectChangeFunc(e, record) {
  const selectRecord = record[0]
  if(!record[0]){
    return false;
  }
  vdata.ifCodeChannelSelectedRowKeys = []
  vdata.ifCodeChannelSelectedRowKeys.push(selectRecord.isvNo)

  mchApplymentData.isvNo = selectRecord.isvNo
  mchApplymentData.range = parseInt(vdata.visibleState)-1
  vdata.selectedIfChannelName = selectRecord.isvName
}

function ifCodeChannelCustomRow(record) {
  // ifCodeTableChannelSelectChangeFunc(null, [record])
  return {
    onClick: () => {
      ifCodeTableChannelSelectChangeFunc(null, [record])
    },
  }
}

// 支付接口表格 行点击 事件
function ifCodeCustomRow(record) {
  return {
    onClick: () => {
      ifCodeTableSelectChangeFunc(null, [record])
    },
  }
}
// 切换 【支付产品】
function selectIfCode(ifCode,data) {
  vdata.currentIfCode = ''
  vdata.ifCodeSelectedRowKeys = []
  vdata.ifCodeSelectedRowKeys.push(ifCode)
  ifCodeTableSelectChangeFunc(null,[data])
  nextTick(() => (vdata.currentIfCode = ifCode))

}


// 自动配置appId  checkbox切换事件
function changeAautoConfigMchAppIdFunc(e) {
  if (mchApplymentData.autoConfigMchAppId) {
    mchApplymentData.autoConfigMchAppId = undefined
  }else {
    vdata.mchAppList.forEach(item => {
      if (item.defaultFlag) {
        mchApplymentData.autoConfigMchAppId = item.appId
      }
    })
  }
}
const calcStateBgColor = (state) => {
  if (!state) return '#D9D9D9'
  return state == 1 ? '#29CC96' : '#EC2E2E'
}

function  getVisibleState(state){
  vdata.visibleState = state
}
// 跳转到下一个页面
function toNextPage(){

  if( (configMode == 'mgrApplyment' || configMode == 'agentApplyment') && !mchApplymentData.mchNo){
    return $infoBox.message.error('请选择商户')
  }
  if(vdata.visibleState == 2 && mchApplymentData.autoConfigMchAppId == undefined ){
    return $infoBox.message.error('请选择应用')
  }
  console.log(mchApplymentData,'mchApplymentData.autoConfigMchAppId')

  if(!mchApplymentData.ifCode){
    return $infoBox.message.error('请选择需要进件的接口')
  }

  if(!mchApplymentData.isvNo){
    return $infoBox.message.error('请选择渠道')
  }
  // 选择了自动配置应用，校验应用是否已配置支付参数、费率
  if (mchApplymentData.autoConfigMchAppId) {
    $getMchPayParamsExist(mchApplymentData.autoConfigMchAppId, mchApplymentData.ifCode).then((res) => {
      if (res && (res.existMchParams || res.existMchParams)) {
        $infoBox.confirmPrimaryPromise('提示',
            '当前所选应用已在渠道【'+vdata.selectedIfName+'】配置参数、费率，该笔进件成功后将自动覆盖原有配置，或将导致原有支付功能失效，请谨慎提交。').then(() => {

          // 校验商户的接口是否可进件
          $applyPreCheck(mchApplymentData.mchNo, mchApplymentData.ifCode, mchApplymentData.isvNo).then((params) => {
            emits('switchApplyPage', 'applyMchDetailInfoEntry')
          })
          console.log(11111);

        })
      }else {
        console.log(22222);
        // 校验商户的接口是否可进件
        $applyPreCheck(mchApplymentData.mchNo, mchApplymentData.ifCode, mchApplymentData.isvNo).then((params) => {
          emits('switchApplyPage', 'applyMchDetailInfoEntry')
        })
      }
    })

  }else {
    console.log(33333);
    // 校验商户的接口是否可进件
    $applyPreCheck(mchApplymentData.mchNo, mchApplymentData.ifCode, mchApplymentData.isvNo).then((params) => {
      emits('switchApplyPage', 'applyMchDetailInfoEntry')
    })
  }
}

function  getAddApps(type=0){
  if(type == 1){
    emits('switchApplyPage', 'applyMch')
  }else{
    emits('switchApplyPage', 'applyAddApps')
  }
}

// 页面渲染函数
function pageRender(sceneType = 1){
  console.log(sceneType,'sceneTypesceneTypesceneType')
  vdata.visibleState  = sceneType


  // 查询出当前可操作的支付接口  TODO
  refIfCodeListTable('CURRENT')
  if(configMode == 'mgrApplyment' || configMode == 'agentApplyment'){
    vdata.mchListSearchData.mchNo = props.listPageSearchMchNo || '' // 将上级搜索的商户号带入到该页面中。
    searchFunc()
  }

  // 商户进件，查询商户自己的应用列表
  if (configMode == 'mchApplyment') {
    getMchAppList()
  }

}


// 刷新 [ 支付接口列表 ]
function refIfCodeListTable(selectedMchNo){
  mchApplymentData.ifCode = null // 清空选择
  vdata.ifCodeList = [] // 清空列表
console.log(111111111111111)
  vdata.ifCdoeListSearchData.infoId = configMode == 'mgrApplyment' ? selectedMchNo : 'CURRENT'
  vdata.ifCdoeListSearchData.configMode = configMode
  //列表隐藏
  ifCodeListTableRef.value.refTable(true)

  // selectedIsvNo 可能是 CURRENT(原逻辑)   仅当运营平台发起进件时可能是： mchNo
  /* $getPayConfigIfcodes((configMode == 'mgrApplyment' ? selectedMchNo : 'CURRENT'), configMode, '').then(res => {
    // 接口支持进件（后端处理）、进件开关开启，选择商户及进件渠道页面才显示相应接口
    res.forEach(item => {
      if(item.isOpenApplyment && item.isOpenApplyment == 1) {
        vdata.ifCodeList.push(item)
      }
    })
  }) */
}

//应用搜索
const handleAppidChange = (value) => {
  vdata.filteredAppInfoList = [];
  vdata.mchAppList.forEach((item: { appName: string | any[], appId: string | any[] },index) => {
    if (item.appName.includes(value) || item.appId.includes(value) ) {
      vdata.filteredAppInfoList.push(vdata.mchAppList[index]);
    }
  });
};


defineExpose({ pageRender })
// 前端分页 传入 array 页数 条数 进行分页
function frontPagination( arr,pageNum, pageSize) {
  const start = (pageNum - 1) * pageSize
  const end = pageNum * pageSize
  return arr.slice(start, end)
}
</script>

<style lang="less">
.ant-list-item.selected-item-border {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid;
    border-radius: 16px;
    box-sizing: content-box;
    border-color: var(--ant-primary-color);
  }

  .select-div {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 36px;
    height: 36px;
    z-index: 9;
    border-radius: 5px 0 13px 0;
    background: var(--ant-primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 18px;
  }
}

.bottom-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 60px;

  .bottom-buttons-item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .bottom-buttons-item:hover {
    transition: 0.3s ease;
    background-color: rgba(23, 91, 230, 0.05);
    cursor: pointer;
  }
}
.ifCode-wrapper{
  width: 100%;
  overflow-y: auto;
}


// 支付渠道 卡片部分
.pay-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0 40px;
  margin-top: 20px;
  overflow: hidden;
}
.pay-item-wrapper {
  padding: 10px;
  width: 20%;
}
.pay-content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 90px;
  border-radius: 5px;
  border: 1px solid #dedede;
  background: #fff;
  cursor: pointer;
  .pay-img {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    margin-right: 12px;
    background-color: #0853ad;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    img {
      width: 50%;
    }
    .pay-state-dot {
      box-sizing: content-box;
      display: block;
      position: absolute;
      bottom: -3px;
      right: -3px;
      width: 12px;
      height: 12px;
      background-color: var(--state-bg-color);
      border: 3px solid #fff;
      border-radius: 50%;
    }
  }
  .pay-info {
    .pay-title {
      font-size: 14px;
      font-weight: 600;
    }
    .pay-code {
      font-size: 13px;
      color: rgb(26, 25, 25);
    }
  }
}
// 支付渠道卡片选中后的样式
.pay-selected {
  border: 2px solid #1a79ff;
  background: rgba(25, 121, 255, 0.05);
  &::after {
    content: '√';
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #1a79ff;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 0 0 0 5px;
  }
}
// tab 选择框部分
.tab-wrapper {
  position: relative;
  height: 50px;
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
  }
  .open-close {
    width: 80px;
    height: 36px;
    cursor: pointer;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    margin-left: -40px;
    margin-top: -18px;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after,
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      z-index: 10;
      width: 10px;
      height: 18px;
      background-color: #fff;
    }
    &::after {
      left: -1px;
    }
    &::before {
      right: -1px;
    }
  }
}
.tab-content {
  position: relative;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1;
  margin-left: 50px;
  width: max-content;
  padding: 0 5px;
  height: 50px;
  border-radius: 5px;
  background-color: #f7f7f7;
  border: 1px solid #d9d9d9;
  font-size: 14px;
  color: #808080;
  .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 119px;
    height: 40px;
    cursor: pointer;
  }
}
.tab-selected {
  color: #000;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
// 内容部分
.content-box {
  padding: 0 50px;
}
.state-selected{
  border-radius: 10px;
  border: 3px solid #316cf6;
}
.state-box{
  width: 50%;
  padding: 0 5px;
}
.state-box img{
  width: 100%;
  height: 100%;
}
.state-box-div{
  display: flex;
  width: 100%;
  padding: 15px 20px;
}
.jeepay-tip-title{
  margin-top:0 !important;
  margin-left: 49px !important;
}
</style>
