<!--
 * @Description: 画像主题页面
 * @Author: wenjing
 * @Date: 2023-05-15 11:30:56
-->
<template>
  <div class="body">
    <div class="btn-line">
      <el-button class="add-btn" icon="el-icon-plus" type="primary" 
        size="small" @click="handleAddSubject">新增主题</el-button>
    </div>
    <div class="card-block">
      <el-card class="card-box" v-for="(subject, index) in subjectList" :key="'card' + index" shadow="hover">
        <!-- 卡片头行：标题+[复制|编辑|删除]按钮  -->
        <div slot="header" class="clearfix">
          <div class="card-title">
            <div class="card-title-text">{{ subject.key }}</div>
            <div>
              <el-tooltip class="mouse-pointer" effect="dark" content="复制" placement="top" >
                <i class="el-icon-document-copy" style="color:#0AC69B" @click="handleCopySubject(subject.key)"></i>
              </el-tooltip>
              <el-tooltip class="mouse-pointer" style="margin-left:10px" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="color:#397AFA" @click="handleEditSubject(subject.key)"></i>
              </el-tooltip>
              <el-tooltip class="mouse-pointer" style="margin-left:10px" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete" style="color:#FF4D4F " @click="handleDeleteSubject(subject.key)"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- 采集标签 -->
        <div class="card-item">
          <div class="card-item-left">采集结构</div>
          <div class="card-item-right">{{ subject.getherStructure }}</div>
        </div>
        <div class="card-item" v-for="(tagSet, index) in subject.getherTagSetKeyList" :key="'gether' + index">
          <div class="card-item-left" v-if="index == 0">采集标签集</div>
          <div class="card-item-left" v-else> </div>
          <div class="card-item-right">{{ tagSet }}</div>
        </div>
        <el-divider></el-divider>
        <!-- 分析标签 -->
        <div class="card-item" v-for="(tagSet, index) in subject.compTagSetKeyList" :key="'comp' + index">
          <div class="card-item-left" v-if="index == 0">分析标签集(计算型)</div>
          <div class="card-item-left" v-else> </div>
          <div class="card-item-right">{{ tagSet }}</div>
        </div>
        <div class="card-item" v-for="(tagSet, index) in subject.evalTagSetKeyList" :key="'eval' + index">
          <div class="card-item-left" v-if="index == 0">分析标签集(评估型)</div>
          <div class="card-item-left" v-else> </div>
          <div class="card-item-right">{{ tagSet }}</div>
        </div>
        <el-divider></el-divider>
        <!-- 人工标签 -->
        <div class="card-item">
          <div class="card-item-left">人工标签集</div>
          <div class="card-item-right">{{ subject.manualTagSetKey }}</div>
        </div>
        <el-divider></el-divider>
        <!-- 展现标签 -->
        <div class="card-item">
          <div class="card-item-left">展现标签集</div>
        </div>
        <div v-for="(tagSet, index) in subject.renderTagSetList" :key="'render' + index">
          <div class="card-item">
            <div class="card-item-left">&ensp;&ensp;标签集名称</div>
            <div class="card-item-right">{{ tagSet.renderTagSetKey }}</div>
          </div>
          <div class="card-item">
            <div class="card-item-left">&ensp;&ensp;匹配字段名</div>
            <div class="card-item-right">{{ !tagSet.matchedField ? '---' : tagSet.matchedField }}</div>
          </div>
          <div class="card-item">
            <div class="card-item-left">&ensp;&ensp;匹配字段值</div>
            <div class="card-item-right">{{ !tagSet.matchedValue ? '---' : tagSet.matchedValue }}</div>
          </div>
          <div class="card-item"></div>
        </div>
        <el-divider></el-divider>
        <!-- 标签文本颜色 -->
        <div class="card-item">
          <div class="card-item-left">计算型标签文本颜色</div>
          <div class="card-item-right">
            <span class="color-block" :style="tagColorStyle(subject, 'comp')">
              &ensp;{{tagColorStr(subject, 'comp')}}&ensp;
            </span>
          </div>
        </div>
        <div class="card-item">
          <div class="card-item-left">评估型标签文本颜色</div>
          <div class="card-item-right">
            <span class="color-block" :style="tagColorStyle(subject, 'eval')">
              &ensp;{{tagColorStr(subject, 'eval')}}&ensp;
            </span>
          </div>
        </div>
        <div class="card-item">
          <div class="card-item-left">人工标签文本颜色</div>
          <div class="card-item-right">
            <span class="color-block" :style="tagColorStyle(subject, 'manual')">
              &ensp;{{tagColorStr(subject, 'manual')}}&ensp;
            </span>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 对话框 -->
    <edit-subject-dlg :showDialog="showEditDialog" :mode="dialogMode" :curKey="curKey" @close="handleCloseEditDlg" />
    <copy-tagset-dialog :showDialog="showCopyDialog" type="subject" :srcKey="curKey" @close="handleCloseCopyDlg" />
  </div>
</template>

<script>
import CopyTagSetDlg from '../common/CopyTagSetDlg.vue';
import EditSubjectDlg from './components/EditSubjectDlg.vue';
import aupUtil from '../common/AupUtil.js';

export default {
  name: 'AupSubjectList',
  components: {
    'edit-subject-dlg': EditSubjectDlg,
    'copy-tagset-dialog': CopyTagSetDlg
  },

  data() {
    return {
      subjectList: [],
      showEditDialog: false,
      showCopyDialog: false,

      dialogMode: '',   //编辑对话框的运行模式：'add'/'edit'
      curKey: ''        //复制主题和编辑主题所用的主题key
    }
  },

  computed: {
    tagColorStyle() {
      return function(subject, tagType) {
        switch (tagType) {
          case 'comp':
            return 'color:' + subject.tagColorSet.compTagTextColor
              + ';background:' + subject.tagColorSet.compTagTextBgColor
              + ';border:1px solid ' + subject.tagColorSet.compTagTextColor;
          case 'eval':
            return 'color:' + subject.tagColorSet.evalTagTextColor
              + ';background:' + subject.tagColorSet.evalTagTextBgColor
              + ';border:1px solid ' + subject.tagColorSet.evalTagTextColor;
          case 'manual':
            return 'color:' + subject.tagColorSet.manualTagTextColor
              + ';background:' + subject.tagColorSet.manualTagTextBgColor
              + ';border:1px solid ' + subject.tagColorSet.manualTagTextColor;
        }
      }
    },

    tagColorStr() {
      return function(subject, tagType) {
        switch (tagType) {
          case 'comp':
            return subject.tagColorSet.compTagTextColor + ' | ' + subject.tagColorSet.compTagTextBgColor;
          case 'eval':
            return subject.tagColorSet.evalTagTextColor + ' | ' + subject.tagColorSet.evalTagTextBgColor;
          case 'manual':
            return subject.tagColorSet.manualTagTextColor + ' | ' + subject.tagColorSet.manualTagTextBgColor;
        }
      }
    },
  },

  methods: {
    //获取画像主题配置项列表
    listAupSubjects() {
      let url = this.commonUrl.URL_LIST_AUP_SUBJECTS
      this.appAxios("GET", url).then(result => {
        if (result == null) return;
        this.subjectList = result.data;
      })
    },

    handleAddSubject() {
      this.dialogMode = 'add';
      this.showEditDialog = true;
    },
    
    handleEditSubject(key) {
      this.dialogMode = 'edit';
      this.curKey = key;
      this.showEditDialog = true;
    },

    handleCloseEditDlg(refresh) {
      this.showEditDialog = false;
      if (refresh) {
        this.listAupSubjects();
      }
    },

    handleCopySubject(key) {
      this.curKey = key;
      this.showCopyDialog = true;
    },
    
    handleCloseCopyDlg(refresh) {
      this.showCopyDialog = false;
      if (refresh) {
        this.listAupSubjects();
      }
    },

    handleDeleteSubject(key) {
      aupUtil.confirm('确定删除当前主题吗?', this).then(() => {
        let url = this.commonUtil.fillUrlArgments(this.commonUrl.URL_DELETE_AUP_SUBJECT, key);
        this.appAxios("DELETE", url).then(result => {
          if (result == null) return;
          this.listAupSubjects();
        })
      })
    }
  },

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

<style scoped>
.btn-line {
  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: 40%;
  margin-right: 10px;
  margin-bottom: 10px;
  background: #FAFBFF;
}

.body .card-box >>> .el-card__header {
  padding: 12px 20px;
}

.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-item {
  display: flex;
  padding: 4px 0;
}

.card-item-left {
  color: #657180;
  text-align: left;
  width: 45%;
  margin-right:10px;
}

.card-item-right {
  color: #333333 ;
  text-align: left;
  flex: 1;
}

.color-block {
  margin-right: 6px;
  padding: 3px;
  font-size: 14px;
}
</style>
