<template>
  <Layout-Child class='page-scroll'>
    <div class="pt-6 pb-28">
      <div class="text-font-red text-sm text-center" v-if="selectType == '剧本题材'">*最多支持三个选项</div>
      <div class="text-font-red text-sm text-center" v-if="selectType == '视频题材'">*最多支持一个选项</div>

      <van-tree-select :active-id.sync="activeItem" :main-active-index.sync="activeNav" :items="serviceData">
      </van-tree-select>

      <!-- <div class="grid grid-cols-3 w-11/12 mx-auto mt-6">
        <div
          class="box px-2 py-3"
          v-for="(i, index) in serviceData"
          :key="index"
        >
          <app-tag
            :text="i.name"
            class="text-sm rounded-xl text-font-white bg-app-red"
            @onclick="tagOnclick"
            :active="isActive(i.id)"
            :id="i.id"
          ></app-tag>
        </div>
      </div> -->

      <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 rounded-2xl bg-zx-blue-light"
          border="none"
        ></app-btn>
        <app-btn
          text="确认"
          class="w-5/12 mx-auto text-font-white rounded-2xl 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'

Vue.use(TreeSelect)
export default Vue.extend({
  data() {
    return {
      picked: [] as Array<{ id: number; text: string }>,
      serviceData: [],
      maxNum: {
        '古装': 3,
        '偶像': 2,
        '艺术品题材': 3,
        "视频题材": 1,
      },
      activeNav:null,
      activeItem:[],
      screenData:[
        {
          text: '所有城市',
          children: [
            {
              text: '宁波',
              id: 1,
            },
            {
              text: '上海',
              id: 2,
            },
          ],
        },
        {
          text: '所有地区',
          children: [
            {
              text: '温州',
              id: 3,
            },
            {
              text: '杭州',
              id: 4,
            },
          ],
        },
        {
          text: '所有国家',
          children: [
            {
              text: '中国',
              id: 5,
            },
            {
              text: '日本',
              id: 6,
            },
          ],
        },
      ],
    };
  },
  async mounted() {
      await this.getThemeList()
  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    // "app-tag": () => import("@/components/common/Tag2.vue"),
    "app-btn": () => import("@/components/common/Btn.vue"),
  },
  methods: {
    async getThemeList(){
      this.$toast.loading({
                 message: '类型获取中',
                 duration: 20000,
      })
      this.serviceData = await this.$service.nftService.getCategory();
      this.$toast.clear()
      console.log(this.serviceData)
    },
    // tagOnclick(item: any) {
    //   if (this.picked.find((i) => i.id === item.id)) {
    //     this.picked = this.picked.filter((i) => i.id !== item.id);
    //     return;
    //   }
    //   if (this.picked.length >= (this.maxNum as any)[this.selectType as string]) {
    //     return;
    //   }
    //   this.picked.push({
    //     id: item.id,
    //     text: item.text,
    //   });
    // },
    // isActive(id: number) {
    //   return !!this.picked.find((i) => i.id === id);
    // },
    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>
