<template>
  <van-popup v-model:show="searchShow" round closeable position="bottom" :style="{ textAlign: 'left', height: '70%' }" @close="handleClose">
    <div class="flex flex-col h-full">
      <div class="text-center text-16px text-hex-323233 leading-60px">筛选</div>
      <van-tree-select class="flex-1" v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="treeData" @click-nav="clickNav" @click-item="clickItem"></van-tree-select>
      <div class="text-center px-1 my-1">
        <van-button type="primary" block color="#154a9a" @click="filterList">确定</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
const props = defineProps({
  filter: Object
})
// filter格式
// filter = [
//   {
//     name: "nj", // 对应treeItem里的name
//     key: "tjzn_id" // 传参key
//   }
// ]
const emits = defineEmits(["search"])

let filterData = $ref([]);

const treeItem = $ref([
  {
    title: "年级",
    name: "nj"
  },
  {
    title: "学科",
    name: "xk"
  },
  {
    title: "周期",
    name: "zq"
  },
  {
    title: "册别",
    name: "cb"
  },
  {
    title: "单元",
    name: "dy"
  }
])

let searchShow = $ref(true);
let treeObj = {
  njData: [],
  xkData: [],
  zqData: [
    {
      text: "全部",
      id: "",
    },
    {
      text: "春",
      id: "1",
    },
    {
      text: "夏",
      id: "2",
    },
    {
      text: "秋",
      id: "3",
    },
    {
      text: "冬",
      id: "4",
    }
  ],
  cbData: [],
  dyData: []
}

// 年级
async function getGrade(params) {
  let { code, data } = await request({ url: "/txwx/jcxxgl_zyflgl_nj/index", data: Object.assign(params, { page: "1", limit: "99" }) })
  if (code == 1) {
    let arr = [...data.page_data];
    arr.unshift({
      tjzn_id: "",
      tjzn_njmc: "全部"
    })
    treeObj.njData = arr.map(item => {
      return {
        id: item.tjzn_id,
        text: item.tjzn_njmc
      }
    })
  }
}

// 学科
async function getSubject(params) {
  let { code, data } = await request({ url: "/txwx/jcxxgl_zyflgl_xk/index", data: Object.assign(params, { page: "1", limit: "99" }) })
  if (code == 1) {
    let arr = [...data.page_data];
    arr.unshift({
      tjzx_id: "",
      tjzx_xkmc: "全部"
    })
    treeObj.xkData = arr.map(item => {
      return {
        id: item.tjzx_id,
        text: item.tjzx_xkmc
      }
    })
  }
}

// 册别
async function getCebie(params) {
  let { code, data } = await request({ url: "/common/sjzd/option", data: Object.assign(params, { cs_code: "TXWXCB" }) })
  if (code == 1) {
    let arr = [...data.option];
    arr.unshift({
      v: "",
      n: "全部"
    })
    treeObj.cbData = arr.map(item => {
      return {
        id: item.v,
        text: item.n
      }
    })
  }
}

// 单元
async function getDanyuan(params) {
  let { code, data } = await request({ url: "/common/sjzd/option", data: Object.assign(params, { cs_code: "TXWXDY" }) })
  if (code == 1) {
    let arr = [...data.option];
    arr.unshift({
      v: "",
      n: "全部"
    })
    treeObj.dyData = arr.map(item => {
      return {
        id: item.v,
        text: item.n
      }
    })
  }
}

let activeId = $ref("");
let activeIndex = $ref(0);
let treeData = $ref([]);

// watch(() => props.filter, (val) => {
//   init();
// }, { deep: true })

init();
async function init() {
  if (props.filter) {
    filterData = JSON.parse(JSON.stringify(props.filter));
    activeId = filterData[0].value || "";
    let njObj = filterData.find(item => item.name === "nj");
    if (njObj) {
      await getGrade(njObj.params || {});
    }
    let xkObj = filterData.find(item => item.name === "xk");
    if (xkObj) {
      await getSubject(xkObj.params || {});
    }
    let cbObj = filterData.find(item => item.name === "cb");
    if (cbObj) {
      await getCebie(cbObj.params || {});
    }
    let dyObj = filterData.find(item => item.name === "dy");
    if (dyObj) {
      await getDanyuan(dyObj.params || {});
    }

    treeData = [];
    filterData.map((item) => {
      item.value = item.value || "";
      treeItem.map((value) => {
        if (item.name === value.name) {
          treeData.push({
            text: value.title,
            children: treeObj[`${value.name}Data`]
          })
        }
      })
    })
  }
}

function clickNav(index) {
  activeId = filterData[index].value;
}

function clickItem(item) {
  filterData[activeIndex].value = activeId;
}

function filterList() {
  let obj = {};
  filterData.map((item) => {
    obj[item.key] = item.value;
  })
  emits("search", obj)
}

function handleClose() {
  emits("search")
}
</script>

<style lang="scss" scoped>
:deep() {
  .van-sidebar-item--select:before {
    background-color: rgb(21, 74, 154);
  }
  .van-tree-select__item--active {
    color: rgb(21, 74, 154);
  }
}
</style>