<template>
  <div class="CommonProblem">
    <div class="CProMain">
      <div class="CProTop">
        <div>
          <span>常见问题</span>
        </div>
      </div>
      <div class="CProCenter">
        <div class="CProCLeft">
          <div class="CProCLeftTop">
            <div>
              <span>常见问题分类</span>
            </div>
            <div style="text-align:right" v-if="CommonProblemBtn.CommonProblemBtn43">
              <el-button type="primary" round @click="addProject('','','')">新增</el-button>
            </div>
          </div>
          <el-tree :data="TypeList" :props="defaultProps" @node-click="handleNodeClick">
            <span
              class="custom-tree-node"
              slot-scope="{ node,data}"
              @mouseover="mouseOver(data)"
              @mouseleave="mouseLeave(data)"
            >
              <span class="labelTitle">{{ node.label }}</span>
              <span v-if="data.isShowIcon&&data.parentId==0" class="labelIcon">
                <el-button type="text" size="mini" @click.stop="addProject(data.id,'','')" v-if="CommonProblemBtn.CommonProblemBtn43">
                  <i class="el-icon-circle-plus"></i>
                </el-button>
              </span>

              <span v-if="data.isShowIcon&&data.parentId!=0" class="labelIcon">
                <el-button v-if="CommonProblemBtn.CommonProblemBtn44" type="text" size="mini" @click.stop="addProjectChild(data.parentId,data.id,'','')">
                  <i class="el-icon-circle-plus"></i>
                </el-button>
                <el-button v-if="CommonProblemBtn.CommonProblemBtn45" type="text" size="mini" @click.stop="addProject(data.parentId,data.label,data.id)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button v-if="CommonProblemBtn.CommonProblemBtn46" type="text" size="mini" @click.stop="deleteProject(e,data.id)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>

            </span>
          </el-tree>
        </div>
        <div class="CProCRight">
          <div class="CProCRightTop">
            <div>
              <span>{{QuestionTitle}}</span>
            </div>
            <div v-if="Isquestion==1">
              <el-button type="primary" plain round @click="editAsk">编辑答案</el-button>
            </div>
          </div>
          <div v-if="Isquestion==1" v-html="questionContent">
            {{questionContent}}
          </div>
          <div style="padding:20px; height: 75%;" v-if="isAsk==1">
            <el-upload
            class="avatar-uploader" style="display:none"
            ref="fileUpload"
            action="https://app.edtyun.com:8443/business/common/upload"
            :headers="{'Authorization':token}"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
            >
            </el-upload>
            <quill-editor v-model="content" ref="myQuillEditor" class="editor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </div>
          <div style="text-align:center" v-if="isAsk==1">
              <el-button type="primary" @click="saveAsk">保 存</el-button>
              <el-button @click="unSave">取 消</el-button>
          </div>
          <el-tree v-if="Isquestion!=1&&isAsk!=1" :data="QuestionList" :props="defaultProps1" @node-click="handleNodeClick1">
            <span
              class="custom-tree-node"
              slot-scope="{ node,data}"
              @mouseover="mouseOver1(data)"
              @mouseleave="mouseLeave1(data)"
            >
              <span
                class="labelTitle"
              >{{(data.Pserial==undefined?"":(data.Pserial+"."))+(node.label) }}</span>
              <span v-if="data.isShowIcon" class="labelIcon">
                <el-button v-if="CommonProblemBtn.CommonProblemBtn45" type="text" size="mini" @click.stop="addProjectChild(data.PparentId,data.parentId,data.id,data.content,data.description)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button v-if="CommonProblemBtn.CommonProblemBtn46" type="text" size="mini" @click.stop="deleteProject(data.id)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <!--新增问题分类-->
    <div class="addProblem">
      <el-dialog
        :title="IsPro==1?'编辑问题分类':'新增问题分类'"
        :visible.sync="dialogaddProblem"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-form :model="addProblem" :inline="true" label-position="left">
            <el-row>
              <span style="display: inline-block;margin-top: 12px;color: #F56C6C;">*</span>
              <el-form-item label="问题类别：" :xs="24" :sm="24" :md="24" :lg="24">
                <el-select v-model="addProblem.parentId" placeholder="请选择问题类别">
                  <el-option
                    v-for="item in ProjectList"
                    :key="item.id"
                    :label="item.content"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <span style="display: inline-block;margin-top: 12px;color: #F56C6C;">*</span>
              <el-form-item label="问题标题：" :xs="24" :sm="24" :md="24" :lg="24">
                <el-input v-model="addProblem.content" placeholder="请填写问题标题"></el-input>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button type="primary" @click="addProblemSubmit">确 定</el-button>
          <el-button @click="dialogaddProblem = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!--新增问题-->
    <div class="addProblemChild">
      <el-dialog
        title="新增问题分类"
        :visible.sync="dialogaddProblemChild"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-form :model="addProblemChild" :inline="true" label-position="left">
            <el-row>
              <span style="display: inline-block;margin-top: 12px;color: #F56C6C;">*</span>
              <el-form-item label="问题类别：" :xs="24" :sm="24" :md="24" :lg="24">
                <el-select v-model="addProblemChild.parentId" placeholder="请选择问题类别">
                  <el-option
                    v-for="item in ProjectListChild"
                    :key="item.id"
                    :label="item.content"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <span style="display: inline-block;margin-top: 12px;color: #F56C6C;">*</span>
              <el-form-item label="问题标题：" :xs="24" :sm="24" :md="24" :lg="24">
                <el-input v-model="addProblemChild.content" placeholder="请填写问题标题"></el-input>
              </el-form-item>
            </el-row>

           
            <!-- <div>
              <quill-editor v-model="addProblemChild.description" ref="myQuillEditor" class="editor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
              </quill-editor>
            </div> -->
            <el-row>
              <span style="display: inline-block;margin-top: 12px;color: #F56C6C;">*</span>
              <el-form-item label="问题描述：" >
                <el-input type="textarea" v-model="addProblemChild.description" placeholder="请填写问题描述"></el-input>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button type="primary" @click="addProblemChildSubmit">确 定</el-button>
          <el-button @click="dialogaddProblemChild = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="delete">
      <el-dialog
        title="删除问题"
        :visible.sync="dialogdelete"
        width="30%"
        :before-close="handleClose"
      >
        <p>确定删除该问题吗？</p>
        <div slot="footer" class="dialog-footer Txc">
          <el-button type="primary" @click="submitdelete">确 定</el-button>
          <el-button @click="dialogdelete = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import '../../../../assets/css/font.css'

// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  // ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  // [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{'direction': 'rtl'}], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['image'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  components: {
      quillEditor
    },
  name: "CommonProblem",
  data() {
    return {
      fileUpload:{
        file:null
      },
      token:'',
      quillUpdateImg:true,
      dialogdelete:false,
      deleteProId:"",
      dataList: "",
      TypeList: [],
      QuestionTitle: "",
      QuestionList: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      defaultProps1: {
        children: "children",
        label: "content"
      },
      dialogaddProblem:false,
      dialogaddProblemChild:false,
      addProblemChild:{
        parentId:"",
        content:"",
        description:""
      },
      addProblem:{
        parentId:"",
        content:"",
      },
      ProjectList:[],
      ProjectListChild:[],
      handleClose:null,
      ids:"",
      idsChild:"",
      idsChildAsk:"",
      idsChildAskP:"",
      IsPro:"",
      IsProChild:"",
      IsProChildAsk:"",
      Isquestion:0,
      isAsk:0,
      questionContent:"",
      
      //
      content:"",
      editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
                'image': function (value) {
                if (value) {
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      },
      CommonProblemBtn:{
        CommonProblemBtn42:0,
        CommonProblemBtn43:0,
        CommonProblemBtn44:0,
        CommonProblemBtn45:0,
        CommonProblemBtn46:0,
        CommonProblemBtn47:0,
        CommonProblemBtn48:0,
      }
    };
  },
  created() {
    
    this.showProject()
    // var newArr = data.map((item, index, arr) => {
    //   if (item.type == 1 && item.parentId == 0) {
    //     var json = {};
    //     var json1 = {};
    //     json.label = item.content;
    //     json.serial = item.serial;
    //     json.id = item.id;

    //     console.log(item, index, arr);
    //   }

    // });
    // console.log();
    this.token = JSON.parse(sessionStorage.getItem('token'))


    var CommonProblemBtn = {}
    this.getButton(41).then(result => {
      if (result.data.statusCode==="1") {
        CommonProblemBtn = result.data.data
        CommonProblemBtn.map((item)=>{
          if(item.id==42){
            this.CommonProblemBtn.CommonProblemBtn42 = item.checked?1:0 
          }else if(item.id==43){
            this.CommonProblemBtn.CommonProblemBtn43 = item.checked?1:0 
          }else if(item.id==44){
            this.CommonProblemBtn.CommonProblemBtn44 = item.checked?1:0 
          }else if(item.id==45){
            this.CommonProblemBtn.CommonProblemBtn45 = item.checked?1:0 
          }else if(item.id==46){
            this.CommonProblemBtn.CommonProblemBtn46 = item.checked?1:0 
          }else if(item.id==47){
            this.CommonProblemBtn.CommonProblemBtn47 = item.checked?1:0 
          }else if(item.id==48){
            this.CommonProblemBtn.CommonProblemBtn48 = item.checked?1:0 
          }
        })
      }
    });
  },
  
  methods: {
    uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
    },
    uploadSuccess(res, file){
      // 首先获取富文本编辑器的实例
      let quill = this.$refs.myQuillEditor.quill
      // 上传成功所执行
      if (res.statusCode == 1 && res.data !== null) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片res为服务器返回的数据
          quill.insertEmbed(length, 'image', res.data)
          // 光标移动至文本末端
          quill.setSelection(length + 1)
          console.log(this.content)
      } else {
          this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    beforeUpload(file) {
      this.fileUpload.file=file;
        // 显示loading动画
        this.quillUpdateImg = true
    },
    ///
    onEditorBlur () {
      // 失去焦点事件
    },
    onEditorFocus () {
      // 获得焦点事件
    },
    onEditorChange () {
      // 内容改变事件
    },
    //排序
    compare(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    editAsk(){
      this.Isquestion = 0;
      this.isAsk =1;
      if(this.questionContent){
        this.content = this.questionContent
      }else{
        this.content=""
      }
    },
    unSave(){
      this.Isquestion = 1;
      this.isAsk =0;
    },
    saveAsk(){
      var url=""
      var param={}
      if(this.IsProChildAsk==1){
        url = "system/faq/update"
        param.id = this.idsChildAsk;
        param.content	 = this.content
      }else{
        url = "system/faq/add"
        param.content = this.content
        param.parentId = this.idsChildAskP
        param.type = 3
      }
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.Isquestion = 1;
          this.isAsk =0;
          this.questionContent = this.content
        }else{
          this.$message.error(data.message);
        }
      });

    },
    handleNodeClick(data) {
      this.Isquestion=0
      this.isAsk=0
      console.log(data)
      this.findQuestList(data);
    },
    handleNodeClick1(data) {
      console.log(data);
      this.QuestionTitle = data.content
      this.showQuestion(data)
    },
    showQuestion(data){
      console.log(data)
      this.idsChildAskP = data.id
      var url = "system/faq/list";
      var param = {
        type:3,
        parentId:data.id,
      }
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode=="1"){
          this.IsProChildAsk = 1
          this.questionContent = data.data[0].content
          this.idsChildAsk = data.data[0].id
          
          this.Isquestion = 1
        }else if(data.statusCode=="9"){
          this.IsProChildAsk = 0;
          this.Isquestion = 1
        }else{
          this.$message.error(data.message);
        }
      });
    },
    
    mouseOver(data) {
      this.$set(data, "isShowIcon", true);
      // console.log(data)
    },
    mouseLeave(data) {
      this.$set(data, "isShowIcon", false);
      // console.log(data)
    },
    mouseOver1(data) {
      this.$set(data, "isShowIcon", true);
      // console.log(data)
    },
    mouseLeave1(data) {
      this.$set(data, "isShowIcon", false);
      // console.log(data)
    },
    //默认问题函数
    findQuestList(Pdata) {
      if (Pdata.Pserial == undefined && Pdata.PContent == undefined) {
        this.QuestionTitle = Pdata.label;
      } else {
        this.QuestionTitle =
         Pdata.PContent + " > " + Pdata.label;
      }
      this.QuestionList = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if (
          this.dataList[i].type == 2 &&
          this.dataList[i].parentId == Pdata.id
        ) {
          this.dataList[i].PsortId = Pdata.serial;
          this.dataList[i].PparentId = Pdata.parentId
          this.QuestionList.push(this.dataList[i]);
        }
      }
      this.QuestionList.sort(this.compare("serial"));
      console.log(this.QuestionList);
    },
    showProject(){
      var data = [];
      //数据列表接口
      var url = "system/faq/child";
      this.axios.post(url).then(result => {
        data = result.data
        this.dataList = data;
      //默认问题
      var Pdata = "";
      for (var i = 0; i < data.length; i++) {
        //一类标题
        var json = {};
        if (data[i].type == 1 && data[i].parentId == 0) {
          json.label =  data[i].content;
          json.serial = data[i].serial;
          json.parentId = data[i].parentId;
          json.type = data[i].type;
          json.id = data[i].id;
          json.children = [];
          for (var j = 0; j < data.length; j++) {
            //二类标题
            var json1 = {};
            if (data[j].type == 1 && data[j].parentId == json.id) {
              console.log(data[j]);
              json1.label =
                data[j].content;
              json1.serial = data[j].serial;
              json1.Pserial = data[i].serial;
              json1.parentId = data[j].parentId;
              json1.PContent = data[i].content;
              json1.type = data[j].type;
              json1.id = data[j].id;
              json.children.push(json1);
            }
          }
          json.children.sort(this.compare("serial"));
          this.TypeList.push(json);
        }
        // console.log(json)
      }
      this.TypeList.sort(this.compare("serial"));
      console.log(this.TypeList);

      
        
        Pdata = this.TypeList[0];
        this.handleNodeClick(Pdata);
      //默认问题列表
      
        console.log(Pdata)
      });
    
    },
    addProject(id,label,idss){
      this.addProblem.parentId=""
      this.addProblem.content=""
      this.getCPList(id);
      this.addProblem.content = label
      this.ids = idss
      if(label){
        this.IsPro=1;
      }else{
        this.IsPro=0
      }
      this.dialogaddProblem = true;
    },
    deleteProject(id){
      this.deleteProId = id;
      this.dialogdelete = true
    },
    submitdelete(){
      var url="system/faq/delete"
      var param={
        id:this.deleteProId
      }
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.TypeList = []
          this.showProject()
          this.dialogdelete = false;
        }else{
          this.$message.error(data.message);
        }
      });
    },
    addProjectChild(Pid,id,ids,label,description){
      console.log(Pid,id)
      this.addProblemChild.parentId=""
      this.addProblemChild.content=""
      this.addProblemChild.description=""
      this.getCPCList(Pid,id);
      this.addProblemChild.content=label
      this.addProblemChild.description=description
      this.idsChild = ids
      if(label){
        this.IsProChild=1;
      }else{
        this.IsProChild=0
      }
      this.dialogaddProblemChild = true;
    },
    getCPList(id){
      var url = "system/faq/list";
      var param = {
        type:1,
        parentId:0,
      }
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.ProjectList = data.data
          this.addProblem.parentId = String(id)
          
        }else{
          this.$message.error(data.message);
        }
      });
    },
    getCPCList(Pid,id){
      var url = "system/faq/list";
      var param = {
        type:1,
        parentId:Pid,
      }
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.ProjectListChild = data.data
          console.log(id)
          this.addProblemChild.parentId = String(id)
          
        }else{
          this.$message.error(data.message);
        }
      });
    },
    addProblemSubmit(){
      var url=""
      var param={}
      if(this.IsPro==1){
        url = "system/faq/update"
        param.id = this.ids;
        param.content	 = this.addProblem.content
      }else{
        url = "system/faq/add"
        param = this.addProblem
        param.type = 1
      }
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.TypeList = []
          this.showProject()
          this.dialogaddProblem = false;
        }else{
          this.$message.error(data.message);
        }
      });
    },
    addProblemChildSubmit(){
      var url=""
      var param={}
      if(this.IsProChild==1){
        url = "system/faq/update"
        param.id = this.idsChild;
        param.content	 = this.addProblemChild.content
        param.description	 = this.addProblemChild.description
      }else{
        url = "system/faq/add"
        param = this.addProblemChild
        param.type = 2
      }
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"){
          this.TypeList = []
          this.showProject()
          this.dialogaddProblemChild = false;
        }else{
          this.$message.error(data.message);
        }
      });
    }
    
  }
};
</script>
<style lang="stylus">
.CommonProblem {
  height: 100%;

  .CProMain {
    height: 100%;
    background: #fff;

    .CProTop {
      border-bottom: 2px solid #f0f3f4;
      padding: 8px 10px;

      div {
        display: inline-block;
        width: 50%;

        span {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }

    .el-tree {
      padding: 10px 0;

      .el-tree-node__content:hover, .el-tree-node__content:focus {
        background: rgba(64, 169, 255, 0.17);
      }

      .custom-tree-node {
        width: 100%;

        .labelTitle {
          display: inline-block;
          width: 70%;
          font-size: 14px;
        }

        .labelIcon {
          display: inline-block;
          width: 30%;

          .el-button {
            padding: 2px;
            margin-left: 2px;
          }
        }
      }
    }

    .CProCenter {
      padding: 20px;
      height:100%

      .CProCLeft {
        display: inline-block;
        background: rgba(250, 250, 250, 1);
        width: 30%;
        margin-right: 5%;

        .CProCLeftTop {
          border-bottom: 1px solid rgba(232, 232, 232, 1);
          padding: 5px 10px;

          div {
            display: inline-block;
            width: 50%;

            span {
              font-size: 14px;
              font-weight: bold;
            }

            .el-button {
              padding: 5px 10px;
            }
          }
        }
      }

      .CProCRight {
        display: inline-block;
        width: 65%;
        height: 100%;
        vertical-align: top;

        .CProCRightTop {
          background: rgba(250, 250, 250, 1);
          padding: 5px 10px;

          div {
            display: inline-block;
            margin-right: 2%;

            span {
              font-size: 14px;
              font-weight: bold;
            }

            .el-button {
              padding: 5px 10px;
            }
          }
        }
      }
    }
  }
}
</style>

