<!--
 * @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 compTagSetList" :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="margin-left:10px; cursor:pointer">
                <i class="el-icon-edit" style="color:#397AFA" @click="handleEditTagSet(tagSet.key)"></i>
              </el-tooltip>
              <el-tooltip effect="dark" content="复制标签集" placement="top" style="margin-left:10px; 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="addTagPopupVisible[tagSetIndex]" plaement="bottom-start" width="300" trigger="manual">
                  <comp-tag-form mode="add" :visible="addTagPopupVisible[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="addTagPopupVisible[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 v-for="(tag, tagIndex) in tagSet.tagList" :key="tagIndex">
            <!-- 主标签 -->
            <div class="card-item" @mouseenter="handleShowIcon4Tag(tagSetIndex, tagIndex, true)"
              @mouseleave="handleShowIcon4Tag(tagSetIndex, tagIndex, false)">
              <div class="card-item-left">
                <div>{{ tag.name }}</div>
              </div>
              <!-- 标签单项的新增、编辑和删除按钮 -->
              <div class="card-item-icons" v-if="itemVisible(tagSetIndex, tagIndex, -1)">
                <el-popover v-model="addSubTagPopupVisible" plaement="bottom-start"
                  style="margin-right:12px;" width="740" trigger="manual">
                  <comp-subtag-form mode="add" :visible="addSubTagPopupVisible" :tagSet="tagSet"
                    :tagIndex="tagIndex" @close="handleAddSubTagCancel" @confirm="handleAddSubTagConfirm" />
                  <i class="el-icon-plus mouse-pointer" style="color:#397AFA" slot="reference"
                    @click="handleAddSubTag(tagSetIndex, tagIndex)"></i>
                </el-popover>
                <el-popover v-model="editPopupVisible" plaement="bottom-start" width="300" trigger="manual">
                  <comp-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 || addSubTagPopupVisible"/>
                <delete-confirm-popup style="margin-left:10px; color:#FF4D4F" :visible="delConfirmPopupVisible" 
                  @update:visible="handleDelTagConfirmPopupVisible" @confirm="handleDeleteTag" />
              </div>
            </div>
            <!-- 主标签下的子标签条目 -->
            <div class="card-item" v-for="(subTag, subTagIndex) in tag.subTags" :key="subTagIndex"
              @mouseenter="handleShowIcon4SubTag(tagSetIndex, tagIndex, subTagIndex, true)" 
              @mouseleave="handleShowIcon4SubTag(tagSetIndex, tagIndex, subTagIndex, false)">
              <!-- 子标签 -->
              <div class="card-item-left" v-if="subTag">
                <div style="padding-left:20px;">{{ subTag.name }}&nbsp;
                  <el-tooltip v-if="subTag.exprText.length > shortExprLen" effect="dark" 
                    :content="subTag.exprText" placement="bottom-start" style="cursor:pointer">
                    <span style="font-size: 14px;">{{ subTag.exprText }}</span>
                  </el-tooltip>
                  <span v-else style="font-size: 14px;">{{ subTag.exprText }}</span>
                </div>
              </div>
              <!-- 子标签的编辑和删除按钮 -->
              <div class="card-item-icons" v-if="subTag && itemVisible(tagSetIndex, tagIndex, subTagIndex)">
                <el-popover v-model="editPopupVisible" plaement="bottom-start" width="740" trigger="manual">
                  <comp-subtag-form mode="edit" :visible="editPopupVisible" :tagSet="tagSet" :tagIndex="tagIndex"
                    :subTagIndex="subTagIndex" @close="handleEditSubTagCancel" @confirm="handleEditSubTagConfirm" />
                  <i class="el-icon-edit mouse-pointer" style="color:#397AFA" @click="handleEditSubTag" slot="reference"></i>
                </el-popover>
                <mask-layer v-if="editPopupVisible"/>
                <delete-confirm-popup style="margin-left:10px; color:#FF4D4F" :visible="delConfirmPopupVisible" 
                  @update:visible="handleDelSubTagConfirmPopupVisible" @confirm="handleDeleteSubTag" />
              </div>
            </div>
          </div>
        </div>
     </el-card>
    </div>
    <!-- 对话框 -->
    <comp-tagset-dlg :mode="tagSetDlgMode" :dialogVisible="tagSetDlgVisible" :tagSetKey="curTagSetKey" @close="handleCloseTagSetDlg" />
    <copy-tagset-dialog :showDialog="copyTagSetDlgVisible" type="comp" :srcKey="curKey" @close="handleCloseCopyTagSetDlg" />
  </div>
</template>

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

import CompTagSetDlg from './components/CompTagSetDlg.vue';
import CopyTagSetDlg from '../common/CopyTagSetDlg.vue';
import CompTagForm from './components/CompTagForm.vue';
import CompSubTagForm from './components/CompSubTagForm.vue';
import DeleteConfirmPopup from '../common/DeleteConfirmPopup.vue';

export default {
  name: 'CompTagSetPanel',
  components: {
    'mask-layer': MaskLayer,
    'comp-tagset-dlg': CompTagSetDlg,
    'copy-tagset-dialog': CopyTagSetDlg,

    'comp-tag-form': CompTagForm,
    'comp-subtag-form': CompSubTagForm,
    'delete-confirm-popup': DeleteConfirmPopup,
  },
  
  data() {
    return {
      compTagSetList: [],
      
      tagSetDlgMode: '',
      curTagSetKey: '',
      tagSetDlgVisible: false,
      copyTagSetDlgVisible: false,
      
      addTagPopupVisible: [],           // 标签新增弹框标志
      addSubTagPopupVisible: false,     // 子标签新增弹框标志
      editPopupVisible: false,          // 标签和子标签编辑弹框共用标志
      delConfirmPopupVisible: false,    // 标签和子标签删除弹框共用标志


      curTagSetIndex: -1,
      curTagIndex: -1,
      curSubTagIndex: -1,
      curKey: '',          //复制和编辑所用的标签集key
      
      shortExprLen: 35,
    }
  },

  computed: {
    itemVisible() {
      return function(tagSetIndex, tagIndex, subTagIndex) {
        return tagSetIndex === this.curTagSetIndex 
          && tagIndex === this.curTagIndex 
          && subTagIndex === this.curSubTagIndex;
      }
	  },
  },

  methods:{
    listCompTagSets() {
      let url = this.commonUrl.URL_LIST_COMPUTATION_TAG_SETS;
      this.appAxios("GET", url).then(result => {
        if (result == null) return;
        this.compTagSetList = result.data;
      })
    },

    updateCompTagSet(tagSet) {
      this.appAxios('PUT', this.commonUrl.URL_UPDATE_COMPUTATION_TAG_SET, tagSet).then(result => {
        if (result == null) return;

        this.listCompTagSets();
        this.clearCurrentData();

        this.addTagPopupVisible.fill(false);
        this.addSubTagPopupVisible = false;
        this.editPopupVisible = false;
        this.delConfirmPopupVisible = false;
      })
    },

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

    /* 以下为‘标签集’处理的事件方法 */
    handleAddTagSet() {
      this.tagSetDlgMode = 'add';
      this.tagSetDlgVisible = true;
    },

    handleEditTagSet(tagSetKey) {
      this.curTagSetKey = tagSetKey;
      this.tagSetDlgMode = 'edit';
      this.tagSetDlgVisible = true;
    },
    
    handleCloseTagSetDlg(refresh) {
      this.tagSetDlgVisible = false;
      if (refresh) {
        this.listCompTagSets();
      }
    },

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

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

    /* 以下为‘新增标签’处理的事件方法 */
    handleAddTag(tagSetIndex) {
      this.$set(this.addTagPopupVisible, tagSetIndex, true);
      
      this.curTagSetIndex = tagSetIndex;
      this.curTagIndex = -1;
      this.curSubTagIndex = -1;
    },

    handleAddTagCancel(tagSetIndex) {
      this.$set(this.addTagPopupVisible, tagSetIndex, false);
      this.clearCurrentData();
    },

    handleAddTagConfirm(tagSet, tag) {
      let data = JSON.parse(JSON.stringify(tagSet));
      data.tagList.push(tag);
      this.updateCompTagSet(data);
    },

    /* 以下为‘编辑、删除标签’处理的事件方法 */
    handleShowIcon4Tag(tagSetIndex, tagIndex, flag) {
      if (this.delConfirmPopupVisible || this.editPopupVisible || this.addSubTagPopupVisible) return;

      if (flag) {
        this.curTagSetIndex = tagSetIndex;
        this.curTagIndex = tagIndex;
        this.curSubTagIndex = -1;
      } 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.updateCompTagSet(data);
    },

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

    handleDeleteTag() {
      let data = JSON.parse(JSON.stringify(this.compTagSetList[this.curTagSetIndex]));
      data.tagList.splice(this.curTagIndex, 1);
      this.updateCompTagSet(data);
    },

    /* 以下为‘新增子标签’处理的事件方法 */
    handleAddSubTag(tagSetIndex, tagIndex) {
      this.addSubTagPopupVisible = true;

      this.curTagSetIndex = tagSetIndex;
      this.curTagIndex = tagIndex;
      this.curSubTagIndex = -1;
    },

    handleAddSubTagCancel() {
      this.addSubTagPopupVisible = false;
      this.clearCurrentData();
    },

    handleAddSubTagConfirm(subTag) {
      let data = JSON.parse(JSON.stringify(this.compTagSetList[this.curTagSetIndex]));
      if (!data.tagList[this.curTagIndex].subTags) {
        data.tagList[this.curTagIndex].subTags = [subTag]
      } else {
        data.tagList[this.curTagIndex].subTags.push(subTag);
      }
      this.updateCompTagSet(data);
    },

    /* 以下为‘编辑、删除子标签’处理的事件方法 */
    handleShowIcon4SubTag(tagSetIndex, tagIndex, subTagIndex, flag) {
      if (this.delConfirmPopupVisible || this.editPopupVisible) return;

      if (flag) {
        this.curTagSetIndex = tagSetIndex;
        this.curTagIndex = tagIndex;
        this.curSubTagIndex = subTagIndex;
      } else {
        this.clearCurrentData();
      }
    },

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

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

    handleEditSubTagConfirm(subTag) {
      let data = JSON.parse(JSON.stringify(this.compTagSetList[this.curTagSetIndex]));
      data.tagList[this.curTagIndex].subTags[this.curSubTagIndex] = subTag;
      this.updateCompTagSet(data);
    },
    
    handleDelSubTagConfirmPopupVisible(val) {
      this.delConfirmPopupVisible = val;
      if (!this.delConfirmPopupVisible) {
        this.clearCurrentData();
      }
    },

    handleDeleteSubTag() {
      let data = JSON.parse(JSON.stringify(this.compTagSetList[this.curTagSetIndex]));
      data.tagList[this.curTagIndex].subTags.splice(this.curSubTagIndex, 1);
      this.updateCompTagSet(data);
    }
  },

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

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

.btn-block {
  margin: 10px 0 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 0 0;
  display: flex;
  flex-wrap: wrap
}
.card-box {
  width: 500px;
  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>