<template>
  <div class="insert-page-wrap">
    <el-dialog
      :visible.sync="insertPageShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      width="1200px"
      v-dialogDrag
      center
    >
    <div slot="title" style="display: flex; alignitems: center">
      <span style="fontsize: 16px">插入PPT</span>
    </div>
    <div class="dialog-container">
      <div class="catalog-list" v-loading="listloading">
        <div class="select-wrap">
          <el-select
            filterable remote
            placeholder="请输入PPT标题"
            v-model="searchTitle"
            :remote-method="searchHandle"
            :loading="searchLoading"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-option
              v-for="item in searchOptions"
              :key="item.PptId"
              :label="item.Title"
              :value="item.PptId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tree-list">
          <el-tree
            ref="privateTree"
            class="target-tree"
            empty-text="暂无分类"
            :data="privateList"
            node-key="nodeKeyId"
            :expand-on-click-node="false"
            :default-expanded-keys="privateExpandKeys"
            @current-change="(data,node)=>{nodeChange(data,node)}"
          >
            <span class="custom-tree-node" slot-scope="{ data }">
              <span class="tree-label">{{ data.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="select-box" v-loading="dataloading">
        <p class="title">{{choosedItem.Title}}</p>
        <div class="trans-box">
          <p class="hint">请选择PPT页</p>
          <div class="trans-wrap">
              <el-transfer v-model="value" :data="transList" target-order="push"
                :titles="['未选PPT页', '已选PPT页']"
              />
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="foot-container">
        <div class="block"></div>
        <div class="btn-box">
          <el-button type="primary" @click="saveHandle">确 定</el-button>
          <el-button @click="cancelHandle">取 消</el-button>
        </div>
        
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {pptInterface } from "@/api/api.js";
import {pptEnInterface} from '@/api/modules/pptEnApi.js';
import {changeCatalogArr} from '@/views/ppt_manage/newVersion/utils/untils';
export default {
  props:{
    insertPageShow:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      searchTitle:'',
      searchOptions:[],//搜索选项
      privateList:[],//PPT私有目录
      value:[],//已选择的PPT页
      choosedItem:{PptId:0,Title:''},//选中的PPT
      pageList:[],//选中PPT的内容
      transList:[],//选中PPT的内容,但转换了格式
      dataloading:false,//PPT页数选择区的loading
      listloading:false,//PPT目录的loading
      searchLoading:false,//PPT标题搜索的loading
      privateExpandKeys:[],//PPT树形结构的默认展开项
    };
  },
  watch:{
    'choosedItem.PptId'(id){
      this.value = []
      this.pageList = []
      this.transList = []
      if(id){
        this.dataloading = true
        this.getPptDetail(id) 
      }
    },
    insertPageShow(val){
      if(val){
        this.listloading = true
        this.privateList=[]
        this.getPrivateList()
        this.choosedItem = {PptId:0,Title:''}
      }
    },
    searchTitle(newVal){
      if(!newVal) return
      let data = null
      this.privateList.forEach((item)=>{
        item.children.forEach(i=>{
          if(i.PptId===newVal){
            data = i
          }
        })
      })
      this.$refs.privateTree.setCurrentKey('ppt'+newVal)
      const node = this.$refs.privateTree.getCurrentNode()
      !this.privateExpandKeys.includes(node.catalogId)&&this.privateExpandKeys.push(node.catalogId)
      this.choosedItem = data
      this.searchOptions=[]
    }
  },
  methods: {
    cancelHandle(){this.$emit('cancel')},
    saveHandle(){
      if(this.value.length===0){
        this.$message.warning("请选择PPT页")
        return
      }
      //value里存的是pageList的index
      let choosedPages = []
      this.value.forEach(i=>{
        choosedPages.push(this.pageList[i])
      })
      this.$emit('insert',choosedPages)
    },
    async searchHandle(keyword){
      this.searchLoading = true
      const param = {
        AdminId:Number(localStorage.getItem("AdminId")),
        Keyword:keyword,
        IsPrivate:true
      }
      const res = this.$parent.currentLang!=='en'
                  ?await pptInterface.searchPPTByKeyWorld(param)
                  :await pptEnInterface.searchPPTByKeyWorld(param)
      if(res.Ret!==200) return 
      this.searchOptions = res.Data.List||[]
      this.searchLoading = false
    },
    nodeChange(data,node){
      if(data.PptId){
        this.choosedItem = data
      }else{
        this.choosedItem = {PptId:0,Title:''}
      }
    },
    async getPptDetail(id){
      const res = this.$parent.currentLang!=='en'
                  ?await pptInterface.getpptDetail({PptId:id})
                  :await pptEnInterface.getpptDetail({PptId:id})
      if(res.Ret===200){
        this.pageList = JSON.parse(res.Data.Content)
        this.transList = this.getTransList(JSON.parse(res.Data.Content))
        this.dataloading = false
      }
    },
    getTransList(data){
      let list = []
      data.forEach((item,index)=>{
        let temp = {}
        temp.key = index
        temp.label = `第${index+1}页 ${item.title||'无标题'}`
        temp.disabled = false
        list.push(temp)
      })
      return list
    },
    async getPrivateList(){
      const res = this.$parent.currentLang!=='en'
                  ?await pptInterface.getCatalogsList()
                  :await pptEnInterface.getCatalogsList()
      if(res.Ret!==200) return
      this.privateList = changeCatalogArr(res.Data.PrivateList)
      this.listloading = false
    }
  },
};
</script>

<style lang="scss">
.insert-page-wrap{
  .el-dialog__body{
    padding:0 !important;
    .catalog-list{
      .tree-list{
        .custom-tree-node {
          display: flex !important;
          justify-content: space-between;
          align-items: center;
          display: block;
          flex: 1;
          width:calc(100% - 28px);
          .node_label {
            margin-right: 2px;
          }
          .tree-label{
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
          }
        }
        .target-tree{
          .el-tree-node__content {
            &:hover{
                background-color: #ECF5FF !important;
            }
          }
          .el-tree-node:focus>.el-tree-node__content {
            background-color: #ECF5FF !important;
          }
          .el-tree-node.is-current > .el-tree-node__content {
            background-color: #ECF5FF !important;
            color:#409EFF;
          }
          .expanded.el-icon-caret-right:before {
            content: url('~@/assets/img/set_m/down.png') !important;
          }
          .el-icon-caret-right:before {
            content: url('~@/assets/img/set_m/slide.png') !important;
          }
          .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
            content: '' !important;
          }
          .el-tree-node__expand-icon.expanded {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
        }
      }
    }
    .select-box{
      .el-transfer{
        .el-transfer__buttons{
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding:0 15px;
          .el-transfer__button{
            width:30px;
            height:30px;
            padding:0;
            text-align: center;
            line-height: 30px;
            margin:10px 0;
          }
        }
        .el-transfer-panel{
          flex:1;
          .el-transfer-panel__body{
            height:calc(100% - 40px);
            .el-transfer-panel__list{
              height: 100%;
              overflow-x: hidden;
              .el-transfer-panel__item{
                width:100%;
              }
            }
          }
        }
      }
    }
  }
  .el-dialog__footer{
    padding-top:0;
    padding-bottom: 40px;
  }
}
</style>
<style scoped lang="scss">
.insert-page-wrap{
  &::-webkit-scrollbar-track{
    display: none;
  }
  div::-webkit-scrollbar-track{
    display: none;
  }
  .dialog-container{
    display: flex;
    padding:40px 100px;
    .catalog-list{
      width:30%;
      padding-right: 24px;
      border-right:1px solid #ECECEC ;
      .select-wrap{
        margin-bottom: 20px;
        .el-select{
          width:100%;
        }
      }
      .tree-list{
        padding:15px;
        height: 500px;
        border:1px solid #ECECEC;
        border-radius: 8px;
        overflow-y: scroll;
        
      }
    }
    .select-box{
      margin-left: 24px;
      flex: 1;
      .title{
        height:25px;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
      }
      .trans-box{
        margin-top:15px;
        .hint{
          color:#999999;
        }
        .trans-wrap{
          height:500px;
          .el-transfer{
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: space-between;
          }
        }
      }
    }
  }
  .foot-container{
    display: flex;
    .block{
      width:30%;
    }
    .btn-box{
      flex:1;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
