<template>
  <!-- 添加标签 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 px-4 pb-4">
      <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>
      <input-cell
        v-model="tag"
        :limit="10"
        label="标签列表"
        placeholder="输入标签"
        class="mt-4"
      />
      <group-cell
        title="标签列表"
        class="mt-4"
      >
        <div class="list grid grid-cols-6 bg-white rounded">
          <!-- <div class="flex items-center justify-center py-3">
            <div class="h-6 w-6 border border-color-primary rounded-full flex items-center justify-center">
              <div class="h-5 w-5 bg-color-primary rounded-full" />
            </div>
          </div> -->
          <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>
      <div class="mt-7">
        <c-tag
          v-for="tag in examples"
          :key="tag.color"
          :label="tag.label"
          :color="tag.color"
          class="mr-1.5"
        />
      </div>
      <div class="fixed bottom-0 left-0 w-full px-4 py-1.5">
        <c-button round>保存</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: 'AddTag',
  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')
  },
  data() {
    const { tagList } = Tags
    return {
      tagList,
      tagName: '',
      tag: '',
      currentColor: 'primary',
      colors: ['primary', 'orange', 'yellow', 'green', 'red', 'purple'],
      examples: [
        {
          label: '待邀约',
          color: 'primary'
        },
        {
          label: '核心',
          color: 'orange'
        },
        {
          label: '意向',
          color: 'green'
        },
        {
          label: '初试',
          color: 'yellow'
        },
        {
          label: '复试',
          color: 'red'
        },
        {
          label: '入职',
          color: 'purple'
        }
      ]
    }
  }
})
</script>

<style lang="less">

</style>
