<template>
  <JPopup ref="popup" @onClose="onClose">
    <JMainCard pd="0" wrapPd=" 0 30rpx ">
      <block v-for="(v, i) in list" :key="i">
        <JLine :name="v.name" :isSelect="v.text == index" :isBorder="true" @tap="agentChange(v)"></JLine>
      </block>
      <view class="search-agent" @tap="emits('oneAgent')">
        <JInput name="选择代理商" :image="true" :isBorder="true" v-if="!index || index == 'onlyOne'">
          <image src="/static/iconImg/icon-right-jiantou.svg" mode="scaleToFill" />
        </JInput>
        <AgentCard v-else v-bind="childrenAgent" pd="30rpx"></AgentCard>
      </view>
    </JMainCard>

    <JButton pd="30rpx 30rpx 50rpx 30rpx" bgColor="#f2f2f2" color="#000" pdTop="0" @HandleTouch="popup.close()"
      >取消</JButton
    >
  </JPopup>
</template>
<script setup>
import { reactive, ref } from "vue"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import JLine from "@/components/newComponents/JLine/JLine"
import JInput from "@/components/newComponents/JInput/JInput"
import JButton from "@/components/newComponents/JButton/JButton"
import AgentCard from "./AgentCard.vue"
const emits = defineEmits(["selected", "oneAgent"])
const list = reactive([
  {
    name: "我与全部子代理商",
    text: "",
  },
  {
    name: "仅我自己",
    text: "onlyOne",
  },
  {
    name: "单个子代理商",
    text: "one",
  },
])
const index = ref("")
const popup = ref()
const childrenAgent = ref({
  userImg: "/static/iconImg/user-theme.svg",
  nameColor: "#000",
  textColor: "#8C8C8C",
  nameWeight: "700",
})
const open = (val) => {
  if (val.agentNo && val.agentNo != "onlyOne") {
    childrenAgent.value.name = val.name
    childrenAgent.value.agentNo = val.agentNo
    index.value = "one"
  } else {
    index.value = val.agentNo
  }
  uni.hideTabBar()
  popup.value.open()
}
const onClose = () => {
  uni.showTabBar()
}
const close = () => {
  onClose()
  popup.value.close()
}
const agentChange = (val) => {
  if (val.text != "one") {
    index.value = val.text
    emits("selected", val)
    close()
  } else {
    emits("oneAgent")
  }
}
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.search-agent {
  margin: 0 30rpx 30rpx 30rpx;
  border-radius: 10rpx;
  background-color: #f2f2f2;
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
