<template> 
    <div class="designer">
        <div class="title">
            <h3>设计器</h3>
        </div>
        <div class="designer-search-content">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" class="fr" @click="backInfo">返回</el-button>
        </div>
        <div class="print-designer-container">
            <el-row class="con-row">
                
                <el-col :span="2" :offset="2" class="con-title">标题：</el-col>
                <el-col :span="6">
                    <el-input v-model="templateTitle"></el-input>
                </el-col>
                <el-col :offset="2" :span="2" class="con-title">关联流程：</el-col>
                <el-col :span="6">
                    <el-select v-model="process">
                        <el-option
                        v-for="item in processOption"
                        :key="item.value"
                        :lable="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <!-- <el-row class="con-row">
                <el-col :span="2">关联流程：</el-col>
                <el-col :span="6">
                    <el-select v-model="process">
                        <el-option
                        v-for="item in processOption"
                        :key="item.value"
                        :lable="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="16"></el-col>
            </el-row> -->
            <el-row class="con-row">
                <el-col :span="4">
                    <el-tabs class="bus-type">
                        <el-tab-pane label="系统">
                            <el-tree
                                :data="systemData"
                                :props="systemProps"
                                accordion
                                @dblclick.native="sysDblclick"
                                @node-click="sysNodeClick"
                            ></el-tree>
                        </el-tab-pane>
                        <el-tab-pane label="流程">
                            <el-tree
                                :data="proData"
                                :props="proProps"
                                accordion
                                @dblclick.native="proDblclick"
                                @node-click="proNodeClick"
                            ></el-tree>
                        </el-tab-pane>
                        <el-tab-pane label="业务">
                            <el-tree
                            :data="busData"
                            :props="busProps"
                            accordion
                            @dblclick.native="busDblclick"
                            @node-click="busNodeClick"></el-tree>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
                <el-col :span="20">
                    <div id="editor" type="text/plain"></div>
                </el-col>
            </el-row>
        </div>
    </div> 
</template> 

<script>
import '../../../static/Ueditor/ueditor.config.js';
import '../../../static/Ueditor/ueditor.all.js'; 
import '../../../static/Ueditor/ueditor.parse.js';
import '../../../static/Ueditor/lang/zh-cn/zh-cn.js'; 
export default {
  data(){
    return{
      busContentData:'',
      templateTitle:'',
      busClickData:'',
      busClickNode: '',
      sysClickData:'',
      sysClickNode: '',
      systemData: [],
      systemProps:{
          label:'label',
          children: 'children'
      },
      proData: [],
      proProps:{
          label:'label',
          children: 'children'
      },
      busData:[],
      busProps:{
          label:'label',
          children: 'children'
      },
      orginalTpl:'',
      Ueditor: '',
      title:'',
      associatedProcesses:'',//关联流程
      processOption: [
          {
              label: '暂无',
              value: '暂无'
          }
      ],
      process:'',//流程下拉框数据
    }
  },
  methods:{
      sysNodeClick(data,node){
          this.sysClickData = data;
          this.sysClickNode = node;
      },
      sysDblclick(){
          var data = this.sysClickData;
          var node = this.sysClickNode;
          var pPname = node.parent.parent.data.name || '';
          var pName = node.parent.data.name || '';
          name = pPname +'.'+ pName +'.'+ node.data.name;
          if(data.isProperty === true){
              this.Ueditor.setContent("["+ name+"]",true);
          }
      },
      proNodeClick(data,node){
          this.proClickData = data;
          this.proClickNode = node;
      },
      proDblclick(){
          var data = this.proClickData;
          var node = this.proClickNode;
          var pPname = node.parent.parent.data.name || '';
          var pName = node.parent.data.name || '';
          name = pPname +'.'+ pName +'.'+ node.data.name;
          if(data.isProperty === true){
              this.Ueditor.setContent("["+ name+"]",true);
          }
      },
      busNodeClick(data,node){
          this.busClickData = data;
          this.busClickNode = node;
      },
      busDblclick(){
          var data = this.busClickData;
          var node = this.busClickNode;
          var pName = node.parent.data.name || '';
           if(node.parent.data.primary === true){
              name = node.data.name;
          } else{
              name = pName +'.'+ node.data.name;
          }
          if(data.isProperty === true){
              this.Ueditor.setContent("["+ name+"]",true);
          }
      },
      getBus(){
        const self = this;
        var currentTpl = JSON.parse(window.localStorage.getItem('currentTpl'));
        this.orginalTpl = JSON.parse(JSON.stringify(currentTpl));
            // window.localStorage.clear();
        var submitData = {
            id: currentTpl.templateDescription
        };
        this.$http({
            url: '/ifbp-app-sm-infoset-web/scene/queryPubSceneMsgSetting',
            method:'post',
            data: submitData,
            dataType: 'json'
        }).then((res) => {
            if(res.data.success === true) {
                self.busData.push(res.data.data);
            } else if(res.data.success === false){
                self.$message({
                    message: "请求出错",
                    type: 'error'
                });
                }
        }).catch(() => {
            self.$message({
                message: '请求出错',
                type: 'error'
            });
        });
        this.$http({
            url: '/ifbp-msg/msg/' +  currentTpl.pkMsgTemplate,
            method:'get',
            dataType: 'json'
        }).then((res) => {
            if(res.data.success === true) {
                var contentData = JSON.parse(JSON.stringify(res.data.data));
                self.templateTitle = contentData.title;
                self.busContentData = contentData.content;
                self.Ueditor = UE.getEditor('editor');
                self.Ueditor.addListener("ready", function () {
                    if(self.busContentData){
                        self.Ueditor.setContent(self.busContentData); // 确保UE加载完成后，放入内容。
                    } else {
                        self.Ueditor.setContent('');
                    }
                    self.Ueditor.addListener('click',self.selectVariableByClick);
                    self.Ueditor.addListener('keyup',self.selectVariable);
                });
            } else{
                self.Ueditor = UE.getEditor('editor');
            }
        }).catch(() => {
            self.$message({
                message: '请求出错',
                type: 'error'
            });
        });
        },
        save(){
            const self = this;
            if(this.Ueditor.hasContents()){
                var template = {
                    pkMsgTemplate: self.orginalTpl.pkMsgTemplate,
                    templateContent: self.Ueditor.getContent(),
                    templateTitle: self.templateTitle
                };
                this.$http({
                url: '/ifbp-msg/msg/saveTemplateContent',
                method:'post',
                data: template,
                dataType: 'json'
            }).then((res) => {
                if(res.data.success === true) {
                    self.$message('保存成功');
                    this.$router.push('/messageTemplate');
                } else if(res.data.success === false){
                    self.$message({
                        message: "请求出错",
                        type: 'error'
                    });
                    }
            }).catch(() => {
                self.$message({
                    message: '请求出错',
                    type: 'error'
                });
            });
        }
        },
        backInfo(){
            this.$router.push('/messageTemplate');
        },
        // 鼠标移到变量上的时候选中整个变量
        selectVariable(){
            var pattern = /\[(.)*\]/;
            var range = this.Ueditor.selection.getRange();
            var str = range.startContainer.data;
            if(pattern.test(str)){
                range=range.selectNode(range.startContainer);
                range.adjustmentBoundary();
                range.select();
            }
        },
        // 单击变量的时候选中整个变量
        selectVariableByClick(){
            var pattern = /\[(.)*\]/;
            var range = this.Ueditor.selection.getRange();
            var str = range.startContainer.data;
            if(pattern.test(str)){
                range=range.selectNode(range.startContainer);
                range.adjustmentBoundary();
                range.select();
            }
        },
  },
  created(){
  },
  mounted(){
    this.getBus();
  },
  destroyed(){
    this.Ueditor.destroy();
  },
} 
</script> 
<style scope>
.designer{
    font-size:16px;
    padding: 20px;
}
.title h3{
    font-size: 16px;
}
.designer-search-content{
    height: 56px;
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #e3e3e3;
}
.mes-left{
    text-align: center;
}
.print-designer-container{
    box-sizing:  border-box;
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    /* min-height: 400px; */
}
.bus-type{
    padding-right: 20px;
    min-height: 300px;
}
#editor{
    min-height: 300px;
}
</style>
<style>
.con-row{
    margin-top:20px;
}
.con-title{
    line-height: 36px;
}
</style>

