<template>
  <JPopup ref="popup">
    <JMainCard pd="0" wrapPd="0 30rpx">
      <view class="title">请选择通道</view>
      <view class="list-wrapper">
        <block v-for="(v, i) in channelList" :key="i">
          <view class="list" @tap="selected(v)">
            <view class="list-left">
              <view class="imag-wrapper" :style="{ backgroundColor: v.bgColor }">
                <image :src="v.icon" mode="" />
              </view>
              <view>
                <view class="l-f-top"> {{ v.ifName }} </view>
                <view class="l-f-bottom">{{ v.remark }}</view>
              </view>
            </view>
            <view class="list-selected" v-if="codeInfo.ifCode === v.ifCode">
              <image src="/static/equipmentImg/check.svg" mode="scaleToFill" />
            </view>
          </view>
        </block>
      </view>
    </JMainCard>
    <JButton pd="30rpx 30rpx 50rpx 30rpx" bgColor="#f2f2f2" color="#000" pdTop="0" @HandleTouch="popup.close()">取消
    </JButton>
  </JPopup>
</template>

<script setup>
import { ref } from "vue"
import { $rateConfig, $getAcountInfo } from "@/http/apiManager.js"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import JButton from "@/components/newComponents/JButton/JButton"
const emits = defineEmits(["selected"])
const popup = ref(null)
const channelList = ref([])
const codeInfo = ref("")
const open = () => {
  getList()
  popup.value.open()
}
const getList = () => {
  $getAcountInfo().then(({ bizData }) => {
    $rateConfig(bizData.agentNo).then(({ bizData }) => {
      channelList.value = bizData.filter(v => {
        return v.isOpenApplyment == 1
      })
    })
  })
}
const selected = (val) => {
  emits("selected", val)
  popup.value.close()
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.title {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #999;
}

.list-wrapper {
  height: calc(100vh - 500rpx);
  padding-bottom: 40rpx;
  overflow-y: scroll;

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;

    .list-left {
      display: flex;
      align-items: flex-start;

      .imag-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 52rpx;
        height: 52rpx;
        border-radius: 50%;
        margin-right: 20rpx;

        image {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
        }
      }

      .l-f-top {
        font-size: 30rpx;
      }

      .l-f-bottom {
        margin-top: 15rpx;
        font-size: 22rpx;
        color: #666f80;
      }
    }

    .list-selected {
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}</style>
