<template>
  <JPopup ref="popup" @onClose="onClose">
    <view class="list-wrapper">
      <view class="list-header">
        <view class="list-title">
          <image src="/static/iconImg/left-black.svg" mode="scaleToFill" @tap="popup.close()" />
          单个子代理商
        </view>
        <JSearchInput bgColor="#fff" wrapPd="0" @search="getAgentList" @resetSearch="resetSearch"></JSearchInput>
      </view>
      <scroll-view class="list-main" scroll-y @scrolltolower="getList">
        <block v-for="v in list" :key="v.text">
          <JLine v-bind="v" :isSelect="v.text == agentNo.text" @tap="selected(v)"></JLine>
        </block>
        <jeepayListNull :isShow="true" :list="list.length"></jeepayListNull>
      </scroll-view>
      <view class="list-footer">
        <JButton size="max" pdTop="0" @HandleTouch="confirm">确认</JButton>
      </view>
    </view>
  </JPopup>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue"
import { $getAgentList } from "@/http/apiManager.js"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import JLine from "@/components/newComponents/JLine/JLine"
import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput"
import JButton from "@/components/newComponents/JButton/JButton"
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull"
onMounted(() => {
  getAgentList("")
})
const emits = defineEmits(["confirm"])
const searchInfo = ref({
  pageNumber: 1,
  pageSize: 10,
})
let flag = true
const list = ref([])
const agentNo = ref({})
const popup = ref()
const open = (val) => {
  if (val) agentNo.value.text = val.agentNo
  popup.value.open()
}
const close = () => {
  popup.value.close()
}
const getAgentList = (val) => {
  if (val) {
    list.value = []
    searchInfo.value.unionAgentInfo = val
  }
  $getAgentList(searchInfo.value).then(({ bizData }) => {
    const { records } = bizData
    if (records.length <= 0) flag = false
    records.forEach((v) => {
      let obj = {
        iconOn: "/static/navImg/nav-dailishang.svg",
        iconClose: "/static/navImg/user-close.svg",
        ml: "30rpx",
        pd: "32rpx 32rpx 32rpx 0",
      }
      obj.name = v.agentName
      obj.text = v.agentNo
      list.value.push(obj)
    })
  })
}
const getList = () => {
  if (!flag) return
  searchInfo.value.pageNumber++
  getAgentList()
}
const resetSearch = () => {
  list.value = []
  searchInfo.value.unionAgentInfo = ""
  searchInfo.value.pageNumber = 1
  searchInfo.value.pageSize = 10
  getAgentList()
}
const selected = (v) => {
  agentNo.value = JSON.parse(JSON.stringify(v))
}
const confirm = () => {
  emits("confirm", agentNo.value)
  close()
}
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.list-wrapper {
  padding-top: 30rpx;
  background-color: #ece8f0;
  border-radius: 32rpx 32rpx 0 0;
  .list-header {
    padding: 0 30rpx 30rpx 30rpx;
    .list-title {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      image {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }
    }
  }
  .list-main {
    height: 500rpx;
    background-color: #fff;
  }
  .list-footer {
    padding: 30rpx 0 50rpx 0;
    background-color: #fff;
  }
}
</style>
