<!--
 * @Author: wenjie 1454560336@qq.com
 * @Date: 2024-09-20 09:52:06
 * @LastEditors: wenjie 1454560336@qq.com
 * @LastEditTime: 2024-09-25 09:11:55
 * @FilePath: \admin-manage\src\views\operationManage\luckyDrawManage\luckyDrawRule.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="luckyDrawRule" v-loading="loading">

        <div style="border: 1px solid #ccc; width: 500px">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="editorMode"
              />
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="content"
                :defaultConfig="editorConfig"
                :mode="editorMode"
                @onCreated="onCreated"
              />
            </div>

            <div class="btn-group">
                <el-button>取 消</el-button>
                <el-button type="primary" :loading="loading" @click="save">确 定</el-button>
            </div>

    </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import OSS from "ali-oss";
import Vue from "vue";
import { requestUploadImg, finishUploadImg } from "@/api/common";
import {getLuckyDrawDetail,luckyDrawRule} from '@/api/luckyDraw.js'

    export default Vue.extend({
        components: {
            Editor,
            Toolbar,
        },
        data() {
            return {
                loading:false,
                content:'',
                editor: null,
                editorMode: "default", // or 'simple'
                toolbarConfig: {},
                editorConfig: {
                    placeholder: "请输入内容...",
                    MENU_CONF: {
                    uploadImage: {
                        // 自定义上传
                        customUpload(file, insertFn) {
                        // file 即选中的文件
                        requestUploadImg({
                            fineName: file.name,
                            operate: "OTHER",
                        }).then((res) => {
                            if (res.state == "Success") {
                            const client = new OSS({
                                // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                                region: res.content.endPoint.split(".")[0],
                                // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
                                accessKeyId: res.content.token.accessKeyId,
                                accessKeySecret: res.content.token.accessKeySecret,
                                // 填写Bucket名称。
                                bucket: res.content.bucket,
                                stsToken: res.content.token.securityToken,
                            });

                            client
                                .multipartUpload(res.content.paths[0].join("/"), file)
                                .then((r) => {
                                // 上传完成
                                finishUploadImg([{ path: res.content.paths[0] }]).then(
                                    (msg) => {
                                    if (msg.state == "Success") {
                                        let url =
                                        "http://" +
                                        res.content.bucket +
                                        "." +
                                        res.content.endPoint +
                                        "/" +
                                        res.content.paths[0].join("/");
                                        insertFn(url, "", "");
                                    }
                                    }
                                );
                                })
                                .catch((err) => {
                                console.log(err); //上传失败之后
                                });
                            }
                        });
                        },
                    },
                    },
                },
            }
        },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
                if (this.mode == "detail") {
                    this.editor.disable();
                }
            },
            // 详情
            getLuckyDrawDetail() {
                this.loading = true;
                let raffleId = this.$route.query.id
                getLuckyDrawDetail({raffleId,regionCode:'520100'}).then((res) => {
                    this.loading = false;
                    if (res.state == "Success") {
                        this.content = res.content.raffleRule
                    }
                });
            },
            save(){
                this.loading = true
                luckyDrawRule({raffleId:this.$route.query.id,rule:this.content}).then(res=>{
                    this.loading = false
                    if (res.state == "Success") {
                        this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.$router.push("/operationManage/luckyDrawManage/index");
                    }
                })
            }
        },
        created () {
            this.getLuckyDrawDetail()
        },
    })
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
.luckyDrawRule{
    .btn-group {
        width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>