<!--
 * @Description: 采集标签集列表页面组件
 * @Author: wenjing
 * @Date: 2023-05-15 11:30:56
-->
<template>
  <div class="body">
    <div class="btn-block">
      <el-button class="add-btn" icon="el-icon-plus" type="primary" size="small" @click="handleAddTagSet">新增标签集</el-button>
    </div>
    <div class="card-block">
      <el-card class="card-box" v-for="(tagSet, tagSetIndex) in gatherTagSetList" :key="tagSetIndex" shadow="hover">
        <div slot="header" class="clearfix">
          <div class="card-title">
            <div class="card-title-text">{{ tagSet.key }}</div>
            <div>
              <el-tooltip effect="dark" content="复制标签集" placement="top" style="cursor:pointer">
                <i class="el-icon-document-copy" style="color:#0AC69B" @click="handleCopyTagSet(tagSet.key)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="添加标签" placement="top" style="margin-left:10px; cursor:pointer">
                <el-popover v-model="addPopupVisible[tagSetIndex]" plaement="bottom-start" width="300" trigger="manual">
                  <edit-gather-tag-form mode="add" :visible="addPopupVisible[tagSetIndex]" :tagSetIndex="tagSetIndex" 
                    :tagSet="tagSet" @close="handleAddTagCancel" @confirm="handleAddTagConfirm" />
                  <i class="el-icon-plus mouse-pointer" style="color:#397AFA" @click="handleAddTag(tagSetIndex)" slot="reference"></i>
                </el-popover>
              </el-tooltip>
              <mask-layer v-if="addPopupVisible[tagSetIndex]"/>
              <el-tooltip effect="dark" content="删除标签集" placement="top" style="margin-left:10px; cursor:pointer">
                <i class="el-icon-delete" style="color:#FF4D4F" @click="handleDeleteTagSet(tagSet.key)"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="card-item" v-for="(tag, tagIndex) in tagSet.tagList" :key="tagIndex"
            @mouseenter="handleShowIcon(tagSet, tagIndex, true)" @mouseleave="handleShowIcon(tagSet, tagIndex, false)">
            <div class="card-item-left">
              {{ tag.name }}<span style="font-size:14px;">{{' ( ' + tag.field + ' / ' + tag.dataType + '类型 )'}}</span>
            </div>
            <!-- 标签单项的编辑和删除按钮 -->
            <div class="card-item-icons" v-if="tagSet === curTagSet && tagIndex === curTagIndex">
              <el-popover v-model="editPopupVisible" plaement="bottom-start" width="300" trigger="manual">
                <edit-gather-tag-form mode="edit" :visible="editPopupVisible" :tagSet="tagSet"
                  :tagIndex="tagIndex" @close="handleEditTagCancel" @confirm="handleEditTagConfirm" />
                <i class="el-icon-edit mouse-pointer" style="color:#397AFA" @click="handleEditTag" slot="reference"></i>
              </el-popover>
              <mask-layer v-if="editPopupVisible"/>
              <delete-confirm-popup style="margin-left:10px; color:#FF4D4F" :visible="delConfirmPopupVisible" 
                @update:visible="handleDelTagConfirmPopupVisible" @confirm="handleDeleteTag(tagSet, tagIndex)" />
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 对话框 -->
    <add-gather-tagset-dlg :showDialog="tagSetDlgVisible" @close="handleCloseAddTagSetDlg" />
    <copy-tagset-dialog :showDialog="copyTagSetDlgVisible" type="gather" :srcKey="curKey" @close="handleCloseCopyTagSetDlg" />
  </div>
</template>

<script>
import MaskLayer from '../../utilcomp/masklayer/MaskLayer.vue';
import aupUtil from '../common/AupUtil.js';

import AddGatherTagSetDlg from './components/AddGatherTagSetDlg.vue';
import CopyTagSetDlg from '../common/CopyTagSetDlg.vue';
import EditGatherTagForm from './components/EditGatherTagForm.vue';
import DeleteConfirmPopup from '../common/DeleteConfirmPopup.vue';

export default {
  name: 'GatherTagSetList',
  components: {
    'mask-layer': MaskLayer,
    'add-gather-tagset-dlg': AddGatherTagSetDlg,
    'copy-tagset-dialog': CopyTagSetDlg,
    'edit-gather-tag-form': EditGatherTagForm,
    'delete-confirm-popup': DeleteConfirmPopup,
  },

  data() {
    return {
      gatherTagSetList: [],

      tagSetDlgVisible: false,
      copyTagSetDlgVisible: false,

      addPopupVisible: [],
      editPopupVisible: false,        //是否显示编辑标签表单弹窗
      delConfirmPopupVisible: false,  //是否显示编辑标签表单弹窗
      
      curTagSet: {},
      curTagIndex: -1,
      curKey: '',                     //复制和编辑所用的标签集key
    }
  },

  methods: {
    listGatherTagSets() {
      let url = this.commonUrl.URL_LIST_GATHER_TAG_SETS;
      this.appAxios("GET", url).then(result => {
        if (result == null) return;
        this.gatherTagSetList = result.data;
        this.addPopupVisible = new Array(this.gatherTagSetList.length).fill(false);
      })
    },
    
    /**
     * 更新指定标签集，在增加、修改或删除“标签”时都需要调用
     */
    updateGatherTagSet(tagSet) {
      this.appAxios('PUT', this.commonUrl.URL_UPDATE_GATHER_TAG_SET, tagSet).then(result => {
        if (result == null) return;
        
        this.listGatherTagSets();
        this.clearCurrentData();
        
        this.addPopupVisible.fill(false);
        this.editPopupVisible = false;
        this.delConfirmPopupVisible = false;
      })
    },

    clearCurrentData() {
      this.curTagSet = {};
      this.curTagIndex = -1;
    },

    /* 以下为‘标签集’处理的事件方法 */
    handleAddTagSet() {
      this.tagSetDlgVisible = true;
    },
    
    handleCloseAddTagSetDlg(refresh) {
      this.tagSetDlgVisible = false;
      if (refresh) {
        this.listGatherTagSets();
      }
    },

    handleCopyTagSet(key) {
      this.curKey = key;
      this.copyTagSetDlgVisible = true;
    },
    
    handleCloseCopyTagSetDlg(refresh) {
      this.copyTagSetDlgVisible = false;
      if (refresh) {
        this.listGatherTagSets();
      }
    },

    handleDeleteTagSet(key) {
      aupUtil.confirm('确定删除当前标签集吗?', this).then(() => {
        let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DELETE_GATHER_TAG_SET, key);
        this.appAxios("DELETE", url).then(result => {
          if (result == null) return;
          this.listGatherTagSets();
        })
      })
    },

    /* 以下为‘新增标签’处理的事件方法 */
    handleAddTag(tagSetIndex) {
      this.$set(this.addPopupVisible, tagSetIndex, true);
    },
    
    handleAddTagCancel(tagSetIndex) {
      this.$set(this.addPopupVisible, tagSetIndex, false);
      this.clearCurrentData();
    },
    
    handleAddTagConfirm(tagSet, newTag) {
      let data = JSON.parse(JSON.stringify(tagSet));
      data.tagList.push(newTag);
      this.updateGatherTagSet(data);
    },
    
    /* 以下为‘编辑、删除标签’处理的事件方法 */
    handleShowIcon(tagSet, curTagIndex, flag) {
      if (this.delConfirmPopupVisible || this.editPopupVisible) return;

      if (flag) {
        this.curTagSet = tagSet;
        this.curTagIndex = curTagIndex;
      } else {
        this.clearCurrentData();
      }
    },

    handleEditTag() {
      this.editPopupVisible = true;
    },

    handleEditTagCancel() {
      this.editPopupVisible = false;
      this.clearCurrentData();
    },

    handleEditTagConfirm(tagSet, tag) {
      let data = JSON.parse(JSON.stringify(tagSet));
      data.tagList[this.curTagIndex] = tag;
      this.updateGatherTagSet(data);
    },
    
    handleDeleteTag(tagSet, tagIndex) {
      let data = JSON.parse(JSON.stringify(tagSet));
      data.tagList.splice(tagIndex, 1);
      this.updateGatherTagSet(data);
    },

    handleDelTagConfirmPopupVisible(val) {
      this.delConfirmPopupVisible = val;
      if (!this.delConfirmPopupVisible) {
        this.clearCurrentData();
      }
    },
  },

  mounted() {
    this.listGatherTagSets();
  }
}
</script>

<style scoped>
.body {
  margin:  0;
  text-align: center;
  border: solid 0px;
}

.btn-block {
  margin: 25px 40px 0;
  text-align: left;
}
.add-btn {
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #397AFA;
  color: #397AFA;
  font-size: 14px;
}

.card-block {
  margin: 25px 40px 0;
  display: flex;
  flex-wrap: wrap
}
.card-box {
  width: 400px;
  height: 450px;
  margin-right:10px;
  margin-bottom: 10px;
  background: #FAFBFF;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.body .card-box >>> .el-card__header {
  padding: 12px 20px;
}

.card-title {
  display: flex;
  justify-content: space-between;
}
.card-title-text {
  color:#3F3F3F;
  font-size: 14px;
  font-weight: bold;
}
.card-body {
  height: 380px;
  overflow-y: auto;
}
.card-item {
  display: flex;
  padding: 6px 0;
}
.card-item-left {
  color: #657180;
  text-align: left;
  width: 80%;
}
.card-item-icons {
  text-align: right;
  flex: 1;
  border: solid red 0px;
}
</style>