<template>
  <!-- 文档管理 -->
  <div class="document-file-page-wrap">
    <!-- 目录栏 -->
    <div class="catalog-wrap page-block-wrap catalog-block" id="left">
      <div class="btn-box">
        <el-button type="primary" @click="toPage('addFile')">添加文档对比</el-button>
        <!-- <el-button type="primary" plain @click="toPage('tag')">标签管理</el-button> -->
      </div>
      <div class="select-wrap">
        <el-select
          filterable remote
          placeholder="请输入文件名称"
          v-model="searchTitle"
          :remote-method="searchHandle"
          clearable
          value-key="SaCompareId"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-option
            v-for="item in searchOptions"
            :key="item.SaCompareId"
            :label="item.Title"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="catalog-list-wrap">
        <div class="catalog-list">
          <el-tree
              ref="catalogTree"
              class="catalog-tree other-tree"
              empty-text="暂无分类"
              :data="listData"
              node-key="nodeKeyId"
              :expand-on-click-node="true"
              :default-expanded-keys="expandKeys"
              draggable
              :allow-drag="checkAllowDrag"
              :allow-drop="checkAllowDrop"
              @node-drop="handleDropOver"
              @node-expand="handleNodeExpand"
              @node-collapse="handleNodeCollapse"
              @current-change="(data,node)=>{nodeChange(data,node)}"
            >
              <span class="custom-tree-node" slot-scope="{ data,node }"
              >
                <span class="tree-label">{{ data.label }}</span>
                <span style="display: flex; align-items: center"
                  v-if="data.nodeKeyId===selectNodeKey"
                >
                  <img
                    :src="require('@/assets/img/set_m/edit.png')"
                    alt="" v-if="node.level!==2"
                    style="width: 14px; height: 14px; margin-right: 5px"
                    @click.stop="clickNodeHandle('edit', data)"
                  />
                  <img
                    :src="require('@/assets/img/set_m/del.png')"
                    alt=""
                    style="width: 14px; height: 14px; margin-right: 5px"
                    @click.stop="clickNodeHandle('del', data)"
                  />
                </span>
              </span>
          </el-tree>
        </div>
      </div>
      <div class="catalog-tool">
        <div class="add-catalog" @click="isModifyClassifyShow=true">
          <img
            src="~@/assets/img/set_m/add_ico.png"
            alt=""
            style="width: 16px; height: 16px; margin-right: 6px"
          />
          <span>添加分类</span>
        </div>
        <span class="total-text" v-if="selectNode&&model==='list'">共{{catalogList.length}}个文档</span>
      </div>
      <span class="move-btn resize" v-drag id="resize"></span>
    </div>
    <div class="detail-wrap page-block-wrap catalog-block" id="right">
      <!-- 列表栏 -->
      <div class="detail-list overflow-hide-scrollbar" v-if="model==='list'">
          <!-- 选择一级分类不再展示列表 -->
        <!-- <draggable
            class="drag-cont"
            v-model="catalogList"
            animation="300"
            @start="dragStartHandler"
            @update="dragenter"
            @end="moveListItem"
            :disabled="true"
            >
            <div class="list-item" 
              v-for="item in catalogList" :key="item.nodeKeyId"
              @click="changeModel('file',item)"
              >
              <div class="item-title">
                <span>{{item.label}}</span>
                <img
                  src="~@/assets/img/data_m/move_ico.png"
                  style="width: 14px; height: 14px; margin-right: 8px"
                />
              </div>
              <div style="height:1px;background:#ECECEC;margin:0 -10px;"></div>
              <div class="item-image" :style="`background-image:url(${item.ResultImg?item.ResultImg:require('@/assets/img/document_m/default-img.png')})`"></div>
              <div style="height:1px;background:#ECECEC;margin:0 -10px;"></div>
              <div class="item-info">
                <span style="font-size:14px;">创建时间：{{item.CreateTime}}</span>
                <span>{{item.SysAdminName}}</span>
              </div>
            </div>
          </draggable> -->
          <div class="empty" v-if="catalogList.length===0">
            <tableNoData text="暂无数据"/>
          </div>
      </div>
      <!-- 文件详情 -->
      <div class="detail-file" v-else>
        <div class="file-info">
          <ul>
            <li>{{semanticInfo.Title}}</li>
            <li style="margin-left:auto;">作者：{{semanticInfo.SysAdminName}}</li>
            <li>创建时间：{{semanticInfo.CreateTime}}</li>
            <li style="min-width: auto;"><el-button type="primary" @click="handleEdit('file',selectNode)">编辑</el-button></li>
          </ul>
          <div class="pic-wrap">
            <img class="pic" :src="semanticInfo.ResultImg" v-if="semanticInfo.ResultImg">
            <div class="empty" v-if="!semanticInfo.ResultImg">
              <img src="~@/assets/img/document_m/default-img.png" style="
                display: block;
                width: 120px;
                height: 120px;
                margin: 5% auto 10px;
              "/>
              暂无图片信息
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <!-- 添加/编辑分类弹窗 -->
     <el-dialog
      :title="classifyForm.classify_id?'编辑分类':'添加分类'"
      :visible.sync="isModifyClassifyShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="isModifyClassifyShow=false"
      width="589px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <el-form
          ref="formRef"
          label-position="left"
          hide-required-asterisk
          label-width="80px"
          :model="classifyForm"
          :rules="classifyFormRules"
        >
          <el-form-item label="分类名称" prop="classify_name">
            <el-input
              v-model="classifyForm.classify_name"
              style="width: 80%"
              placeholder="请输入分类名称"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="foot-container">
        <el-button @click="isModifyClassifyShow=false">取 消</el-button>
        <el-button type="primary" @click="modifyClassify">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* js */
import catalogMixin from "./mixins/catalogMixin";
import { formatArr } from './utils/index';
/* components */
//import draggable from 'vuedraggable';
/* api */
import {semanticInterface} from '@/api/modules/semanticsApi.js';
export default {
  mixins:[catalogMixin],
  components:{/*draggable*/},
  data() {
    return {
      classifyForm:{},//分类信息
      classifyFormRules:{
        classify_name:[{ required: true, message: "分类名称不能为空"}],
      },//分类校验规则
      isModifyClassifyShow:false,//控制分类显示弹窗
      semanticInfo:{},//语义分析详情
    };
  },
  watch:{
    searchTitle(newVal){
      const {SaCompareId,ClassifyId} = newVal
      if(SaCompareId&&ClassifyId){
        this.handleNodeExpand({nodeKeyId:ClassifyId+''})
        this.nodeChange({SaCompareId,nodeKeyId:`children_${SaCompareId}`},{level:2})
        this.searchOptions = []
      }
    }
  },
  methods: {
    //搜索语义分析
    searchHandle(keyword){
      semanticInterface.getSemanticList({
        PageSize:1000,
        CurrentIndex:1,
        Keyword:keyword
      }).then(res=>{
        if(res.Ret!==200) return 
        this.searchOptions = res.Data.List||[]
      })
    },
    //获取分类列表
    async getListData(){
      await semanticInterface.getClassifyList().then(res=>{
        if(res.Ret!==200) return 
        this.listData = formatArr(res.Data||[],'SaCompareClassifyId','SaCompareId')
      })
    },
    //获取语义分析详情
    getDetail(data){
      //不用请求接口，展示信息和图片即可
      //console.log('selectNode',this.selectNode)
      this.semanticInfo = _.cloneDeep(this.selectNode)
    },
    //新增/编辑分类
    async modifyClassify(){
      let res = null
      let flag = false
      const {classify_id,classify_name} = this.classifyForm
      this.$refs.formRef.validate((valid) => {
        flag = valid
      })
      if(!flag) return
      if(classify_id){
        res = await semanticInterface.editClassify({
          SaCompareClassifyId:Number(classify_id),
          ClassifyName:classify_name,
        })
      }else{
        res = await semanticInterface.addNewClassify({
          ClassifyName:classify_name,
        })
      }
      if(res.Ret!==200) return
      this.$message.success(`${classify_id?'编辑':'新增'}成功`)
      await this.getListData()
      if(classify_id){
        const catalog = this.listData.find(item=>{return item.nodeKeyId===classify_id})
        catalog&&this.nodeChange(catalog,{level:1})
      }
      this.clearForm()
    },
    //删除分类
    async deleteClassify(data){
      await semanticInterface.deleteClassify({
        SaCompareClassifyId:Number(data.SaCompareClassifyId)
      }).then(res=>{
        if(res.Ret!==200) return 
        this.$message.success('删除成功')
        this.clearForm()
      })
    },
    //删除语义分析
    async deleteDocument(data){
      await semanticInterface.deleteSemantic({
        SaCompareId:Number(data.SaCompareId)
      }).then(async res=>{
        if(res.Ret!==200) return
        this.$message.success('删除成功')
        this.chooseDataClassify(data)
      })
    },
    //切换页面
    toPage(pageName,params){
      const routerPathMap = {
        'addFile':'/addSemantics',
        'editFile':'/editSemantics',
        'tag':'/tagPage'
      }

      /* this.$router.push({
        path:routerPathMap[pageName],
        query:params||{}
      }) */
      //新增一页打开
      let {href} = this.$router.resolve({
        path:routerPathMap[pageName],
        query:params||{}
      })
      window.open(href,'_blank')
    },
    //移动语义分析
    moveCompare(moveParams){
        semanticInterface.moveCompare(moveParams).then(async res=>{
            if(res.Ret!==200) return 
            await this.getListData()
            this.handleNodeExpand({
                nodeKeyId: moveParams.SaCompareClassifyId
            })
            this.nodeChange({
                SaCompareId:moveParams.SaCompareId,
                nodeKeyId:`children_${moveParams.SaCompareId}`},
                {
                    level:2
                })
        })
    }
  },
};
</script>

<style lang="scss">
@import "./css/catalogTree.scss";
</style>

<style scoped lang="scss">
@import "./css/basePage.scss";
@import "./css/catalogPage.scss";
.document-file-page-wrap{
  display: flex;
  width: 100%;
  .detail-file{
    .file-info{
      padding:20px 30px;
      flex:1;
      display: flex;
      flex-direction: column;
      ul{
        flex: none;
        margin-right: 0;
        justify-content: space-between;
        align-items: center;
        li{
          &:last-child{
            margin-right: 0;
            text-align: right;
          }
        }
      }
      .pic-wrap{
        flex: 1;
        margin-top:20px;
        width:100%;
        color: #999999;
        position: relative;
        overflow: hidden;
        .pic{
          width:100%;
          height: 100%;
        }
      }
    }
  }
  .dialog-container{
    padding: 0 35px;
  }  
}
</style>
