<template>
  <!-- 筛选 -->
  <main-page>
    <div
      slot="left"
      class="text-sm font-medium"
      @click="$router.go(-1)"
    >
      取消
    </div>
    <app-icon
      slot="right"
      icon-name="menu"
      class-name="w-4 h-4"
      @click="$router.push('/client/tag')"
    />
    <div class="pt-12 px-4 pb-16">
      <div
        v-for="tag in tagList"
        :key="tag.id"
        class="mt-4"
      >
        <div class="title py-1 flex items-center">
          <div class="dot w-2 h-2 rounded-full mr-1.5" :class="`bg-tag-${tag.color}`" />
          <div class="title" :class="`text-tag-${tag.color}`">{{ tag.label }}</div>
        </div>
        <div class="wrapper mt-1.5 grid grid-cols-3 gap-x-6 gap-y-2.5">
          <div
            v-for="(item, index) in tag.tags"
            :key="index"
            class="rounded px-3 h-10 text-sm flex items-center justify-center leading-4"
            :class="selected[tag.id].indexOf(item) > -1 ? `bg-tag-${tag.color}-lighter text-tag-${tag.color}` : 'bg-white'"
            @click="selectTag(tag.id, item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="px-4 py-1.5 bg-common-bg fixed bottom-0 left-0 w-full grid grid-cols-2 gap-x-4">
      <c-button @click="reset">重置</c-button>
      <c-button @click="$router.push('/client/client-management')">确定</c-button>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import * as Tags from '@/DTO/tags'

interface Select {
  [key: string]: Array<string>
}

export default Vue.extend({
  name: 'FilterClient',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  data() {
    const { tagList } = Tags
    const selected: Select = {}
    return {
      tagList,
      selected
    }
  },
  created() {
    this.tagList.forEach(tag => {
      this.$set(this.selected, tag.id, [])
    })
  },
  methods: {
    selectTag(id: number, tag: string) {
      const index = this.selected[id].findIndex(item => item === tag)
      if (index < 0) {
        this.selected[id].push(tag)
      } else {
        this.selected[id].splice(index, 1)
      }
    },
    reset() {
      for (const key in this.selected) {
        this.selected[key] = []
      }
    }
  }
})
</script>

<style lang="less">

</style>
