<template>
  <!-- 编辑标签 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 px-4 pb-16">
      <input-cell
        v-model="tagName"
        label="标签组名称"
        :limit="20"
        placeholder="请输入标签组名称"
      >
        <app-icon
          slot="prefix"
          icon-name="plus-round"
          class-name="h-6.5 w-6.5 mr-4"
        />
      </input-cell>
      <group-cell
        title="标签列表"
        class="mt-4"
      >
        <c-cell
          v-for="(tag, index) in currentTag.tags"
          :key="index"
        >
          <app-icon
            slot="prefix"
            icon-name="minus-red"
            @click="deleteTag(tag)"
          />
          <div slot="content" class="w-full">{{ tag }}</div>
        </c-cell>
        <input-cell v-model="tag">
          <app-icon
            slot="prefix"
            icon-name="plus-round"
            class-name="h-6.5 w-6.5 mr-4"
          />
        </input-cell>
      </group-cell>
      <group-cell
        title="标签列表"
        class="mt-4"
      >
        <div class="list grid grid-cols-6 bg-white rounded">
          <div
            v-for="color in colors"
            :key="color"
            class="flex items-center justify-center py-3"
          >
            <div
              class="w-6 h-6 relative flex items-center justify-center"
              @click="currentColor = color"
            >
              <div
                v-if="currentColor === color"
                class="absolute w-full h-full rounded-full top-0 left-0 border"
                :class="`border-tag-${color}`"
              />
              <div class="w-5 h-5 rounded-full" :class="`bg-tag-${color}`" />
            </div>
          </div>
        </div>
      </group-cell>
      <c-button
        round
        type="secondary"
        class="mt-4"
      >
        删除标签
      </c-button>
      <div class="fixed bg-common-bg bottom-0 left-0 w-full px-4 py-1.5">
        <c-button round @click="saveTag">保存</c-button>
      </div>
    </div>
  </main-page>
</template>

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

export default Vue.extend({
  name: 'EditTag',
  components:{ 
    'main-page': () => import('@/layout/main-page.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue'),
    // 'c-tag': () => import('@/components/common/c-tag.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue')
  },
  data() {
    const { tagList } = Tags
    const currentTag: Tags.Tag = {
      id: 0,
      label: 'tag',
      color: 'primary',
      tags: ['primary']
    }
    return {
      tagList,
      currentTag,
      tagName: '',
      tag: '',
      currentColor: 'primary',
      colors: ['primary', 'orange', 'yellow', 'green', 'red', 'purple'],
    }
  },
  created() {
    const id = Number(this.$route.params.id)
    this.currentTag = this.tagList.find(tag => tag.id === id) as Tags.Tag
    // this.tags = JSON.parse(JSON.stringify(this.currentTag.tags))
    this.tagName = this.currentTag.label
    this.currentColor = this.currentTag.color
  },
  methods: {
    deleteTag(tag: string) {
      const index = this.currentTag.tags.findIndex(item => item === tag)
      this.currentTag.tags.splice(index, 1)
    },
    saveTag() {
      if (this.tag.replace(/(^\s*)|(\s*$)/g, '') !== '') {
        this.currentTag.tags.push(this.tag)
      }
      this.currentTag.color = this.currentColor
      // this.currentTag.tags = this.tags
      this.$router.push('/client/tag')
    }
  }
})
</script>

<style lang="less">

</style>
