<template>
  <JPopup ref="popup" @onClose="onClose">
    <JMainCard pd="0" wrapPd='30rpx'>
      <block v-for="(v, i) in list" :key="i">
        <JLine :name="v.name" :isSelect="i == index" :isBorder="true" @tap="selected({ name: v.name, i })"></JLine>
      </block>
    </JMainCard>
    <JButton pd='0 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"

const emits = defineEmits(["selected"])
const list = reactive([
  {
    name: "终端",
  },
  {
    name: "扫码POS",
  },
])

const index = ref(undefined)
const popup = ref()
const selected = (val) => {
  index.value = val.i
  emits("selected", val)
  close()
}
const open = (val) => {
  if (val) index.value = val
  popup.value.open()
}

const close = () => {
  popup.value.close()
}
defineExpose({ open, close })
</script>
