<template>
    <div class="select-text-area-tool" 
        :style="{
            top:positionInfo.top+'px',
            left:positionInfo.left+'px'
        }">
        <span class="label" style="margin-right:10px;" @click.stop="isAddSectionLabelShow=true"><img :src="require(`@/assets/img/document_m/label.svg`)"><span>打标签</span></span>
        <el-popover
            placement="right-start" 
            :append-to-body="false"               
            trigger="hover">
            <section-label-detail 
                :detailArr="[
                    {title:'当前标签',isThis:1,arr:isThisLabelArr},
                    {title:'历史标签（我的）',isThis:0,arr:isHistoryLabelArr},
                    {title:'Ta的标签',isThis:0,arr:isOtherLabelArr},
                ]"
                type="textArea"
                @deleteLab="deleteTextAreaLabel"
                @addLab="quickAddTextAreaLabel"
            />
            <span class="label" slot="reference" @click.stop><img :src="require(`@/assets/img/document_m/menu.svg`)"> <span>查看标签</span></span>
        </el-popover>
        <!-- 打标签弹窗 -->
        <add-section-label-dialog 
            :isAddSectionLabelShow="isAddSectionLabelShow"
            :sectionInfo="{isThisLabelArr:currentTextArea.isThisLabelArr||[]}"
            @addSection="addSectionLabel"
            @close="isAddSectionLabelShow=false"
        />
    </div>
</template>

<script>
import SectionLabelDetail from './sectionLabelDetail.vue';
import AddSectionLabelDialog from './addSectionLabelDialog.vue';

import {formatDetailArr} from '../../utils/index.js';
export default {
    props:{
        textAreaInfo:{//选定文字选区信息 用于查看标签
            type:Array,
            default:()=>{return []}
        },
        currentTextArea:{//当前选中的选定文字,是textAreaInfo,用于打标签
            type:Object,
            default:()=>{return {}}
        },
        positionInfo:{
            type:Object,
            default:()=>{
                return {top:0,left:0}
            }
        },
        isShowTextArea:{
            type:Boolean,
            default:false
        }
    },
    components:{SectionLabelDetail,AddSectionLabelDialog},
    data() {
        return {
            isAddSectionLabelShow:false,
            isThisLabelArr:[],
            isHistoryLabelArr:[],
            isOtherLabelArr:[]
        };
    },
    watch:{
        isShowTextArea(val){
            if(val){
                this.initDetailArr()
            }
        },
        textAreaInfo(){
            this.initDetailArr()
        }
    },
    methods: {
        deleteTextAreaLabel(label){
            this.$emit('deleteTextAreaLabel',label)
        },
        quickAddTextAreaLabel(label){
            this.$emit('quickAddTextAreaLabel',label)
        },
        addSectionLabel(labelArr){
            let labelList = labelArr.map(item=>{
                let temp = {
                    LabelId :item.SaLabelId||item.LabelId,
                    LabelName:item.LabelName,
                    IsHistory:0,IsOther:0,
                    IsThis:1,
                }
                return temp
            })
            this.isAddSectionLabelShow = false
            this.$emit('addTextAreaLabel',labelList)
        },
        //初始化标签详情
        initDetailArr(){
            this.isThisLabelArr = formatDetailArr(this.textAreaInfo,'isThisLabelArr')
            this.isHistoryLabelArr = formatDetailArr(this.textAreaInfo,'isHistoryLabelArr')
            this.isOtherLabelArr = formatDetailArr(this.textAreaInfo,'isOtherLabelArr')

        },
    },
};
</script>

<style scoped lang="scss">
.select-text-area-tool{
    position: fixed;
    z-index: 1000;
    background-color: white;
    padding:10px 20px;
    display: flex;
    border-radius: 4px;
    user-select: none;
    width: 166px;
    height:60px;
    box-sizing: border-box;
    border:1px solid #EBEEF5;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
    //小△样式
    &::before,&::after{
        content:'';
        position:absolute;
        width:0;
        height:0;
        border:6px solid transparent;
        border-bottom-color: #EBEEF5;
        left:50%;
        top:-12px;
    }
    &::after{
       left:50%;
       top: -10px;
       border-width: 5px;
       border-bottom-color: white;

    }
    .label{
        cursor: pointer;
        padding:2px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        border-radius: 4px;
        &:hover{
            background-color: #EAF3FE;
        }
        img{
            display: block;
            width:15px;
            height:15px;
        }
    }
}
</style>
