/**
*@author:Guoxiaohuan
*@date:2020.05.27
*@info：楼层功能-编辑图例备注
*/
<template>
    <div class='editModel' v-if='visible'>
        <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'
import { queryRead } from '@/api/public.js'

export default {
    name: 'EditdMarks',
    data() {
        return {
            valLen: 0, //输入字数限制
            remarksTexts: '', //展示的备注
            text1: '主要设备房包括：冷源机房，热源机房，开闭站，配变电所（室），发电机房，消防水泵房，消防高位水箱间，生活水泵房，慧云机房，垃圾房',
            text2: '图例后×的数字，代表此位置的数量',
            editorOption: {
                modules: {
                    toolbar: [['bold', 'underline'], [{ color: [] }], [{ list: 'ordered' }]]
                },
                theme: 'snow',
                placeholder: '请输入内容...'
            },
            title: '编辑图例备注',
            visible: false
        }
    },
    computed: {
        ...mapGetters(['remarksText', 'typeNum', 'planNum'])
    },
    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.$emit('queryMarks')
            // this.$emit('')
            // return
            this.query()
            this.visible = true
            // this.remarksTexts = this.remarksText
        },
        query() {
            if (this.remarksText) {
                if (this.planNum && this.typeNum) {
                    if (this.remarksText.search(`${this.text1}`) != -1) {
                        // console.log(5555555555555)
                        // console.log(this.remarksText.search(this.text1) != -1)
                    } else {
                        console.log(333333333)
                        console.log(this.remarksText.search(this.text1) != -1)
                    }
                    this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
                } else if (this.planNum) {
                    this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
                } else if (this.typeNum) {
                    this.remarksTexts = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
                } else {
                    this.remarksTexts = ''
                }
                if (this.remarksText.search(`${this.text1}`) != -1) {
                    this.remarksTexts = this.remarksText
                } else {
                    if (this.planNum) {
                        this.remarksTexts = `${this.remarksText}<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
                    } else {
                        this.remarksTexts = this.remarksText
                    }
                }
                if (this.remarksText.search(`${this.text2}`) != -1) {
                    this.remarksTexts = this.remarksText
                } else {
                    if (this.planNum) {
                        this.remarksTexts = `${this.remarksText}<ol style="padding-left: 1.5em;"><li>${this.text2}</li></ol>`
                    } else {
                        this.remarksTexts = this.remarksText
                    }
                }
            } else {
                if (this.planNum && this.typeNum) {
                    this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
                } else if (this.planNum) {
                    this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
                } else if (this.typeNum) {
                    this.remarksTexts = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
                } else {
                    this.remarksTexts = ''
                }
            }
            // let postParams = {
            //     categoryId: this.$cookie.get('categoryId'),
            //     projectId: this.$store.state.plazaId,
            //     BuildingID: '1',
            //     Pub: true,
            //     FloorID: this.$cookie.get('floorNow')
            // }
            // let data = {}
            // queryRead({ data, postParams }).then(res => {
            //     if (res.data.Data && res.data.Data[0].Note) {
            //         let Res = res.data ? res.data.Data[0].Note : ''
            //         if (Res) {
            //             // this.$store.commit('SETREMARKSTEXT', Res)
            //             // console.log()
            //             // 返回有备注
            //             // this.remarksText = Res
            //             // let defaultCom = ''
            //             // if (this.planNum && this.typeNum) {
            //             //     defaultCom = `${Res}<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
            //             // } else if (this.planNum) {
            //             //     defaultCom = `${Res}<ol  style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
            //             // } else if (this.typeNum) {
            //             //     defaultCom = `${Res}<ol   style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
            //             // } else {
            //             //     defaultCom = Res
            //             // }
            //             // this.$store.commit('SETDEFAULTCOMMENT', defaultCom)
            //         } else {
            //             let marks = ''
            //             if (this.planNum && this.typeNum) {
            //                 marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
            //             } else if (this.planNum) {
            //                 marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
            //             } else if (this.typeNum) {
            //                 marks = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
            //             } else {
            //                 marks = ''
            //             }
            //             this.$store.commit('SETREMARKSTEXT', marks)
            //         }
            //         // this.$store.commit('SETREMARKSTEXT', 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>