<!--
 * @Description: 画像展现标签集列表页面
 * @Author: wenjing
 * @Date: 2023-06-15 15:00:00
-->
<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 renderTagSetList" :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="addPopupVisible[tagSetIndex]" plaement="bottom-start" width="600" trigger="manual">
                  <render-tag-form mode="add" :visible="addPopupVisible[tagSetIndex]" :tagSetIndex="tagSetIndex" 
                    :tagSet="tagSet" @close="handleAddTagCancel" @confirm="handleRefreshProfile" />
                  <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">
          <user-profile :tag-set="tagSet" :tag-set-index="tagSetIndex" mode="edit"
            @refresh="handleRefreshProfile" @click-image="handleClickImage"/>
        </div>
      </el-card>
    </div>
    <!-- 对话框 -->
    <render-tagset-dlg :dialog-visible="renderTagSetDlgVisible" 
      :mode="tagSetDlgMode" :tag-set-key="curTagSetKey" @close="handleCloseRenderTagSetDlg" />
    <copy-tagset-dialog :show-dialog="copyTagSetDlgVisible" 
      type="render" :src-key="curKey" @close="handleCloseCopyTagSetDlg" />
    <tag-set-preview-dlg :dialog-visible="previewDlgVisible" :tag-set="previewTagSet"
      @close="handleClosePreviewDlg" />
  </div>
</template>

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

import RenderTagSetDlg from './components/RenderTagSetDlg.vue';
import CopyTagSetDlg from '../common/CopyTagSetDlg.vue';
import TagSetPreviewDlg from './components/TagSetPreviewDlg.vue';

import RenderTagForm from '../common/RenderTagForm.vue';
import DeleteConfirmPopup from '../common/DeleteConfirmPopup.vue';

export default {
  name: 'RenderTagSetList',
  components:{
    'mask-layer': MaskLayer,
		'user-profile': UserProfile,

    'render-tagset-dlg': RenderTagSetDlg,
    'copy-tagset-dialog': CopyTagSetDlg,
    'tag-set-preview-dlg': TagSetPreviewDlg,

    'render-tag-form': RenderTagForm,
    'delete-confirm-popup': DeleteConfirmPopup,
	},

  data() {
    return {
      renderTagSetList: [],

      tagSetDlgMode: '',
      curTagSetKey: '',
      renderTagSetDlgVisible: false,
      copyTagSetDlgVisible: false,
      
      addPopupVisible: [],
      editPopupVisible: false,        //是否显示编辑标签表单弹窗
      delConfirmPopupVisible: false,  //是否显示编辑标签表单弹窗
      
      curKey: '',                     //复制和编辑所用的标签集key
      previewDlgVisible: false,
      previewTagSet: {},
    }
  },

  methods:{
    listRenderTagSets() {
      let requestData = {
				url: this.commonUrl.URL_LIST_RENDER_TAG_SETS,
        method: 'GET',
      };
      this.vueRequest(requestData).then(result => {
        if (result == null) return;
        this.renderTagSetList = result.data;
        this.clearAllStatus();
      })
    },

    refreshCurTagSet(tagSet, tagSetIndex) {
      this.$set(this.renderTagSetList, tagSetIndex, tagSet);
      this.clearAllStatus();
    },

    clearAllStatus() {
      this.addPopupVisible.fill(false);
      this.editPopupVisible = false;
      this.delConfirmPopupVisible = false;
    },

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

    handleEditTagSet(tagSetKey) {
      this.curTagSetKey = tagSetKey;
      this.tagSetDlgMode = 'edit';
      this.renderTagSetDlgVisible = true;
    },
    
    handleCloseRenderTagSetDlg(refresh) {
      this.renderTagSetDlgVisible = false;
      if (refresh) {
        this.listRenderTagSets();
      }
    },

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

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

    /* 以下为‘新增标签’处理的事件方法 */
    handleAddTag(tagSetIndex) {
      this.$set(this.addPopupVisible, tagSetIndex, true);
    },
    
    handleAddTagCancel(tagSetIndex) {
      this.$set(this.addPopupVisible, tagSetIndex, false);
    },
    
    handleRefreshProfile(tagSet, tagSetIndex) {
      this.refreshCurTagSet(tagSet, tagSetIndex);
    },

    handleClickImage(tagSet) {
      this.previewTagSet = tagSet;
      this.previewDlgVisible = true;
    },

    handleClosePreviewDlg() {
      this.previewDlgVisible = false;
    },
  },

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

<style scoped>
.body {
  margin: 0;
  text-align: center;
  border: solid red 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: 600px;
  margin-right:10px;
  margin-bottom: 10px;
  background: #FAFBFF;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.card-title {
  display: flex;
  justify-content: space-between;
}
.card-title-text {
  color:#3F3F3F;
  font-size: 14px;
  font-weight: bold;
}
.card-body {
  width: 100%;
  height: 560px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
