<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="选择执勤卡点" :showRight="false" :showLeft="true" />
    <div class="heckpointBox">
      <!-- 查询 -->
      <Search
        v-model="jczValue"
        placeholder="请输入搜索关键词"
        @update:modelValue="onSearch"
      ></Search>

      <!-- 列表 -->
      <ul class="list">
        <li class="item" v-for="(item, index) in List" :key="index">
          <div class="title">{{ item.areaName }}</div>
          <div class="item-li">
            <van-radio-group v-model="cheaked" @change="chooseJcz(item.areaName)">
              <van-radio
                v-for="itemChid in item.checkList"
                :name="itemChid.checkCode"
                :key="itemChid.checkCode"
                >{{ itemChid.pointName }}</van-radio
              >
            </van-radio-group>
          </div>
        </li>
        <van-empty v-if="List.length<=0" description="暂无数据"/>
      </ul>

      <!-- 弹窗 -->
      <van-popup
        v-model:show="peoplePopupShow"
        round
        :style="{ width: '80%' }"
        close-icon="close"
        :overlay="true"
      >
      <div class="info">
        <div class="info_title">是否选择{{selectTitle}}?</div>
        <div class="info-btns">
          <span @click="handlePClose">否</span>
          <span @click="handlePass">是</span>
        </div>
      </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import TopNav from "../../components/topNav.vue";
import Search from "../../components/search.vue";
import router from "../../router/index.js";
import { getJczList } from "../../api/checkponit.js";
import { ref, reactive, onMounted, onUnmounted, onActivated } from "vue";
const jczValue = ref(""); //搜索关键字
const List = ref([]); //检查站列表
const cheaked = ref(null); //选择的检查站
const peoplePopupShow = ref(false); //弹窗
const selectTitle = ref(''); //弹窗标题

onMounted(() => {
  getList(); //获取列表
});
// 搜索
function onSearch() {
}

// 获取列表
function getList() {
  let user = JSON.parse(window.localStorage.getItem("userInfo"));
  getJczList({ username: user.idEntityCard }).then((res) => {
    List.value = handellArray(res);
  });
}

// 处理数据
function handellArray(array) {
  let arrWrap = [],resuleArr = [];
  array.forEach((item) => {
    if (!arrWrap.includes(item.areaCode)) {
      let obj = {
        areaName: item.areaName,
        checkList: [],
      };
      obj.checkList.push(item);
      resuleArr.push(obj);
      arrWrap.push(item.areaCode);
    } else {
      resuleArr[arrWrap.indexOf(item.areaCode)].checkList.push(item);
    }
  });
  return resuleArr;
}

// 选择检查站
function chooseJcz(val) {
  peoplePopupShow.value = true
  List.value.forEach(item=>{
    if(item.areaName == val){
      item.checkList.forEach(child=>{
        if(child.checkCode == cheaked.value) selectTitle.value = child.pointName
      })
    }
  })
}

// 确定弹窗
function handlePass(){
  peoplePopupShow.value = false
  router.push({path:'/',query:{kkid:cheaked.value,kkmc:selectTitle.value}});
}
// 关闭弹窗
function handlePClose() {
  peoplePopupShow.value = false
}
</script>

<style lang="scss" scoped>
.heckpointBox {
  .list {
    .title {
      height: 50px;
      font-size: 20px;
      line-height: 50px;
      background: #ddd;
      padding: 0 6vw;
      box-sizing: border-box;
      color: #999;
    }
    .item-li {
      padding: 0 6vw;
      box-sizing: border-box;
      .van-radio {
        height: 46px;
        line-height: 46px;
        border-bottom: 1px solid #e9e9e9;
      }
    }
  }
}

// 提示数据
.info{
  .info_title{
    text-align: center;
    line-height: 15vw;
    border: 1px solid #e9e9e9;
    padding:'10px';
    box-sizing: border-box;
    font-size: 17px;
  }
  .info-btns{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 11vw;
    span{
      flex: 1;
      text-align: center;
      color: #007aff;
    }
  }
}
</style>