<template>
  <!-- 标签管理 -->
  <div class="document-tag-page-wrap page-block-wrap">
    <div class="tool-box">
      <el-button type="primary" @click="handleOperate('add',{})">添加标签</el-button>
      <el-input v-model="searchText" clearable prefix-icon="el-icon-search" placeholder="请输入标签名称" @input="searchHandle"></el-input>
    </div>
    <div class="table-box">
      <el-table :data="tableData" border v-loading="tableLoading">
        <el-table-column v-for="column in columnList" :key="column.label"
          align="center"
          :prop="column.key"
          :label="column.label"
          :min-width="column.minWidth"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" :style="row.UserNum===0?{color:'#606266'}:{}"
              v-if="column.key==='UserNum'" @click="checkContent(row)">
              {{row.UserNum}}
            </el-button>
            <span v-else>{{row[column.key]}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="text" size="small"  @click="handleOperate('edit',row)">编辑</el-button>
            <el-button type="text" size="small"  style="color:red;" @click="handleOperate('delete',row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
            layout="total,prev,pager,next,jumper" 
            background
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :page-size="pageSize" 
            :total="total"
            style="text-align:right;margin-top:30px;">
      </el-pagination>
    </div>
    <!-- 添加标签弹窗 -->
    <el-dialog
      :title="operate==='edit'?'编辑标签':'添加标签'"
      :visible.sync="isAddTagShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="isAddTagShow=false"
      width="589px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <div class="input-item">
          标签名称：<el-input  placeholder="请输入标签名称" v-model.trim="currentData.LabelName" required ></el-input>
        </div>
        <p class="form-hint">注：名称不得超过15字</p>
      </div>
      <div class="foot-container">
        <el-button @click="isAddTagShow=false">取 消</el-button>
        <el-button type="primary" @click="modifyTag">确定</el-button>
      </div>
    </el-dialog>
    <!-- 查看内容弹窗 -->
    <el-dialog
      title="标签内容"
      :visible.sync="isContentDetailShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="isContentDetailShow=false"
      width="1080px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <canvas-table
          :key="canvasTableKey"
          :tableImgData="contentData"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* js */
import {tagPageColumnList} from './utils/config';
/* components */
import canvasTable from './components/canvasTable.vue';
/* api */
import {tagInterface} from '@/api/modules/semanticsApi';

export default {
  components: { canvasTable },
  data() {
    return {
      /* table */
      tableData:[],
      tableLoading:false,
      columnList:tagPageColumnList,
      currentData:{},
      operate:'add',
      searchText:'',
      /* table-content */
      contentData:{},
      canvasTableKey:0,
      /* table-page */
      currentPage:1,
      total:0,
      pageSize:10,
      /*dialog */
      isAddTagShow:false,
      isContentDetailShow:false,
    };
  },
  methods: {
    async modifyTag(){
      const {SaLabelId,LabelName} = this.currentData
      if(!this.currentData.LabelName){
        this.$message.warning("请输入标签名称")
        return
      }
      if(this.currentData.LabelName.length>15){
        this.$message.warning("标签名称过长,请重新编辑")
        return
      }
      let res = null
      if(this.operate==='edit'){
        res = await tagInterface.editTag({
          SaLabelId:SaLabelId||0,
          LabelName:LabelName||''
        })
      }else{
        res = await tagInterface.addNewTag({
          LabelName:LabelName||''
        })
      }
      if(res.Ret!==200) return
      this.$message.success(`${this.operate==='edit'?'编辑':'新增'}成功`)
      this.isAddTagShow=false
      this.currentPage=1
      this.getTableData()
    },
    getTableData(){
      this.tableLoading = true
      tagInterface.getTagList({
        PageSize:this.pageSize,
        CurrentIndex:this.currentPage||1,
        Keyword:this.searchText||''
      }).then(res=>{
        if(res.Ret!==200) return 
        const {List,Paging} = res.Data
        this.tableData = List||[]
        this.total = Paging?Paging.Totals||0:0
        this.tableLoading = false
      })
    },
    handleOperate(operate,data){
      this.operate = operate
      if(operate==='delete'){
        this.$confirm(
          '删除后不可恢复，是否确认删除该标签？',
          '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(()=>{
        tagInterface.deleteTag({
          SaLabelId:data.SaLabelId
        }).then(res=>{
          if(res.Ret!==200) return 
          this.$message.success('删除成功')
          this.currentPage=1
          this.getTableData()
        })
      }).catch(()=>{}).finally(()=>{})
      }else{
        this.currentData = _.cloneDeep(data)
        this.isAddTagShow = true
      }
    },
    checkContent(data){
      if(data.UserNum===0) return
      tagInterface.getTagUseDetail({
        LabelId:data.SaLabelId
      }).then(res=>{
        if(res.Ret!==200) return
        this.contentData = res.Data
        this.canvasTableKey++
        this.isContentDetailShow = true 
      })
    },
    handleCurrentChange(page){
      this.currentPage = page
      this.getTableData()
    },
    searchHandle(){
      this.currentPage=1
      this.getTableData()
    }
  },
  mounted(){
    this.getTableData()
  },
};
</script>

<style scoped lang="scss">
@import "./css/basePage.scss";
.document-tag-page-wrap{
  .tool-box{
    display: flex;
    justify-content: space-between;
    .el-input{
      width:300px;
    }
  }
  .table-box{
    margin-top:30px;
  }
  .el-dialog{
    .dialog-container{
      padding-bottom: 20px;
      .input-item{
        margin-bottom:10px;
      }
    }
  }
}
</style>
