<template>
  <div class="aside-filter">
    <CollapseCard
      class="mt20"
      v-if="dynastyOptions.length > 0"
      title="朝代"
      :data="dynastyOptions"
      :model-value="dynastySort"
      @update:model-value="emit('update:dynastySort', $event)"
      :prop="{ label: 'dictLabel', value: 'dictSort' }"
    />

    <CollapseCard
      class="mt20"
      v-for="level1 in attrTreeOptions"
      :key="level1.id"
      :title="level1.name"
      :data="level1.children"
      :model-value="attrId"
      @update:model-value="emit('update:attrId', $event)"
      :prop="{ label: 'name', value: 'id' }"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, withDefaults } from "vue";
import { Common } from "@/api/interface";
import { getDictOptions, getAttrTreeList } from "@/api/modules/common";
import CollapseCard from "./CollapseCard.vue";

const dynastyOptions = ref<Common.DictOptions[]>([]);
const attrTreeOptions = ref<Common.ResTreeOptions[]>([]);
interface Props {
  dynastySort: number[];
  attrId: number[];
}
withDefaults(defineProps<Props>(), {
  dynastySort: () => [],
  attrId: () => []
});
const emit = defineEmits(["update:dynastySort", "update:attrId"]);
// 获取字典数据
function loadDictData() {
  getAttrTreeList().then(res => {
    attrTreeOptions.value = res.data.filter(item => item.children?.length);
  });
  getDictOptions("dynasty").then(res => {
    dynastyOptions.value = res.data;
  });
}
loadDictData();
</script>
<style lang="scss" scoped>
@media (width >= 1980px) {
  .aside-filter {
    width: 220px !important; /* 盒子宽度设置为屏幕宽度的100% */
  }
}
.aside-filter {
  width: 160px;
  height: calc(100% - 40px);
  padding: 0 10px;
  overflow-y: auto;
  .el-checkbox {
    width: 100%;
  }
  .el-card :deep(.el-card__header) {
    padding: 10px 20px;
  }
}
</style>
