<template>
  <div style="width:100%;height:1000px;padding:24px;">
    文章标题：<el-input type='text' v-model="formData.title" size='mini' style="width:300px;margin-bottom:12px;" placeholder="文章标题"></el-input>
    <span style="margin-left:12px;">文章分类：</span>
     <el-cascader
        size="mini"
        style="width:300px;margin-bottom:12px;"
        v-model="formData.category_id"
        :show-all-levels="false"
        :options="cateTree"
        :props="defaultProps"
        @change="handleChange">
      </el-cascader>

    <editor v-model="formData.content" :init="init"></editor>
    <el-button type="primary" size="mini" style="margin-top:12px;" @click="release()">发布文章</el-button>
    <el-button type="default" size="mini" style="margin-top:12px;" @click="close()">取消</el-button>
  </div>
</template>
<script>
import tinymce from "/public/static/tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "/public/static/tinymce/themes/silver";
import 'tinymce/skins/ui/oxide/skin.css';
import "/public/static/tinymce/plugins/image";
import "/public/static/tinymce/plugins/media";
import "/public/static/tinymce/plugins/table";
import "/public/static/tinymce/plugins/lists";
import "/public/static/tinymce/plugins/contextmenu";
import "/public/static/tinymce/plugins/wordcount";
import "/public/static/tinymce/plugins/colorpicker";
import "/public/static/tinymce/plugins/textcolor";
import "/public/static/tinymce/plugins/preview";
import "/public/static/tinymce/plugins/code";
import "/public/static/tinymce/plugins/link";
import "/public/static/tinymce/plugins/advlist";
import "/public/static/tinymce/plugins/codesample";
import "/public/static/tinymce/plugins/hr";
import "/public/static/tinymce/plugins/fullscreen";
import "/public/static/tinymce/plugins/textpattern";
import "/public/static/tinymce/plugins/searchreplace";
import "/public/static/tinymce/plugins/autolink";
import "/public/static/tinymce/plugins/directionality";
import "/public/static/tinymce/plugins/visualblocks";
import "/public/static/tinymce/plugins/visualchars";
import "/public/static/tinymce/plugins/template";
import "/public/static/tinymce/plugins/charmap";
import "/public/static/tinymce/plugins/nonbreaking";
import "/public/static/tinymce/plugins/insertdatetime";
import "/public/static/tinymce/plugins/imagetools";
import "/public/static/tinymce/plugins/autosave";
import "/public/static/tinymce/plugins/autoresize";

import {getMethodCommon,postMethodCommon } from "@/api/common";
import axios from 'axios';
const BASE_IMAGE_API = process.env.VUE_APP_BASE_IMG_URL;
// import "tinymce/icons/default/icons";
export default {
  name:"ArticleManagement",
  props: {
    isAdd:Boolean,
    id:Number,
    value: {
      type: String,
      default: ""
    },
    // 默认插件 这里写的比较全，基本上是全部了
    plugins: {
      type: [String, Array],
      default:
        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight"
    },
    // 默认工具栏 这里写的比较全，基本上是全部了
    toolbar: {
      type: [String, Array],
      default:
        "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview"
    }
  },
  components: {
    Editor
  },
  data(){
    return {
      formData:{},
      cateTree:[],
      defaultProps:{
      
      },
      content:null,                                                                                                             
      init: {
        language_url: "/static/tinymce/langs/zh-Hans.js", // 中文语言包路径
        language: "zh-Hans",
        skin_url: "/static/tinymce/skins/ui/oxide",
        height: 680,
        min_height: 680,
        max_height: 740,
        width:954,
        toolbar_mode: "wrap",
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: "p {margin: 5px 0;}",
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        branding: false,
        //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        // images_upload_handler: (blobInfo, success, failure) => {
        //   const img = "data:image/jpeg;base64," + blobInfo.base64();
        //   success(img);
        // }
        images_upload_url:BASE_IMAGE_API+"/api/Platform/Upload",
        
        images_upload_handler:(blobInfo, success, failure) => {
          let fd = new FormData()
          fd.append('files',blobInfo.blob())
          axios.post(BASE_IMAGE_API+'/api/Platform/Upload',fd).then(res=>{
              success(BASE_IMAGE_API+"/"+res.data.result[0].filePath);
          })
        },

      },
    }
  },
  created(){
    this.getCateTree();
   
  },
  mounted() {
    tinymce.init({}); // 这里传个空对象就可以了
  },
  
  methods:{

    getArticleDetail(){
      postMethodCommon("/CimApiDesc/GetById?id="+this.id).then(res=>{
        if(res.code == 200){
          this.formData = res.result;
          // this.formData.content
          this.formData.content =  this.formData.content.replace(/[^>]*src=['"]([^'"]+)[^>]*/gi,function(match,capture){
          　　//capture,返回每个匹配的字符串
              capture = capture.substring(capture.indexOf('/C'),capture.length);
          　　var newStr='<img src="'+BASE_IMAGE_API+capture+'" width="924px" alt="" />';
          　　return newStr;
          });
          postMethodCommon("/CimApiDescCategory/GetById?Id="+this.formData.category_id).then(res=>{
            console.log("res1111",res);
          })
        }
      })
    },

    getCateTree(){
      postMethodCommon("/CimApiDescCategory/LoadTree").then(res=>{
        if(res.code == 200){
          this.cateTree = res.data;
          this.cateTree.forEach((item,index)=>{
            this.cateTree[index].label = item.name;
            this.cateTree[index].value = item.id;
            this.cateTree[index].children = [];
            if(item.child.length>0){
              item.child.forEach((it,idx)=>{
                let obj = {
                  label:it.name,
                  value:it.id,
                }
                this.cateTree[index].children.push(obj);
              })
            }
          })
          if(!this.isAdd){
            this.getArticleDetail();
          }
        }
      })
    },

    handleChange(val){
      this.formData.category_id= val[1];
    },

    close(){
      this.$emit("close");
    },

    release(){
      postMethodCommon("/CimApiDesc/AddOrUpdate",this.formData).then(res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"操作成功",
          })
          this.close();
        }
      })
    }

  }
}
</script>