<script>
/**
 * vs-legend 2022-09-13
 * 
 * value 图例数据 []
 * position 图例位置 [,300,100,] 上右下左 优先级 上>下 左>右
 * effect 展示效果 horizontal水平 vertical垂直
 * mode 模式 color颜色 icon图标
 * colorShape  颜色形状 circular圆 rect长方形
 * title 图例标题 图例
 * 
 * @legendClick 点击图例某个元素的回调 返回当前点击元素对象
 */
export default {
    name: "vs-legend",
};
</script>
<script setup>
import {
    ref,
    reactive,
    onMounted,
    getCurrentInstance
} from "vue";
const props = defineProps({
    value: {
        type: Array,
        default: () => [],
    },
    position: {
        type: Array,
        default: () => [, 300, 100,],
    },
    effect: {
        type: String,
        default: 'vertical',
    },
    mode: {
        type: String,
        default: 'color',
    },
    colorShape: {
        type: String,
        default: 'circular',
    },
    title: {
        type: String,
        default: '图例',
    }
});

const { proxy } = getCurrentInstance();

const style = reactive({
    container: {},
    color: {},
    scorll: {}
})

//样式调整
if (props.position[0]) {
    style.container.top = props.position[0] + 'px'
} else {
    style.container.bottom = props.position[2] + 'px'
}

if (props.position[3]) {
    style.container.left = props.position[3] + 'px'
} else {
    style.container.right = props.position[1] + 'px'
}

if (props.effect === 'vertical') {
    style.container.maxWidth = '150px';
    style.container.maxHeight = '350px';
} else if (props.effect === 'horizontal') {
    style.container.maxHeight = '200px';
    style.container.maxWidth = '350px'
}

if (props.colorShape === 'circular') {
    style.color = {
        height: '13px',
        borderRadius: '50%'
    }
} else if (props.colorShape === 'rect') {
    style.color = {
        height: '5px',
    }
}
const legendRef = ref(null);
onMounted(() => {
    const _h = legendRef.value.offsetHeight;
    style.scorll = {
        height: (_h - 45) + 'px'
    }
})

const emit = defineEmits(["legendClick"]);
const itemClick = function (item) {

    // //深拷贝，移除响应式
    // const _itemClone = proxy.$lodash.cloneDeep(item);

    emit("legendClick", item);
}

</script>
    
<template>
    <div class="vs-legend" :style="style.container" ref="legendRef">
        <div v-if="props.title !== ''" class="vs-legend--title">{{props.title}}</div>
        <div class="vs-legend-scorll" :style="style.scorll">
            <div class="vs-legend--item" v-for="(item) in props.value" :key="item.value" @click="itemClick(item)">
                <i class="colorSign" :style="{...style.color,background:item.value}" v-if="props.mode === 'color'"></i>
                <img class="iconSign" v-else :src="item.value" />
                <span>{{item.label}}</span>
            </div>
        </div>
    </div>
</template>
    
<style  lang="scss" scope>
$main: var(--main);
$auxiliary: var(--auxiliary);
$light: var(--light);

.vs-legend {
    background: $main;
    position: absolute;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 4px 3px 7px 2px $auxiliary;
    overflow: hidden;

    .vs-legend--title {
        width: 100%;
        padding-bottom: 5px;
        text-align: center;
        color: #fff;
        border-bottom: 1px rgb(138, 138, 138) solid;
    }

    .vs-legend-scorll {
        overflow-x: hidden;
        overflow-y: auto;

        .vs-legend--item {
            margin: 6px 7px;
            display: inline-flex;
            align-items: center;
            cursor: pointer;

            .colorSign {
                float: left;
                width: 13px;
                margin-right: 5px;
            }

            .iconSign {
                width: 18px;
                height: 18px;
                margin-right: 5px;
                object-fit: contain;
            }

            span {
                color: #fff;
                float: right;
                max-width: 97px;
                font-size: 12px;
                word-break: break-all;
            }
        }

        .vs-legend--item:hover {
            opacity: .7;
        }
    }

    .vs-legend-scorll::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0px;
    }


}
</style>

