<template>
    <LineAttributes v-if="current && current._className=='MapArc'"></LineAttributes>
    <AreaAttributes v-if="current && current._className=='MapPolygon'"></AreaAttributes>
    <MarkAttributes v-if="current && current._className=='MapImageSeries'"></MarkAttributes>
    <TextAttributes v-if="current && current._className=='Label'"></TextAttributes>
    <CountriesAttrbutes v-if="current && current=='Country'"></CountriesAttrbutes>
    <SpLineAttributes v-if="current && current._className=='MapSpline'"></SpLineAttributes>
</template>

<script setup lang="ts">
import { useMapStore } from '@/store/index'
import { storeToRefs } from 'pinia';
import LineAttributes from './LineAttributes.vue';
import AreaAttributes from './AreaAttributes.vue';
import MarkAttributes from './MarkAttributes.vue';
import TextAttributes from './TextAttributes.vue';
import CountriesAttrbutes from './CountriesAttrbutes.vue';
import SpLineAttributes from './SpLineAttributes.vue';

const mapStore = useMapStore()
const { current } = storeToRefs(mapStore)

</script>
<style>
@import url('../../../assets/styles/mapIcon.css');
.attr-box {
    width: 208px;
    background-color: #FFF !important;
    background-image: none !important;

    right: 20px;
    left: unset;
    top: 45px;
    bottom: 200px;
    position: absolute;
    z-index: 9;
    overflow: auto;
}

.attr-box .attr-header {
    height: 30px;
    line-height: 30px;
    font-size: 10px;
    overflow: hidden;
    padding: 0 5px 0 0;
    background-color: #ebebeb;
    border-color: rgba(204, 204, 204, .3);
    margin-right: 0;
}

.grey-bg {
    background-color: #ebebeb;
    border-color: rgba(204, 204, 204, .3);
}

.attr-box .attr-header .drag-icon {
    width: 6px;
    /* height: 30px; */

    margin: 0 8px 0 5px;
}

.attr-box .attr-header .title {
    font-size: 11px;
    color: rgba(0, 0, 0, .4);
}

.attr-box .attr-header .btn {
    cursor: pointer;
}

.attr-box .attr-header .btn:hover {
    color: #f56c6c;
}

.attr-box .attr-items {
    padding: 5px 15px;
}

.attr-box .attr-items i {
    color: #000;
    font-size: 20px;
    /* line-height: 40px; */
}
.attr-box .attr-items .arrow-type{
    border-right: 1px solid rgba(0,0,0,.05);
    border-top: 1px solid rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.attr-box .attr-items .arrow-type>i {
    color: rgba(0,0,0,.2);
    width: 100%;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    border-style: none solid none none;
    
}
.attr-box .attr-items .arrow-type:hover,
.attr-box .attr-items .arrow-type.active{
    background: #FFF !important;
    cursor: pointer;
}
.attr-box .attr-items .arrow-type:hover i,
.attr-box .attr-items .arrow-type.active i{
    color: #000;
}
.attr-box .color-box{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
    background-repeat: repeat;
    background-size: 10px;
    background-position: top left;
    width: 34px;
    height: 34px;
}
.attr-box .el-checkbox__label{
    font-size: 11px;
    padding-right: 16px;
}
</style>