<template>
  <view class="page-wrapper">
    <view class="page-header">
      <JHeaderTitle title="应用支付配置" bgColor="#f7f7f7" />
      <JSearchInput place="搜索应用支付方式代码、名称" @search="searchChannel" @resetSearch="resetSearch" />
    </view>
    <block v-for="(v, i) in configList" key="v.wayType">
      <view class="pay-wrapper" @tap="refPay.open(params.appId, v.wayCode, i)">
        <view class="title">
          <view class="name">{{ v.wayName }}</view>
          <view class="state" :class="{ 'no-config': v.isConfig == 0 }">{{ v.isConfig == 1 ? '已配置' : '未配置' }}</view>
        </view>
        <view class="sub-title">{{ v.wayCode }}</view>
      </view>
    </block>
    <jeepayListNull :isShow="!hasNext" :list="[]" />
  </view>
  <JPopupCard ref="refPay" @upDataList="upDataList" />
</template>

<script setup>
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import { $getPayConfig, $getPayChannelList } from '@/http/apiManager.js'
import JSearchInput from '@/components/newComponents/JSearchInput/JSearchInput.vue' //自定义搜索框
import JPopupCard from './components/JPopupCard.vue'
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle'
onLoad((options) => {
  params.appId = options.appId
  getPayList()
})
const refPay = ref(null)
const configList = reactive([])
const params = {
  pageSize: 10,
  pageNumber: 1,
}
// 是否有下一页
let hasNext = undefined
const getPayList = () => {
  $getPayConfig(params).then(({ bizData }) => {
    hasNext = bizData.hasNext
    configList.push(...bizData.records)
    uni.stopPullDownRefresh()
  })
}
// 更新列表
const upDataList = (val) => {
  configList[val.index].isConfig = val.state
}
// 搜索
const searchChannel = (val) => {
  configList.length = 0
  params.pageNumber = 1
  params.unionSearchId = val
  getPayList()
}
// 重置搜索
const resetSearch = () => {
  configList.length = 0
  params.pageNumber = 1
  params.unionSearchId = ''
  getPayList()
}
onPullDownRefresh(() => {
  configList.length = 0
  params.pageNumber = 1
  getPayList()
})
onReachBottom(() => {
  if (!hasNext) return
  params.pageNumber++
  getPayList()
})
</script>

<style lang="scss" scoped>
.page-wrapper {
  min-height: calc(100vh - 80rpx);
  background-color: #f7f7f7;
  .page-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: #f7f7f7;
  }
  .pay-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40rpx;
    height: 170rpx;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      .name {
        font-size: 30rpx;
      }
      .state {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #808080;
        &::after {
          content: '';
          display: block;
          margin-left: 20rpx;
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #168fff;
        }
      }
      .no-config::after {
        background-color: #d9d9d9;
      }
    }
    .sub-title {
      margin-top: 16rpx;
      font-size: 26rpx;
      color: #999;
    }
  }
}
</style>
