/**
*@author:Guoxiaohuan
*@date:2020.05.27
*@info：楼层功能-编辑图例备注
*/
<template>
    <div class='editModel'>
        <a-modal v-model='visible' :title='title' :closable='false' :maskClosable='false' :width='648' :footer='null'>
            <div class='edit-x' @click='handlCancel'>X</div>
            <div class='edit_container' style='width:600px;height:156px'>
                <quill-editor
                    v-model='remarksTexts'
                    :options='editorOption'
                    @blur='onEditorBlur($event)'
                    @focus='onEditorFocus($event)'
                    @change='onEditorChange($event)'
                    @ready='onEditorReady($event)'
                ></quill-editor>
                <p class='p1'>{{valLen||remarksText.length}}/200</p>
            </div>
            <div class='edit-foot'>
                <span @click='handlCancel'>取消</span>
                <span @click='handleOk'>保存</span>
            </div>
        </a-modal>
    </div>
</template>
<script>
import { updateRead } from '@/api/public.js'
import { mapGetters } from 'vuex'
export default {
    name: 'EditdMarks',
    data() {
        return {
            valLen: 0, //输入字数限制
            remarksTexts: '', //展示的备注
            editorOption: {
                modules: {
                    toolbar: [['bold', 'underline'], [{ color: [] }]]
                },
                theme: 'snow',
                placeholder: '请输入内容...'
            },
            title: '编辑图例备注',
            visible: false
        }
    },
    computed: {
        ...mapGetters(['remarksText'])
    },
    methods: {
        // 点击取消
        handlCancel() {
            if (this.remarksTexts != this.remarksText) {
                this.$confirm('是否保存编辑后的备注?', '提示', {
                    confirmButtonText: '保存',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        this.handleOk()
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消保存'
                        })
                        this.visible = false
                    })
            } else {
                this.visible = false
            }
        },
        // val为传过来的备注
        showModal() {
            this.visible = true
            this.remarksTexts = this.remarksText
        },
        // 更新底图备注
        markUpdate(val) {
            let params = {
                postParams: {
                    graphId: this.$cookie.get('graphId'),
                    projectId: this.$store.state.plazaId,
                    Note: val
                }
            }
            updateRead(params).then(res => {
                // console.log('更新备注', res)
                this.$message({
                    showClose: true,
                    message: '更新成功',
                    type: 'success'
                })
                this.$emit('queryMarks')
                this.visible = false
            })
        },
        // 点击保存
        handleOk() {
            this.markUpdate(this.remarksTexts)
        },
        onEditorReady(editor) {},
        onEditorBlur(val) {},
        onEditorFocus(val) {},
        onEditorChange(val) {
            val.quill.deleteText(200, 6)
            if (this.remarksTexts === '') {
                this.valLen = 0
            } else {
                this.valLen = val.quill.getLength() - 1
            }
            if (val.html) {
                this.remarksTexts = val.html
            }
        }
    },
    mounted() {}
}
</script>


<style lang="less" >
.editModel {
    .ant-modal-body {
        padding: 0 24px 35px !important;
    }
    .edit_container {
        .ql-editor {
            padding: 12px 15px 4px;
        }
        .ql-toolbar.ql-snow .ql-formats {
            margin-right: 0px;
        }
    }
}
</style>
<style lang="less" scoped>
.editModel {
}
.edit-x {
    position: absolute;
    width: 9px;
    height: 10px;
    color: #000000;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
.edit_container {
    margin: 0px;
    .p1 {
        position: absolute;
        bottom: 65px;
        right: 30px;
        margin-bottom: 0;
    }
}
.edit-foot {
    height: 30px;
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    span {
        height: 32px;
        line-height: 32px;
        border-radius: 2px;
        width: 65px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        cursor: pointer;
    }
    span:nth-of-type(1) {
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin-right: 8px;
        color: rgba(0, 0, 0, 0.65);
    }
    span:nth-of-type(2) {
        color: rgba(255, 255, 255, 1);
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    }
}
.quill-editor {
    height: 130px;
}
// 修改保存按钮背景色
/deep/ .ant-btn-primary {
    background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
}
</style>