<template>
  <Layout-Child class='page-scroll'>
    <div class="pt-6">
      <div class="text-font-red text-sm text-center">*最多支持三个选项</div>
      <div class="grid grid-cols-3 w-11/12 mx-auto mt-6">
        <div
          class="box px-5 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-0 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-font-blue"
          border="none"
        ></app-btn>
        <app-btn
          text="确认"
          class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
          border="none"
          @btnClicked="clickConfirm"
          :disabled="!pickValid"
        ></app-btn>
      </div>
    </div>
  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      picked: [] as Array<{ id: number; text: string }>,
      serviceData: {},
      maxNum: 3,
    };
  },
  async mounted() {
    this.serviceData = await this.$service.nftService.getThemeList();
  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-tag": () => import("@/components/common/Tag2.vue"),
    "app-btn": () => import("@/components/common/Btn.vue"),
  },
  methods: {
    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) {
        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.back();
    },
  },
  computed: {
    pickValid(): boolean {
      return this.picked.length > 0 && this.picked.length <= this.maxNum;
    },
  },
});
</script>
