<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="scenicTagLoading">
      <template v-for="tag in scenicTagList">
        <!-- 字符过长时，溢出隐藏 -->
        <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="scenicTagList"
      @update="getScenicTagList"
    ></AddTag>

    <!-- 编辑景点 -->
    <EditTag
      v-model="editVisible"
      :tags="scenicTagList"
      :form-data="currentTag"
      @update="getScenicTagList"
    ></EditTag>
  </a-card>
</template>

<script>
import { deleteScenicTag, getScenicTag } from '@/api/ticketSetting/scenic'
import AddTag from './scenicTag/AddTag'
import EditTag from './scenicTag/EditTag'

export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  components: {
    AddTag,
    EditTag
  },
  created () {
    this.getScenicTagList()
  },
  data () {
    return {
      scenicTagList: [],
      currentTag: null,
      scenicTagLoading: false,
      inputVisible: false,
      addVisible: false,
      editVisible: false,
      inputValue: ''
    }
  },
  methods: {
    getScenicTagList () {
      this.scenicTagLoading = true
      getScenicTag().then(res => {
        // console.log('景点标签', res)
        this.scenicTagLoading = false
        this.scenicTagList = res.extraInfo.list
        this.$emit('input', this.scenicTagList)
      })
    },
    handleClose (removedTag) {
      deleteScenicTag(removedTag.id).then(res => {
        this.$message.success('删除成功')
        this.getScenicTagList()
      })
    },
    handleEdit (data) {
      this.currentTag = data
      this.editVisible = true
    }
  }
}
</script>

<style scoped>

</style>
