<template>
  <div class="tag-box">
    <div style="display:flex;margin-right:0 !important" class="inline-16">
      <el-tag v-for="(item,index) in data.systemtag" type="danger" size="small" :key="index" style="margin-right:10px">{{item}}</el-tag>
      <el-tag v-for="(item,index) in data.datatag" size="small" :key="index" style="margin-right:10px">{{item}}</el-tag>
    </div>
    <div class="edit inline-16">
      <div @click="addTag">
        <i class="el-icon-edit" style="color:#FA8C16;font-size:12px"></i><span class="text">添加</span>
      </div>
    </div>
    <el-dialog title="标签" :visible.sync="dialogFormVisible" width="30%" v-if="tagData">
      <div class="header">
        <div class="left">请选择添加的标签</div>
        <div class="right">已选{{`${tagData.datatag.length}/${tagData.option.length}`}}</div>
      </div>
      <div class="tag" v-if="data">
        <div 
          class="tag-item" 
          v-for="item in tagData.option" 
          :key="item.sys_systemtagdetailid"
          @click="tagClick(item)"
          :style="calcBackgroundColor(item)"
        >{{item.tag}}</div>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/*
  data:标签数据
  id:表id
  ownertable:数据表名
  <tagPanl slot="tags" :data="tagObj" :id="mainData.sa_customersid" @onSuccess="queryMainData"/>

*/
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: '',
  props:['data','id','ownertable'],
  data() {
    return {
      dialogFormVisible:false,
      tagData:''
    };
  },
  computed:{
    /* 计算iten是否选中 禁用 */
    calcBackgroundColor () {
      return function (data) {
        console.log(this.tagData);
        if (this.tagData) {
          for(let i=0;i<this.tagData.datatag.length;i++) {
            let res = this.tagData.datatag[i].mutextag.find(item => item == data.tag)
            if(res) {
              return 'background:#F5F5F5;color:#999999'
            }
          }
          if(this.tagData.datatag.find(item => item.tag == data.tag)) {
            return 'background:#FA8C16;color:#ffffff'
          }
        }
        
      }
    }
  },
  watch:{
  },
  methods: {
    addTag () {
      if(this.data.option.length == 0) return this.$message({
        message:'暂无标签可加',
        title:'提示',
        type:'warning'
      })
      this.tagData = JSON.parse(JSON.stringify(this.data))
      this.tagData.datatag = this.data.datatag.map(item => {
        let temp = this.data.option.find(item2 => item2.tag == item)
        return {
          mutextag:temp.mutextag,
          rowindex:temp.rowindex,
          sys_systemtagdetailid:temp.sys_systemtagdetailid,
          sys_systemtagid:temp.sys_systemtagid,
          tag:temp.tag,
        }
      })
      this.dialogFormVisible = true
    },
    async onSubmit () {
      let res = await this.$api.requested({
        "id": 20220929090901,
        "content": {
            "ownertable": this.ownertable,
            "ownerid": this.id,
            "datatag": this.tagData.datatag.map(item => item.tag)
        }
      })
      console.log(res);
      this.tool.showMessage(res,() => {
        this.tagData = ''
        this.dialogFormVisible = false
        this.$emit('onSuccess')
      })
    },
    tagClick (data) {
      for(let i=0;i<this.tagData.datatag.length;i++) {
        let res = this.tagData.datatag[i].mutextag.find(item => item == data.tag)
        if(res) {
          return
        }
      }
      let temp = this.tagData.datatag.find(item => item.tag == data.tag)
      temp ? 
        this.tagData.datatag.splice(this.tagData.datatag.indexOf(temp),1) : this.tagData.datatag.push(data)
    }
  },
};
</script>

<style scoped>
  .edit {
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in;
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
    background: #FFF3E7;
    border-color: #d7e3fd;
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .edit .text {
    color: #FA8C16;
    font-size: 12px;
    font-weight: 400;
    margin-left: 5px;
  }
  .tag-box {
    display: flex;
    align-items: center;
    padding-top: 16px;
  }
  .tag-box .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .tag-box .header .left {}
  .tag-box .header .right {}
  .tag-box .tag {
    display: flex;
    flex-wrap: wrap;
  }
  .tag-box .tag .tag-item {
    margin: 0 10px 10px 0;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in;
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
    border-color: #d7e3fd;
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }
</style>

