<template>
    <div class="attr-box" @click.stop="(e:MouseEvent)=>e.stopPropagation()">
        <div class="box-header">
            <div class="row items-center attr-header">
                <img class="drag-icon"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1704767732000_329.webp"
                    alt="">
                <div class="title col">国家设置</div>
            </div>
        </div>
        <div class=" grey-bg squer-box row items-center">
            <el-select size="large" filterable v-model="attrs.selectedCountries" placeholder="请选择">
                <el-option  :label="item.label" :value="item.value" :disabled="item.checked" v-for="(item, index) in attrs.countriesData" :key="index" />
            </el-select>
            <el-button size="large" @click="addNewCountryHandler" :disable="attrs.selectedCountries==''">添加</el-button>
        </div>
        <div class="grey-bg q-px-md">
            <div class="row q-py-md border-top" v-for="(x,i) in checkedCountries" :key="i">
                <div class="seriesNo">{{ i+1 }}</div>
                <div style="font-family: pingfangr;font-size: 14px;" class="q-mx-md col">{{ x.name }}</div>
                <el-button type="danger" @click="removeCountryHandler(x.id)" link><IconDelete /></el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMapStore } from '@/store/index'
import { storeToRefs } from 'pinia';
import { reactive, ref } from 'vue';
import { watch } from 'vue';

const mapStore = useMapStore()
const { current,allCountries,checkedCountries } = storeToRefs(mapStore)
const attrs = reactive({
    selectedCountries:'',
    countriesData:[] as any[]
} as any)

const resolveCountries = ()=>{
    attrs.countriesData=[]
    if(allCountries.value){
        Object.keys(allCountries.value).forEach(function(key:string){
            attrs.countriesData.push({
                value:key,
                label:allCountries.value![key]
            });
        })
        checkStatus()
    }
}
const checkStatus = ()=>{
    const idArray = checkedCountries.value.map(x=>x.id)
    attrs.countriesData.forEach((x:any)=>{
        x.checked = idArray.indexOf(x.value)!=-1
    })
}
const addNewCountryHandler = () => {
    if(attrs.selectedCountries){
        mapStore.setCountriesChange({
            exec:1,
            payload:{
                id:attrs.selectedCountries,
                name:allCountries.value![attrs.selectedCountries]
            }
        })
        attrs.selectedCountries=''
    }
}
const removeCountryHandler=(id:string)=>{
    mapStore.setCountriesChange({
        exec:0,
        payload:{
            id:id,
            name:allCountries.value![attrs.selectedCountries]
        }
    })
}
resolveCountries()

watch(()=>allCountries.value,()=>{
    resolveCountries()
})
watch(()=>checkedCountries.value,()=>{
    checkStatus()
})
</script>
<style>
.squer-box .el-input__wrapper,
.squer-box .el-button--large{
    border-radius: 0 !important;
    border-left: none !important;
}
.attr-box .seriesNo{
    background-color: #000;
    color: #f5f5f5; 
    width:20px;
    height: 20px; 
    line-height: 20px;
    font-size: 11px;
    border-radius: 20px; 
    text-align: center;
    
}
.attr-box .border-top{
    border-top: 1px solid rgba(204, 204, 204, .3);
}
</style>