<template>
  <div>
    <!-- <p class="detail__head__label">标签展示:</p> -->
    <div v-if="showTag">
      <el-tag style="margin-right:10px" v-for="item in datatag" :key="item.rowindex" size="small" type="primary" effect="dark">{{item}}</el-tag>
      <el-button type="text" size="mini" @click="showTag = false">+新标签</el-button>
    </div>
    <el-select
      v-else
      style="width:50%;"
      v-model="datatag"
      multiple
      placeholder="请选择文章标签"
      size="mini"
      @visible-change="addTag">
      <el-option
        v-for="item in option"
        :key="item.index"
        :label="item.tag"
        :value="item.tag"
        @click.native="setMutextag(item)"
        :disabled="hasDisabledTag(item)">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  props:['onwertable'],
  data () {
    return {
      datatag:[],
      option:[],
      mutextag:[],
      showTag:true
    }
  },
  methods:{
    async queryTag () {
      const res  = await this.$api.requested({
        "id": 20220929085401,
        "content": {
          "ownertable":this.onwertable,
          "ownerid":this.$route.query.id
        }
      })

      this.option = res.data.option
      this.datatag = res.data.datatag

      this.datatag.length > 0?this.option.forEach(e=>{
        this.setMutextag(e)
      }):''
    },
    async addTag (val) {
      if (val === false) {
        this.showTag = true
        const res  = await this.$api.requested({
          "id": 20220929090901,
          "content": {
            "ownertable":this.onwertable,
            "ownerid":this.$route.query.id,
            "datatag":this.datatag
          }
        })
        res.code === 1?this.queryTag():''
      }
    },
    setMutextag (item) {
       let _isSame = this.datatag.some(tag=>item.tag === tag)
       if (_isSame) {
          this.mutextag = this.mutextag.concat(item.mutextag)
       } else {
        let a = new Set(this.mutextag);
        let b = new Set(item.mutextag); 
        this.mutextag = Array.from(new Set([...a].filter(x => !b.has(x))))
       }
    },
    hasDisabledTag (item) {
      let arr = this.datatag.length === 0?[]:this.mutextag
      let _isSame = arr.some(tag=>item.tag === tag)
      return _isSame
    }
  },
  mounted () {
    this.queryTag()
  }
}

</script>
<style>
</style>