<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
    <!-- 通用弹窗 -->
    <view class="card-wrapper">
      <view class="card-title disFlexCenter">选择支付渠道</view>
      <view class="card-main">
        <block v-for="v in payConfigList" :key="v.ifCode">
          <payCard :ifName="v.ifName" :paywayFee="v.paywayFee" :bgColor="v.bgColor" :icon="v.icon">
            <template #right>
              <view class="state"> <switch :checked="v.configState == 1" style="margin: 0; transform: scale(1.2)" color="#7737fe" @change="stateChange($event, v)" /> </view>
            </template>
          </payCard>
        </block>
      </view>
    </view>
  </uni-popup>
  <jeepayConfirm ref="refConfirm" />
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { $getPayChannelList, $savePayConfig } from '@/http/apiManager.js'
import payCard from './payCard.vue'

const emits = defineEmits(['upDataList'])
// 支付应用的列表
const payConfigList = reactive([])
const refConfirm = ref(null)
const popup = ref(null)
const params = {
  appId: undefined,
  wayCode: undefined,
}
let index = undefined
const open = (appId, wayCode, i) => {
  index = i
  params.appId = appId
  params.wayCode = wayCode
  getConfigList(appId, wayCode)
}

const stateChange = (e, val) => {
  val.configState = Number(e.detail.value)
  refConfirm.value.comfirmOpen(
    () => {
      $savePayConfig({
        appId: params.appId,
        wayCode: params.wayCode,
        ifCode: val.ifCode,
        state: val.configState,
      }).then((res) => {
        uni.showToast({
          title: '保存成功',
          icon: 'success|none',
          mask: true,
        })
        getConfigList(params.appId, params.wayCode, true)
        emits('upDataList', { index, state: val.configState })
      })
    },
    `${val.configState == 1 ? '确认启用该通道？开启后将会将其他通道关闭' : '确认关闭该渠道？'}`,
    () => {
      val.configState = Number(!e.detail.value)
    }
  )
}
// 获取可配置渠道
const getConfigList = (appId, wayCode, ifOpen) => {
  $getPayChannelList(appId, wayCode).then(({ bizData }) => {
    if (bizData.records.length != 0) {
      payConfigList.length = 0
      Object.assign(payConfigList, bizData.records)
      if (ifOpen) return
      popup.value.open()
    } else {
      uni.showToast({ title: '暂无可配置渠道', icon: 'none' })
    }
  })
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.card-wrapper {
  max-height: 70vh;

  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  .card-main {
    height: calc(70vh - 110rpx - 170rpx);
    padding-bottom: 60rpx;
    overflow-y: auto;
  }
  .card-title {
    margin-bottom: 10rpx;
    height: 110rpx;
    font-size: 30rpx;
    font-weight: 400;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
  }
  .card-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 170rpx;
    border-top: 1rpx solid #ededed;
    button {
      flex: 1;
      height: 110rpx;
      border-radius: 20rpx;
      font-size: 33rpx;
      font-weight: 500;
      &::after {
        border: none;
      }
    }
    .cancel {
      margin-right: 30rpx;
      color: rgba(0, 0, 0, 0.5);
      background-color: #f7f7f7;
    }
    .confirm {
      color: #fff;
      background: linear-gradient(270deg, rgba(35, 143, 252, 1) 0%, rgba(26, 102, 255, 1) 100%);
    }
  }
}
.disFlexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
