<template>
  <div>
    <!-- <p class="detail__head__label">标签展示:</p> -->
    <div class="flex-align-center">
      <p v-if="systemtag.length === 0 && datatag.length === 0"  style="margin-right:5px;color:#ccc" >暂无标签</p>
      <el-tag style="margin-right:5px" color="#3874F6" v-for="item in systemtag" :key="item.rowindex" size="small" type="primary" effect="dark">{{item}}</el-tag>
      <div v-if="showTag">
        <el-tag style="margin-right:5px" color="#FA8C16" v-for="item in datatag" :key="item.rowindex" size="small" type="warning" effect="dark">{{item}}</el-tag>
      </div>
      <el-select
        v-if="!showTag"
        ref="sle"
        style="width:500px;"
        v-model="datatag"
        multiple
        placeholder="请选择标签"
        size="mini"
        @visible-change="addTag"
        @change="addTag"
        @remove-tag="removetag">
        <el-option
          v-for="item in option"
          :key="item.index"
          :label="item.tag"
          :value="item.tag"
          :disabled="hasDisabledTag(item)">
          <span style="float: left">{{ item.tag }}</span>
          <span style="float: right; color: #8492a6; font-size: 12px">{{ item.helptips?item.helptips:'暂无描述' }}</span>
        </el-option>
      </el-select>
      <!-- <el-button type="text" @click="showTag = false">+</el-button> -->
      <img v-show="showTag" src="@/assets/icons/tag.svg" @click.stop="showTag = false" height="20" alt="">
    </div>
  </div>
</template>

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

      this.option = res.data.option
      this.datatag = res.data.datatag
      this.systemtag = res.data.systemtag
    },
    async addTag (val) {
      if (val === false) {
        this.showTag = true
        const res  = await this.$api.requested({
          "id": 20220929090901,
          "content": {
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id,
            "datatag":this.datatag
          }
        })
        res.code === 1?this.queryTag():''
        
      }
    },
    removetag () {
      this.showTag = true
      this.addTag(false)
    },
    hasDisabledTag (item) {
      let arr = []
      let arr2 = []
      arr = this.option.filter(item=>{
        return this.datatag.includes(item.tag)
      })
      arr.forEach(e=>{
        arr2 = arr2.concat(e.mutextag)
      })
      arr2 = this.datatag.length === 0?[]:arr2
      let _isSame = arr2.some(tag=>item.tag === tag)
      return _isSame
    },
    closeTag () {
      this.showTag = true
    }
  },
  mounted () {
    this.queryTag()
  }
}

</script>
<style>
</style>