<script setup>
import {computed, onMounted, ref} from "vue";
import Search from "@/components/search.vue";
import {getSelectList} from "@/api/collectPage";
import emitter from "@/utils/eventBus";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  position: {
    type: String,
    default: 'bottom'
  },
})

const emits = defineEmits(["update:modelValue", "change"]);
const visible = computed({
  get: function () {
    return props.modelValue;
  },
  set: function (val) {
    emits("update:modelValue", val)
  }
})

const visibleEmpty = ref(false)
const searchValue = ref("")
const radioChecked = ref("")
const list = ref([])

const onSearch = (value) => {
  list.value = []
  getSelectListData(value)
}

const onRadionChange = (value) => {
  emitter.emit("deletePointArea", "zdxl_fzyc")
  emits('change', value)

  const { x1, y1, x2, y2, id, zxX, zxY, mc } = value
  const centerPoint = [zxX, zxY]
  const position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
  const text = mc
  const obj = [{ position: position, text, id, userData: value}]

  emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'zdxl_fzyc', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
  emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
}

// 获取数据
const getSelectListData = async (mc) => {
  try {
    const res = await getSelectList({ mc });
    if (res?.length > 0) {
      list.value = res || []
      visibleEmpty.value = false
    } else {
      visibleEmpty.value = true
    }

  } catch (error) {
    visibleEmpty.value = true
  }
}

onMounted(() => {
  getSelectListData()
})
</script>

<template>
  <van-popup v-model:show="visible" :position="position">
    <search placeholder="请输入方格名称" v-model="searchValue" @update:modelValue="onSearch" />

    <div class="selectWrapper">
      <van-radio-group v-model="radioChecked">
        <van-cell-group>
          <van-cell v-for="item in list" clickable :key="item" :title="item?.mc" :border="false">
            <template #right-icon>
              <van-radio :name="item?.id" @click="onRadionChange(item)" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-empty description="没有数据" image="default" v-if="list.length <= 0 && visibleEmpty" />
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
.selectWrapper {
  height: 80vw;
  overflow: auto;
}
</style>
