<template>
  <JPopup ref="popup">
    <JMainCard wrapPd="0 30rpx" pd="0">
      <block v-for="(v, i) in sexList" :key="i">
        <JLine :name="v" :isSelect="index === i" @tap="selected(i)"></JLine>
      </block>
    </JMainCard>
    <JButton pd="30rpx" pdTop="0" bgColor="rgba(255,255,255,0.8)" @HandleTouch="popup.close()" color="#000"
      >取消</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 JButton from "@/components/newComponents/JButton/JButton"
const sexList = reactive(["未知", "男", "女"])
const emits = defineEmits(["selected"])
const index = ref(undefined)
const popup = ref()
const open = (i) => {
  index.value = i
  popup.value.open()
}
const selected = (i) => {
  emits("selected", i)
  popup.value.close()
}
defineExpose({ open })
</script>

<style lang="scss" scoped></style>
