<template>
  <div class="tag-container">
    <div>
      <div class="selectedRadio">{{ title }}:</div>
      <template v-if="title === '数量'">
        <el-input-number v-for="(num, index) in tagList" :key="index" :min="0" :max="10000" :value="num" size="mini" @change="val => handleChange(val, index)" />
      </template>
      <template v-else>
        <el-tag
          v-for="(item, i) in tagList"
          :key="i"
          closable
          :disable-transitions="false"
          class="tag-item"
          @close="handleDeleteTag(item)"
        >
          {{ item }}
        </el-tag>
        <el-input
          v-if="addTagInput.visable"
          ref="addTagInput"
          v-model="addTagInput.val"
          size="small"
          style="width:100px"
          class="input-new-tag"
          @keyup.enter.native="handleAddTag"
          @blur="handleAddTag"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showAddTagInput">+ 添加</el-button>
      </template>
    </div>
  </div>
</template>
<script>
import { addSize, delSize } from '@/api/studio/good'
export default {
  props: {
    tagList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '标签'
    },
    edit: {
      type: String,
      default: ''
    },
    typeid: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      addTagInput: {
        visable: false,
        val: ''
      }
    }
  },
  watch: {
    tagList() {
      if (this.tagList.length < 1) {
        this.$emit('selectTag', false, this.title)
      }
    }
  },
  methods: {
    // 添加类别
    handleAddTag() {
      const val = this.addTagInput.val
      if (val) {
        if (this.edit) {
          this.$request(addSize({ attr_id: this.typeid, size: val }), ({ id }) => {
            this.tagList.push(val)
            this.$emit('addSize', id)
          })
        } else {
          this.tagList.push(val)
          this.$emit('addSize')
        }
      }
      this.addTagInput.visable = false
      this.addTagInput.val = ''
    },
    // 添加类别显示
    showAddTagInput() {
      this.addTagInput.visable = true
      this.$nextTick(_ => {
        this.$refs.addTagInput.$refs.input.focus()
      })
    },
    // 删除类别
    handleDeleteTag(tag) {
      if (this.edit) {
        this.$confirm('此操作将永久删除该尺寸, 是否继续?', '提示').then(() => {
          this.$request(delSize({ attr_id: this.typeid, size: tag }), data => {
            this.$emit('deleteSku', this.tagList.indexOf(tag))
            this.tagList.splice(this.tagList.indexOf(tag), 1)
          })
        }).catch(() => this.$message.info('已取消删除'))
      } else {
        this.$emit('deleteSku', this.tagList.indexOf(tag))
        this.tagList.splice(this.tagList.indexOf(tag), 1)
      }
    },
    // 删除规格
    deleteTag() {
      this.$emit('deleteTag', this.title)
    },
    handleChange(val, index) {
      this.$emit('numChange', val, index)
    }
  }
}
</script>
<style lang="scss" scoped>
  .selectedRadio{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
  }
  >>> .el-input-number {
    margin-right: 10px;
  }
  >>> .el-tag {
    width: 130px;
    text-align: center;
  }
</style>
