<template>
  <Layout-Child class='page-scroll'>
    <div class="pt-6">
      <!-- <div class="text-font-red text-sm text-center" v-if="selectType == '艺术品题材'">*最多支持三个选项</div> -->

      <van-tree-select selected-icon="null" :max="maxNum[selectType]" :active-id.sync="activeItem" :main-active-index.sync="activeNav" :items="serviceData" @click-nav="navChange" @click-item="itemPick">
      </van-tree-select>

      <div class="fixed bottom-3 w-full left-0 flex flex-row z-30">
        <app-btn
          text="取消"
          @btnClicked="clickCancel"
          class="w-5/12 mx-auto text-font-white bg-zx-blue-light"
          border="none"
        ></app-btn>
        <app-btn
          text="确认"
          class="w-5/12 mx-auto text-font-white bg-zx-blue-light"
          border="none"
          @btnClicked="clickConfirm"
          :disabled="!pickValid"
        ></app-btn>
      </div>

    </div>
  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue";
import {TreeSelect} from 'vant'
import {cloneDeep} from 'lodash'


Vue.use(TreeSelect)
export default Vue.extend({
  data() {
    return {
      picked: [] as Array<{ id: number; text: string,pid: number }>,
      serviceData: [],
      maxNum: {
        '艺术品题材': 1,
      },
      activeNav:null,
      activeItem:[],
    };
  },
  async mounted() {
      await this.getThemeList()
      await this.navChange(0)
  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-btn": () => import("@/components/common/Btn.vue"),
  },
  methods: {
    async getThemeList(pid?:any){
      this.$toast.loading({
                 message: '类型获取中',
                 duration: 20000,
      })
      this.serviceData = await this.$service.nftService.getCategory(pid);
      this.$toast.clear()
      console.log(this.serviceData)
    },
    async navChange(index:number){
      const nextId = (this.serviceData[index] as any).id
      const itemList = await this.$service.nftService.getCategory(nextId)
      const newList = cloneDeep(this.serviceData) as any
      (newList[index] as any).children = itemList
      this.serviceData = newList
    },
    itemPick(data:any){
      for(let item of this.picked){
        if(item.id == data.id){
          this.picked = this.picked.filter((item)=>{
            return item.id != data.id
          })
          return 
        }
      }
      if(this.picked.length >= (this.maxNum as any)[this.selectType]){ 
        return 
      }
      this.picked.push({pid:data.pid,id:data.id,text:data.text})
    },
    clickCancel() {
      this.$router.back();
    },
    clickConfirm() {
      this.$store.commit("create/SET_STATE", {
        pickedList: this.picked,
      });
      this.$router.push({name:'NftForm',query:{id:this.$route.query.categoryId}})
    },
  },
  computed: {
    pickValid(): boolean {
      return this.picked.length > 0 && this.picked.length <= (this.maxNum as any)[this.selectType as string];
    },
    selectType():string{
      return this.$route.query.text as string
    }
  },
});
</script>
<style scoped lang="less">
.van-tree-select {
  height: calc(66vh)!important;
  // padding-bottom: 120px;
}
.van-tree-select__nav-item {
  color: #2b446c;
  background: white;
}
.van-tree-select__nav-item.van-sidebar-item--select {
  background: #F5F5F5;
  &::before {
    display: none;
  }
}
.van-tree-select__item {
  color: #2b446c
}
.van-tree-select__item.van-tree-select__item--active {
  color: #2b446c;
  background: #F5F5F5;

}
</style>
