<template>
    <el-dropdown>
        <div class="el-dropdown-link">
            <span class="mr-2">{{curKey}}</span>
            <HcIcon name="arrow-down-s" ui="arrow-icon"/>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in itemData" @click="dropdownItemClick(item)">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import {ref, watch} from "vue"

//初始
const props = defineProps({
    cur: {
        type: [String, Number],
        default: ''
    },
    datas: {
        type: Array,
        default: () => ([])
    }
})

const curKey = ref(props.cur)
const itemData = ref(props.datas)

//监听
watch(() => [
    props.cur,
], ([cur]) => {
    curKey.value = cur
})

//深度监听
watch(() => [
    props.datas,
], ([datas]) => {
    itemData.value = datas
}, {deep: true})


const dropdownItemClick = (item) => {
    curKey.value = item.name
}
</script>
