<template>
  <!-- 标签管理 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <app-icon
      slot="right"
      icon-name="plus-black"
      @click="addTag"
    />
    <div class="pt-12 px-4 pb-4">
      <template v-for="tag in tagList">
        <tag-card
          :key="tag.id"
          :tag="tag"
          class="mb-4"
          @click="clickCard(tag)"
        />
      </template>
    </div>
  </main-page>
</template>

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

export default Vue.extend({
  name: 'TagManagement',
  components: {
    // 'search-bar':()=>import('@/components/common/search-bar.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'tag-card': () => import('@/views/client/components/tag-card.vue')
  },
  data() {
    const { tagList } = Tags
    return {
      tagList
    }
  },
  methods: {
    addTag() {
      this.$router.push('/client/add-tag')
    },
    clickCard(tag: Tags.Tag) {
      console.log(tag)
      this.$router.push(`/client/edit-tag/${tag.id}`)
    }
  }
})
</script>

<style lang="less">

</style>
