<template>
  <div class="to-do-total-edit-wrap">
    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeDia"
      width="889px"
      v-dialogDrag
      center
    >
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px"
          >To-Do编辑框</span
        >
      </div>
      <div class="dialog-container">
        <div class="label-box">
          <p style="width:120px;color:#333333;">任务描述</p>
          <p style="width:300px;color:#999999;">上次更新时间：{{updateTime}}</p>
          <p>更新人：{{athor}}</p>
        </div>
        <div class="editor-box" >
          <div class="editor-tool"></div>
          <div class="editor" id="editorDom">
            <Editor 
              v-model="content" 
              :init="setting" 
            ></Editor>
          </div>
            
        </div>
        <div class="footer">
          <el-button type="primary"  @click="saveContent">保存</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tinymce from "tinymce";//即使没有引用也不能删，Editor依赖tinymce
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/quickbars"; //快速栏插件
import "tinymce/plugins/fullscreen"; //全屏插件
import "tinymce/plugins/paste"; //黏贴插件
import "tinymce/icons/default/icons";
import { customInterence } from '@/api/api.js'
export default {
  props:{
    visible:{
      type:Boolean,
      default:false
    }
  },
  components:{Editor},
  watch:{
    visible(newVal){
      if(newVal){
        this.getToDoDetail()
      }
    }
  },
  data() {
    return {
      updateTime:'',//更新时间
      athor:'',//更新人
      content:'',//最新内容 
      setting:{
        language: "zh_CN",
        language_url: require("../../ppt_manage/newVersion/utils/zh_CN.js"),
        menubar: false,
        toolbar: [
          "indent outdent alignleft aligncenter alignright alignjustify numlist bullist bold italic underline strikethrough",
          "fontselect fontsizeselect forecolor backcolor",
        ],
        quickbars_selection_toolbar:false,  
        quickbars_insert_toolbar: false,
        plugins: "lists quickbars paste",
        inline: true,
        selector:'#editorDom',
        paste_as_text: true,
        paste_block_drop: true,
        fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 36px 48px',
        font_formats:`微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';
                      楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;
                      Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;
                      Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;
                      Courier New=courier new,courier;Georgia=georgia,palatino;
                      Helvetica=helvetica;`,
        toolbar_persist:true,
        fixed_toolbar_container: ".editor-tool",
        skin_url: "/static/css",
        content_url: "/static/css",
        placeholder:"点击输入任务描述"
      }, 
    };
  },
  methods: {
    getToDoDetail(){
      customInterence.getToDoEditData().then(res=>{
        if(res.Ret!==200) return 
        const {Content,CreateUserName,ModifyTime} = res.Data
        this.content = Content
        this.updateTime = ModifyTime
        this.athor = CreateUserName
      })
    },
    closeDia(){
      this.updateTime = ''
      this.athor = ''
      this.content = ''
      this.$emit("update:visible",false)
    },
    saveContent(){
      customInterence.saveToDoEditData({
        Description:this.content
      }).then(res=>{
        if(res.Ret!==200) return 
        this.$message.success('保存成功')
        this.closeDia()
      })
    }
  },
  mounted(){
    tinymce.init({}) //不写也能正常用 这里只是为了保留tinymce的引用
  }
};
</script>

<style  lang="scss">
.to-do-total-edit-wrap{
  ul{
    margin-left: 1em;
    list-style-type: disc;
  }
  ol{
    margin-left: 1em;
    list-style-type: decimal;
  }
}
</style>
<style scoped lang="scss">
.dialog-container{
  padding:0 50px 15px 50px;
  .label-box{
    display: flex;
    margin-bottom: 20px;
  }
  .editor-box{
    .editor{
      height:500px;
      color: #333;
      ul{
        margin-left: 1em !important;
        list-style-type: disc !important;
      }
      ol{
        margin-left: 1em !important;
        list-style-type: decimal !important;
      }
    }
  }
  .mce-content-body {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 16px;
    &:focus-visible{
      outline: 0;
    }
    ul{
      margin-left: 1em !important;
      list-style-type: disc !important;
    }
    ol{
      margin-left: 1em !important;
      list-style-type: decimal !important;
    }
  }
  .mce-edit-focus{
    outline: 0;
  }
  .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
    left:10px !important;
  }
  .footer{
    margin-top:20px;
    text-align: center;
  }
}
</style>
