<template>
    <div class="hospitalOverviewContainer" v-loading="submitLoading">
        <div class="contentForm">
            <div class="contentFormTitle">
                <span>医院概况</span>
            </div>
            <div id="richText"></div>
            <div class="confirm">
                <el-button class="button-width" type="primary" :loading="submitLoading" @click="beforeSubmit">更新信息
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import hospitalAPI from "@/api/hospital";
import E from "wangeditor"
import {debounce, uuid} from '@/utils/index';
import uploadAnyFile from "@/api/uploadAnyFile";
import {getUrl} from "@/config";
export default {
    name: 'hospitalOverview',
    data() {
        return {
            richEditor: null,
            id: this.$route.query.id ?? '',
            form: {
                hospitalMessage:"",
            },
            submitLoading: false,
            title: '',
            colSize: 22,
        };
    },
    mounted() {
        this.initWangEditor();
        this.initData()
    },
    methods: {
        initWangEditor () {
            this.$nextTick(() => {
                //初始化富文本编辑器及其事件
                this.richEditor = new E("#richText")
                this.richEditor.config.zIndex = 2 //编辑器
                this.richEditor.config.showLinkImg = false
                this.richEditor.config.customUploadImg = function (resultFiles, insertImgFn) {
                    // resultFiles 是 input 中选中的文件列表
                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                    let names = []
                    resultFiles.forEach(file => {
                        names.push(uuid() + file.name)
                    })
                    uploadAnyFile.uploadAnyFile(resultFiles,
                            ['richText'],
                            names)
                            .then(res => {
                                // 上传图片，返回结果，将图片插入到编辑器中
                                res.forEach(r => {
                                    insertImgFn(getUrl() + r)
                                })
                            })
                }
                this.richEditor.config.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'indent',  // 缩进
                    'lineHeight',  // 行高
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'splitLine', // 分割线
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'emoticon',  // 表情
                    'image',  // 插入图片
                    'table',  // 表格
                    'video',  // 插入视频
                    'code',  // 插入代码
                    'undo',  // 撤销
                    'redo'  // 重复
                ]
                this.richEditor.create()
                this.richEditor.config.onchange = (newHtml) => {
                  this.form.hospitalMessage = newHtml
                }
            })
        },
        initData() {
            this.id = ''
            this.form = {
                hospitalMessage:"",
            }
            // this.richEditor.txt.html(this.form.hospitalMessage)
            hospitalAPI.getHospitalList({}).then(res => {
                if (res.code === 1000) {
                    if(res.data && res.data.length) {
                        this.form = res.data[0]
                        this.id = this.form.id
                        if(this.form.hospitalMessage) {
                            this.richEditor.txt.html(this.form.hospitalMessage)
                        }
                    }
                } else {
                    this.form = []
                }
            }).catch(err => {
                this.form = []
                this.$message.error("获取数据失败，请重试")
            })
        },
        submitcontent() {
            let params = {id: this.id ? this.id : null, hospitalMessage: this.form.hospitalMessage};
            hospitalAPI.addOrUpdateHospital(params).then(res => {
                if (res.code === 1000) {
                    this.$message.success("更新消息成功！");
                    this.submitLoading = false;
                    this.initData();
                } else {
                    this.$message.error("更新消息失败！");
                    this.submitLoading = false;
                }
            }).catch(err => {
                console.error(err)
                this.$message.error("更新消息失败！");
                this.submitLoading = false
            })
        },
        beforeSubmit: debounce(function (){
            if(this.form.hospitalMessage) {
                    if (this.submitLoading) {
                        return
                    }
                    this.submitLoading = true;
                    this.submitcontent()
            }else {
                this.$message.error("请输入");
            }
        },
            2000,
            true
        ),
    },
}
</script>

<style scoped lang="scss">
.hospitalOverviewContainer {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    /*添加css样式*/
    ::v-deep  input::-webkit-outer-spin-button,
    ::v-deep  input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    ::v-deep  input[type="number"] {
        -moz-appearance: textfield;
    }

    .contentForm {
        .contentFormTitle {
            font-size: $font-common-second-third;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .secondaryTitle {
            line-height: 1.5rem;
            font-weight: bold;
            padding-left: 6px;
            border-left: 3px solid $theme-color;
            margin: 1rem 0;
        }

        .confirm {
            width: 90%;
            margin-top: 60px;
            margin-bottom: 40px;
            text-align: left;
        }
    }
    .button-width {
        width: 120px;
    }
    ::v-deep  .w-e-text-container {
        height:  400px !important;
    }
}
</style>