import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import WangEditor from 'wangeditor';
import { DomEditor } from '@wangeditor/editor'
import { toolbarConfig } from '@wangeditor/editor'
export default {
    data() {
        return {
            activeName: "weekly",
            editor: null,
            html: '',
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...', fullscreen: false, },
            mode: 'default', // or 'simple'
            from: [
                {
                    title: "测试消息标题1",
                    classification: "测试分类1",
                    date: "2023-12-23",
                    Creator: "admin",
                    releaseTime: "2023-12-29",
                },
                {
                    title: "测试消息标题2",
                    classification: "测试分类3",
                    date: "2023-12-26",
                    Creator: "admin",
                    releaseTime: "2023-12-28",
                },


            ],
            dialogVisible: false,
            previewHtml: "",
            currentPage1: 1,
            pageSizes: [1, 100, 200],
            totalLimit1: 2,
            reportList: {
                type: "",
                people: "",
                time: "",
                title: "",
                content: "",

            },
            ruleForm: {
                //...省略其他
                articleBody: '',
            },
            //上传后的文件列表
            fileList: [],
            // 允许的文件类型
            fileType: ["PDF",],
            // 运行上传文件大小，单位 M
            fileSize: 20,
            // 附件数量限制
            fileLimit: 3,
            //请求头
            headers: { "Content-Type": "multipart/form-data" },
            FormDatas: null,
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        // setTimeout(() => {
        //     this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        // }, 1500)


    },
    methods: {
        onCreated(editor) {

            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            this.toolbarConfig.excludeKeys = [
                'fullScreen',// 排除菜单组，写菜单组 key 的值即可
                'group-video',
                `insertTable`
            ]
        },
        onChange(editor) {
            // 点击一下富文本编辑页窗口就会执行
            const toolbar = DomEditor.getToolbar(editor)
            console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置

        },
        //预览
        preview() {

            this.previewHtml = this.html
            this.dialogVisible = true


        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.params.limit = val
            this.params.page = 1

            this.currentPage1 = 1,





                this.currentPage = 1
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.params.page = val



        },
          //超出文件个数的回调
    handleExceed() {
        this.$message({
          type: 'warning',
          message: this.$t(`user.notSupported4`)
        }); return
      },
      //上传文件的事件
      uploadFile(item) {
        this.fileItem = item
  
        this.fileList.push(item.file);
        this.fileName.push(item.file.name)
  
      },
      //上传成功后的回调
      handleSuccess() {
  
      },
      handelChange(file, fileList) { //控制显示上传显示列表   
        // 校验文件类型和大小
        const fileType = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
        const isTypeValid = this.fileType.includes(fileType);
        const isSizeValid = file.size / 1024 / 1024 <= this.fileSize;
        if (!isTypeValid) {//不支持的文件类型
          this.$message.error(`${this.$t(`user.notSupported`)} ${fileType}`);
          this.fileList = this.fileList.filter(item => item.name != file.name);
          return false;
        }
        if (!isSizeValid) {//文件大小不能超过
          this.fileList = this.fileList.filter(item => item.name != file.name);
          this.$message.error(`${this.$t(`user.notSupported2`)} ${this.fileSize} MB.`);
          return false;
        }
        let flag = this.fileList.some(item => item.name == file.name)
  
        if (flag) {
          this.$message.warning(this.$t(`user.notSupported3`));
          this.$refs.upload.handleRemove(file)
  
          return false
        }
        this.fileName.push(file.name)
        this.fileList.push(file.raw)
  
      },
  
      //上传了的文件给移除的事件，
      handleRemove(file, fileList) {
  
        let nameIndex = this.fileName.indexOf(file.name); // 获取第一个重复元素的索引
        if (nameIndex !== -1) {
          this.fileName.splice(nameIndex, 1); // 删除第一个重复元素
        }
  
  
  
  
        let index = this.fileList.indexOf(file); // 获取第一个重复元素的索引
  
        if (index !== -1) {
          this.fileList.splice(index, 1); // 删除第一个重复元素
        }
  
  
  
      },
        //上传文件之前
    beforeUpload(file) {
        // 校验文件类型和大小
        const fileType = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
        const isTypeValid = this.fileType.includes(fileType);
        const isSizeValid = file.size / 1024 / 1024 <= this.fileSize;
        if (!isTypeValid) {//不支持的文件类型
          this.$message.error(`${this.$t(`user.notSupported`)}：${fileType}`);
          return false;
        }
        if (!isSizeValid) {//文件大小不能超过
          this.$message.error(`${this.$t(`user.notSupported2`)}${this.fileSize} MB.`);
          return false;
        }
  
        // if (file.type != "" && file.type != null && file.type != undefined) {
        //   //截取文件的后缀，判断文件类型
        //   const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //   //计算文件的大小
        //   const isLt2M = file.size / 1024 / 1024 < 20; //这里做文件大小限制
        //   //如果大于50M
        //   if (!isLt2M) {
        //     this.$message.error('上传文件大小不能超过 20MB!');
        //     return false;
        //   }
        //   //如果文件类型不在允许上传的范围内
        //   if (this.fileType.includes(FileExt)) {
        //     return true;
        //   }
        //   else {
        //     this.$message.error("上传文件格式不正确!");
        //     return false;
        //   }
        // }
  
  
      },
  


    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}