<template>
  <el-form-item prop="tag" label="标签" v-if="isForm">
    <el-row>
      <el-col>
        <el-tag class="resource-tags"
          v-for="tag in inputTags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="close(tag)"
        >
          <span :title="tag">{{tag | charWidth(10)}}</span>
        </el-tag>
          <select-tags v-show="showTags&&addTags"  :tags.sync="inputTags" :content-type="tagType" :show.sync="addTags"></select-tags>
        <el-button v-show="showTags&&!addTags" class="button-new-tag" size="small" @click="openTags"><i class="fa fa-plus"></i></el-button>
      </el-col>
    </el-row>
  </el-form-item>
  <div v-else>
    标签:
    <el-tag
        v-for="tag in inputTags"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="close(tag)"
      >
        <span :title="tag">{{tag | charWidth(10)}}</span>
      </el-tag>
        <select-tags v-show="showTags&&addTags"  :tags.sync="inputTags" :content-type="tagType" :show.sync="addTags"></select-tags>
      <el-button v-show="showTags&&!addTags" class="button-new-tag" size="small" @click="openTags"><i class="fa fa-plus"></i></el-button>
  </div>
</template>
<script>
import selectTags from '@src/components/contentComponent/selectTags.vue'
export default {
  components: {
    'select-tags': selectTags
  },
  props: {
    tags: {
      type: String
    },
    isForm: {
      type: Boolean,
      default: true
    }
  },
  // watch:{
  //   tags(val){
  //     this.inputTags=val
  //   }
  //  }
  computed: {
    inputTags: {
      set(val) {
        this.$emit('update:tags', val.join(','))
      },
      get() {
        return this.tags ? this.tags.split(',') : []
      }
    }
  },
  data() {
    return {
      addTags: false,
      tagType: 'resource',
      showTags: true
      // inputTags:[]
    }
  },
  methods: {
    openTags() {
      this.addTags = true
      this.changeTips()
    },
    changeTips() {
      this.showTags = this.inputTags.length < 10
    },
    close(tag) {
      this.inputTags = this.inputTags.splice(this.inputTags.indexOf(tag), 1)
      this.changeTips()
      this.$emit('update:tags', this.inputTags.join(','))
    }
  }
}
</script>
<style>

.button-new-tag i.fa{
  padding-right:0;
}
</style>
<style scoped>
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-style: dashed;
  padding: 0 10px;
}
.resource-tags:not(:first-child){
  margin-left:5px;
}
</style>
