<template>
  <a-card
    title="标签列表"
    class="tags-wrap"
  >
    <a-button
      slot="extra"
      size="small"
      type="primary"
      icon="plus"
      @click="addVisible=true"
    >
      新建标签
    </a-button>

    <a-spin :spinning="ticketTagLoading">
      <template v-for="tag in tagList">
        <!-- 字符过长时，溢出隐藏 -->
        <a-tooltip
          v-if="tag.name.length > 20"
          :key="tag.id"
          :title="tag.name"
        >
          <a-tag
            :key="tag"
            @dblclick.native="handleEdit(tag)"
          >
            {{ `${tag.name.slice(0, 20)}...` }}
            <a-popconfirm
              title="确定要删除这个标签吗？"
              :key="tag.id"
              @confirm="handleClose(tag)"
            >
              <a-icon
                slot="icon"
                type="question-circle-o"
                style="color: red"
              />
              <a-icon type="close"></a-icon>
            </a-popconfirm>
          </a-tag>
        </a-tooltip>

        <a-tag
          v-else
          :key="tag.id"
          @dblclick.native="handleEdit(tag)"
        >
          {{ tag.name }}
          <a-popconfirm
            title="确定要删除这个标签吗？"
            :key="tag.id"
            @confirm="handleClose(tag)"
          >
            <a-icon
              slot="icon"
              type="question-circle-o"
              style="color: red"
            />
            <a-icon type="close"></a-icon>
          </a-popconfirm>
        </a-tag>
      </template>
      <div class="note">
        操作提示：双击标签进行编辑
      </div>
    </a-spin>

    <!-- 新增景点 -->
    <AddTag
      v-model="addVisible"
      :tags="tagList"
      @update="$store.dispatch('getTicketTag')"
    ></AddTag>

    <!-- 编辑景点 -->
    <EditTag
      v-model="editVisible"
      :tags="tagList"
      :form-data="currentTag"
      @update="$store.dispatch('getTicketTag')"
    ></EditTag>
  </a-card>
</template>
<script>
import { deleteTicketTag } from '@/api/ticketSetting/ticket'
import AddTag from './ticketTag/AddTag'
import EditTag from './ticketTag/EditTag'

export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    tagList () {
      return this.$store.state.app.tagList
    },
    ticketTagLoading () {
      return this.$store.state.app.ticketTagLoading
    }
  },
  components: {
    AddTag,
    EditTag
  },
  data () {
    return {
      currentTag: null,
      inputVisible: false,
      addVisible: false,
      editVisible: false,
      inputValue: ''
    }
  },
  methods: {
    handleClose (removedTag) {
      deleteTicketTag(removedTag.id).then(res => {
        this.$message.success('删除成功')

        this.$store.dispatch('getTicketTag')
      })
    },
    handleEdit (data) {
      this.currentTag = data
      this.editVisible = true
    }
  }
}
</script>

<style scoped>

</style>
