<template>
  <div style="width:100%;height:680px;padding:24px;">
    <el-input placeholder="通知标题" v-model="formData.messageTitle" style="margin-bottom:20px" size="small" ></el-input>
    
    <editor v-model="formData.messageContent" :init="init"  ></editor>
    
      <p style="color:#fff;">
        （扫码信息消息接收人员）
      <el-link type="primary" style="float:left;" @click="selectUserVisible = true;"> <i class="el-icon el-icon-plus"></i>添加消息接收人员</el-link>
        
      </p>
      <el-table
        :data="siteUser"
        border
        height="150px"
        style="width: 100%">
        
        <el-table-column
          prop="name"
          label="用户姓名"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="phone"
          label="联系电话"
          align="center"
          >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delUser(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="select-user-container" v-if="selectUserVisible">
        <selectUser @cancle="selectUserVisible=false" @confirm="selectUserSuccess"></selectUser>
      </div>

    <p>
      <i class="el-icon-warning-outline" style="margin:12px 0px;">不添加消息接收人员点击确定按钮，默认给全部人员发送通知消息。</i>
    </p>
    <el-button type="primary" size="mini"  @click="release()">确定</el-button>
    <el-button type="default" size="mini" @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 axios from 'axios';
import { getMethodCommon,postMethodCommon } from '../../../api/common';
const BASE_IMAGE_API = process.env.VUE_APP_BASE_IMG_URL;
import selectUser from './SelectRoles.vue';
// 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 template code codesample  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 | \
     image  charmap hr pagebreak insertdatetime | bdmap fullscreen preview"
    }
  },
  components: {
    Editor,
    selectUser
  },
  data(){
    return {
      siteUser:[],
      selectUserVisible:false,
      formData:{
        messageContent:null,
        messageTitle:null,
        siteUser:[]
      },
      cateTree:[],
      defaultProps:{
      
      },
      content:null,                                                                                                             
      init: {
        language_url: "/static/tinymce/langs/zh-Hans.js", // 中文语言包路径
        language: "zh-Hans",
        skin_url: "/static/tinymce/skins/ui/oxide",
        height: 500,
        min_height: 500,
        max_height: 500,
        width:"auto",
        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,
        images_upload_url:BASE_IMAGE_API+"/api/Files/Upload",
        
        images_upload_handler:(blobInfo, success, failure) => {
          let fd = new FormData()
          fd.append('files',blobInfo.blob())
          axios.post(BASE_IMAGE_API+'/api/Files/Upload',fd).then(res=>{
            let path = res.data.result[0].filePath.replace("\\","/")
              success(BASE_IMAGE_API+"/"+path);
          })
        },

      },
    }
  },
  created(){
    // this.getCateTree();
    this.getArticleDetail();
   
  },
  mounted() {
    tinymce.init({}); // 这里传个空对象就可以了
  },
  
  methods:{
    selectUserSuccess(e){
      let _this = this;
      console.log("EEEEEEE",e);
      e.forEach((item,index)=>{
        let obj = {
          "siteUserId": item.Id,
          "userRole": 0,
          "name": item.Name,
          "phone": item.Account
        }
        _this.siteUser.push(obj)
       console.log("obj",this.siteUser)
        // this.siteUser.push(obj);
      })
      this.selectUserVisible = false;
    },  
    getArticleDetail(){
      
    },
    delUser(scope){
      this.siteUser.splice(scope.$index,1);
    },

    // 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(){
      this.formData.userId = [];
      this.formData.createId = localStorage.getItem("userId")
      this.siteUser.forEach((item,index)=>{
        this.formData.userId.push(item.siteUserId)
      })
      console.log("formData",this.formData);
      delete this.formData.siteUser
      postMethodCommon("/Grid/AddMessage",this.formData).then(res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"操作成功",
          })
          this.close();
          this.$emit("addSuccess")
        }
      })
    }

  }
}
</script>

<style>
.select-user-container{
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:99999;
  background:#fff;
}
</style>