<template>
<Layout-Child>
  <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"  :active='isTagActived(i.id)' @onclick='tagOnclick' :id='i.id'></app-tag>
      </div>

        </div>
            <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">   
            <app-btn text="取消" 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' :disabled='pickValid'></app-btn>
        </div>
  </div>
</Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';
import {remove as _remove} from 'lodash'
export default Vue.extend({
  data(){
    return{
      picked:[] as Array<{id:number,text:string}>,
      serviceData:{},
      pickValid:true
    }
  },
  async mounted(){
    this.serviceData = await this.$service.nftService.getThemeList()
  },
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
       'app-tag':()=>import('@/components/common/Tag.vue'),
      'app-btn':()=>import('@/components/common/Btn.vue')
  },
  methods: {
    tagOnclick(item:any){
      if(this.picked.includes(item.id)){
        _remove(this.picked,(i)=>{
          return i === item.id;
        })
        console.log(this.picked,'remove');
        return
      }
      this.picked.push(item.id)
    }
  },
  computed:{

    isTagDisabled(){
      const that  = this;
      return function(id:any){
        const exist = that.picked.includes(id)
        if(that.picked.length>2 || exist){
          return true
        }
        return false
      }
    },
    isTagActived(){
      const that = this
      return function(id:any){
        if(that.picked.includes(id)){
          return false
        } 
        return true
      }
    }
  }
});
</script>
