<template>
  <van-popup v-model:show="props.show" style="width: 90%">
    <div class="popupTitle">{{ popupTitle }}</div>
    <van-tabs v-model:active="active" color="#3e6ee8" @change="onActive">
      <van-tab title="民警" name="01"> </van-tab>
      <van-tab title="辅警" name="02"> </van-tab>
    </van-tabs>
    <van-search
      v-model="searchVal"
      :placeholder="placeholder"
      @search="onUpdate"
      @clear="onClear"
    />
    <div class="check-data-box">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text=""
        @load="onLoad"
        offset="1"
        :immediate-check="false"
      >
        <!-- 单选 -->
        <van-radio-group v-model="radioChecked" v-if="props.isRadio">
          <van-cell-group>
            <van-cell
              v-for="item in list.mulChooseList"
              clickable
              :key="item"
              :title="`${item.xm} (${item.lxdh})`"
              :border="false"
            >
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
              <template #label>
                <div>
                  <span :class="active == '02'?'bqBox':'bqBox1'">{{active == '02'?'辅警':'民警'}}</span> {{ item.ssbm }}
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <!-- 多选 -->
        <van-checkbox-group
          v-else
          v-model="checkedLists"
          @change="hoooo"
        >
          <van-cell-group  v-if="list.mulChooseList.length > 0">
            <van-cell
              v-for="item in list.mulChooseList"
              clickable
              :key="item"
              :title="item.xm +(item.lxdh)"
            >
              <template #right-icon>
                <van-checkbox shape="square" :name="item.id" />
              </template>
              <template #label>
                <span :class="active == '02'?'bqBox':'bqBox1'">{{active == '02'?'辅警':'民警'}}</span> 
                <div>{{ item.ssbm }}</div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
        <van-empty
          description="没有数据"
          image="default"
          v-if="list.mulChooseList.length <= 0 && loading == false"
        />
      </van-list>
    </div>
    <div class="popbtn-box">
      <van-button style="flex: 1" type="default" @click="onCancel"
        >取消
      </van-button>
      <van-button style="flex: 1" type="primary" @click="onConfirm"
        >确定</van-button
      >
    </div>
  </van-popup>
</template>

<script setup>
import { getBBData ,getXfllRyData} from "@/api/xfbbAndZbbb.js";
import { defineProps, ref, defineEmits, watch, reactive, onMounted } from "vue";
import { dateFormat, hintToast } from "@/utils/tools";
const props = defineProps({
  selectType: String, //查询的类型  详情见watch 监听
  show: Boolean, //是否显示
  checkedList: Array, //默认选中 多选
  isRadio: String, //单选
});
const emits = defineEmits([
  "update:cancel",
  "update:confirm",
  "update:tabs",
  "update:tag",
]);
const popupTitle = ref("人员"); //标题
const active = ref('01'); //默认的TBS 选择
const loading = ref(false); //列表加载
const finished = ref(false);
const checkedLists = ref([]); //选中的数据
const page = ref(1);
const total = ref(0);
const radioChecked = ref("");
const placeholder = ref(""); //占位字符
const list = reactive({
  mulChooseList: [],
}); //列表数据
const sowMuList = ref([]) //展示民警辅警的数据

watch(
  () => props.checkedList,
  (newValue) => {
    if (props.isRadio && newValue.length>0) {
      radioChecked.value = newValue[0].id;
    } else {
      checkedLists.value = newValue.map((item) => {
        return item.id;
      });
    }
  },
  { immediate: true, deep: true }
);
onMounted(()=>{
  getList('01') //获取民警人员列表
})
//tabs切换
function onActive(val) {
  page.value = 1
  list.mulChooseList = []
  getList(val)
}
const searchVal = ref(""); //选择器关键字
//搜索关键词
function onUpdate() {
  page.value = 1
  getList(active.value)
}
//清空关键字
function onClear() {
  page.value = 1
  getList(active.value)
}
//触底加载
function onLoad() {
  if (page.value >= total.value) {
    finished.value = true;
    return;
  }
  page.value++;
  getList(active.value)
}

function hoooo(){
}

// 获取民警、辅警数据列表
function getList(jllx){
  loading.value = true
  let params = {
    pageCurrent: page.value,
    pageSize: 10,
    keyword: searchVal.value,
    jllx
  }
  getXfllRyData(params).then(res=>{
    if(page.value == 1){
      list.mulChooseList = res.records
    }else{
      list.mulChooseList = list.mulChooseList.concat(res.records)
    }
    sowMuList.value = sowMuList.value.concat(res.records)
    let newObj = {}
    sowMuList.value = sowMuList.value.reduce((preval,curval)=>{
      newObj[curval.id]?'':newObj[curval.id] = preval.push(curval)
      return preval
    },[])
    total.value = res.total
    loading.value = false
  })

}

//关闭弹窗
function onCancel() {
  emits("update:cancel", false);
}

//确认选择
function onConfirm() {
  if (radioChecked.value == "" && checkedLists.value.length <= 0) {
    hintToast("请选择人员");
  } else {
    let arr = props.isRadio ? [radioChecked.value] : checkedLists.value;
    let brr = []
    sowMuList.value.forEach(v=>{
      v.jylx = active.value
      arr.forEach(t=>{if(v.id == t) brr.push(v)})
    })
    emits("update:confirm", brr);
    emits("update:cancel", false);
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
.popupTitle {
  text-align: center;
  background-color: rgb(11, 137, 247);
  height: 6vh;
  line-height: 6vh;
  color: #fff;
}
.popbtn-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 2vw;
}

.check-data-box {
  height: 100vw;
  overflow: auto;
}
::v-deep .van-stepper__input {
  width: 100px;
}
.zn_tag_select {
  padding: 2vw 3.5vw;
}
.bqBox{
  padding: 0.5vw 2vw;
  border-radius: 1vw;
  background: rgb(42, 209, 167);
  color: #fff;
  font-size: 12px;
}
.bqBox1{
  padding: 0.5vw 2vw;
  border-radius: 1vw;
  background: rgb(21, 178, 240);
  color: #fff;
  font-size: 12px;
}
</style>