<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav navTitle="特征信息" />
    <van-collapse v-model="activeName" @change="activeJs = false" accordion>
      <van-collapse-item v-for="(item, i) in D_BZ_RYTZBQLB" :key="item.id" :title="item.py">
        <span :class="it.zt === 1 ? 'coll_item active' : 'coll_item'" v-for="(it, index) in item.bqList" :key="index"
          @click="checkBq(i, index, it.zt)">
          {{ it.tzsx }}
        </span>
        <div class="coll_item_js" @click="activeJs = !activeJs">
          查看代码解释>>>
        </div>
        <span :class="it.zt === 1 ? 'coll_item active' : 'coll_item'" v-show="activeJs" class="coll_item"
          v-for="(it, index) in item.bqList" :key="index">
          {{ it.tzbqmc }}
        </span>
      </van-collapse-item>
    </van-collapse>
    <div class="popbtn-box">
      <van-button style="width: 100%" type="primary" @click="submit">确定</van-button>
    </div>
  </div>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import { getDictList } from "../../../utils/dict";
import { selectRytzbqList } from "../../../api/common";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
// 字典信息
const { D_BZ_RYTZBQLB } = getDictList("D_BZ_RYTZBQLB");
const router = useRouter();
const activeJs = ref(false);
const activeName = ref("");
const checkList = ref([]);
function checkBq(i, index, zt) {
  if (zt == 1) {
    D_BZ_RYTZBQLB.value[i].bqList[index].zt = 0;
  } else {
    D_BZ_RYTZBQLB.value[i].bqList[index].zt = 1;
  }
}
function submit() {
  const data = [];
  D_BZ_RYTZBQLB.value.forEach((v) => {
    v.bqList.forEach((v2) => {
      if (v2.zt == 1) {
        data.push({
          tzbqdm: v2.tzbqdm,
          tzbqlb: v2.tzbqlb,
          tzbqmc: v2.tzbqmc,
        });
      }
    });
  });
  try {
    setStorage("LIST", JSON.stringify(data));
  } catch (error) {
    setStorage("LIST", data);
  }
  router.go(-1);
}
watch(
  () => D_BZ_RYTZBQLB.value.length,
  () => {
    D_BZ_RYTZBQLB.value.forEach((item) => {
      selectRytzbqList({ tzbqlb: item.dm }).then((res) => {
        item.bqList = res;
        item.bqList.forEach((v) => {
          if (checkList.value.includes(v.tzbqdm)) {
            v.zt = 1;
          } else {
            v.zt = 0;
          }
        });
      });
    });
  }
);

onMounted(() => {
  let item;
  try {
    item = JSON.parse(getStorage("LIST"));
  } catch (error) {
    item = getStorage("LIST");
  }

  checkList.value = item.map((item) => item.tzbqdm);
});
</script>

<style lang="scss" scoped>
.coll_item {
  display: inline-block;
  width: 30%;
  text-align: center;
  margin: 0 0 12px 3%;
  padding: 2px 0;
  background: #eee;
  border-radius: 4px;
}

.coll_item.active {
  background: #2698e4;
  color: #fff;
}

.coll_item_js {
  text-align: center;
  color: #2698e4;
  margin: 1px 0px 5px 0px;
}

.popbtn-box {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}
</style>
