<template>
    <div class="additional-comment-container" :class="{'additional-comment-shadow': shadow, 'additional-comment-container-border': !isWatch}" :style="{width: (width || '250px')}">
        <div class="additional-comment-show" :class="{'bottom-border-1': !isWatch}" ref="commentShow" :style="{height: ((panelHeight+'px') || '300px')}">
            <div class="additional-comment-item" v-for="(comment, index) in comments" :key="index">
                <div class="user-info">
                    <span class="user">{{comment.ADD_PEOPLE}}</span>
                    <span class="time">[{{comment.CREATE_TIME}}]</span>
                </div>
                <p class="content" style="margin-left: 20px;" v-html="comment.ADD_CONTENT"></p>
            </div>
        </div>
        <div class="additional-comment-editor" v-if="!isWatch">
            <el-form :model="validateForm" ref="formRef">
                <el-form-item prop="inputContent" :rules="plValidate('isHaveHtml')">
                    <textarea class="editor" v-model="validateForm.inputContent"></textarea>
                </el-form-item>
            </el-form>
            <div class="button-group">
                <el-button class="submit-button" size="mini" type="primary" @click="onAddComment">提交意见</el-button>
                <el-dropdown class="common-lang-button" trigger="click" @command="onMetadataChoose">
                    <el-button size="mini" type="text">常用语&nbsp;<i class="el-icon-caret-bottom"></i></el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(content, index) in metadata" :key="index">{{content}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Replace} from "sasp-base";
    const operations = {
        /*
        ** 获取追加意见表中的值
        */
        async loadComentData(uuid, vm){
            if(uuid){
               //  vm.axios.post(vm.api.plActiveComp.listNoPageByParam, {
               //      tableName: 'data_additional',
               //      cs:  uuid ,
               //      sort: 'CREATE_TIME ASC'
               //  }).then(res=>{
               //      console.log(res);
               //      if(res && res.data){
               //          console.log(res);
               //          res.data.forEach(data=>{
               //              let createtime=vm.DATE_UTIL.formaterDateTime(new Date(data.CREATE_TIME));
               //              vm.$set(data,"CREATE_TIME",createtime)
               //          });
               //          vm.comments = [].concat(res.data);
               //          console.log(vm.comments);
               //      }
               //  });
                vm.uuid = uuid;
                vm.findAdditional();
            }
        },
        /*
        ** 获取元数据
        */
        // async loadMetadata(typeId, parentId, vm){
        //     const res = await vm.axios.post(vm.api.data.getDataByType, {typeId, parentId});
        //     if(res && res.data){
        //         res.data.forEach(item => {
        //             vm.metadata.push(item.dataName);
        //         });
        //     }
        // },
        /*
        ** 追加意见
        */
        async addComments(uuid, content, user, axios){
            let vm=this;
            if(content){
                const paramStr = JSON.stringify({
                    'isNewData': 'Y',
                    'newDataConv': 'Y',
                    'tableName': 'data_additional',
                    'fields': 'ADD_PEOPLE,PEOPLE_ID,ADD_CONTENT,UUID,id',
                    'ADD_PEOPLE': user.userName,
                    'PEOPLE_ID': user.id,
                    'ADD_CONTENT': content,
                    'UUID': uuid,
                    'id': ''

                });
               // return await axios.post(this.api.commonmethod.addByParam, {addParam: paramStr});
                return await axios.post(vm.api.plActiveComp.addByParam, {addParam: paramStr});
            }
        }
    };

    export default {
        name: "plAdditionalComment",
        props: {
            /*
            ** v-model中使用
            */
            value: {},
            /*
            ** 组件整体的宽度
            */
            width: {
                type: String,
                default: '250px'
            },
            /*
            ** 面板高度
            */
            panelHeight: {
                type: Number,
                default: 300
            },
            /*
            ** 组件的最外一圈是否加上阴影
            */
            shadow: {
                type: Boolean,
                default: false
            },
            /*
            ** 是否查看状态
            */
            isWatch: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return {
                uuid: '',
                comments: [],
                metadata: ["同意", "马上到", "知道了"],
                validateForm:{
                    inputContent: ''
                },
            }
        },
        watch: {
            value(){
                this.uuid = this.value;
                //根据uuid查询追加意见表中的值
                operations.loadComentData(this.uuid, this);
            },
            uuid(){
                //根据uuid查询追加意见表中的值
                operations.loadComentData(this.uuid, this);
            }
        },
        created(){
            //加载常用语
            // operations.loadMetadata('168994bf53c549799cf56d3f9aab0209', '-1', this);
            //如果value有值，value赋值给uuid
            if(this.value){
                this.uuid = this.value;
            }
            //如果value中没有值，且不在查看的状态下，自动生成uuid
            if(!this.uuid && !this.isWatch){
                this.uuid = this.COMMON_FUNC.getUuidByParams(32);
                this.$emit('input', this.uuid);
            }
            this.findAdditional();
        },
        methods: {
            /*
            ** 常用语选择时触发事件
            */
            onMetadataChoose(command, instance){
                this.validateForm.inputContent += instance.$el.innerText;
            },
            /*
            ** 点击追加意见按钮时触发事件
            */
            onAddComment(){
                let vm = this;
                let validate = true;
                if(this.$refs.formRef){
                    this.$refs.formRef.validate(valid => {
                        validate = valid;
                    });
                    if(!validate){
                        return;
                    }
                }
                if(!this.validateForm.inputContent) {
                  return;
                }
                const loginUser = vm.CACHE_GLOBAL.getLoginUser() || vm.FORM_USER_GLOBAL.getLoginUser();
                const paramStr = JSON.stringify({
                    'isNewData': 'Y',
                    'newDataConv': 'Y',
                    'tableName': 'data_additional',
                    'fields': 'ADD_PEOPLE,PEOPLE_ID,ADD_CONTENT,UUID,id',
                    'ADD_PEOPLE': loginUser.userName,
                    'PEOPLE_ID': loginUser.id,
                    'ADD_CONTENT':  vm.validateForm.inputContent,
                    'UUID': vm.uuid,
                });
                vm.axios.post(vm.api.plActiveComp.addByParam, {addParam: paramStr}).then(res => {
                    if(res && res.data && res.data.operateSuccess){
                        vm.findAdditional();

                    }else{
                        vm.$message({
                            showClose: true,
                            message: res.data.operateMessage,
                            type: 'error'
                        });
                    }
                });
                vm.validateForm.inputContent = '';
            },
            /*
            **
            */
            scrollBarBottom(){
                const scrollHeight = this.$refs.commentShow?this.$refs.commentShow.scrollHeight:0;
                const offsetHeight = this.$refs.commentShow?this.$refs.commentShow.offsetHeight:0;
                if(this.$refs.commentShow){
                    this.$refs.commentShow.scrollTop = scrollHeight - offsetHeight;
                }
            },
            findAdditional(){
                let vm=this;
                if(!vm.uuid){
                    vm.comments = [];
                    return;
                }
                vm.axios.post(vm.api.plActiveComp.findAdditional, {
                    tableName: 'data_additional',
                    cs: vm.uuid,
                    sort: 'CREATE_TIME ASC'
                }).then(res2=>{
                    if(res2 && res2.data){
                        res2.data.forEach(data=>{
                            let createtime=vm.DATE_UTIL.formaterDateTime(new Date(data.CREATE_TIME));
                            vm.$set(data,"CREATE_TIME",createtime);
                            vm.$set(data,"ADD_CONTENT",Replace.textToHTML(data.ADD_CONTENT));
                        });
                        vm.comments = [].concat(res2.data);
                        vm.scrollBarBottom();
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    $border-color: #CCC;
    $shadow-color: #DDD;

    .additional-comment-container-border{
        border: 1px solid $border-color;
        border-radius: 5px;
    }

    .bottom-border-1{
        border-bottom: 1px solid $border-color;
    }

    .additional-comment-container{
        min-width: 250px;

        .additional-comment-show{
            overflow-y: auto;
            padding: 10px;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 10px !important;
                background: #dddddd !important;
            }

            &::-webkit-scrollbar-track {
                border-radius: 10px;
                background: #EDEDED;
            }

            .additional-comment-item{
                padding-bottom: 8px;
                font-size: 14px;

                .user-info{
                    line-height: 25px;
                    .user{
                        font-weight: bold;
                        margin-right: 6px;
                    }
                }

                .content{
                    font-size: 13px;
                    line-height: 21px;
                }
            }
        }

        .additional-comment-editor{
            padding: 10px;
            .editor{
                line-height: 20px;
                width: 100%;
                border: 0;
                resize: none;
                font-size: 14px;

                &:focus{
                    outline: none;
                }
            }

            .button-group{
                &::after{
                    content: '';
                    display: block;
                    clear: both;
                }

                .submit-button{
                    float: right;
                }

                .common-lang-button{
                    float: right;
                    margin-right: 8px;
                }
            }
        }
    }

    .additional-comment-shadow{
        box-shadow: 0 0 10px 2px $shadow-color;
    }

</style>
