<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 years" @click="dropdownItemClick(item)">{{item}}</el-dropdown-item>
                <el-dropdown-item @click="dropdownItemClick('汇总所有')" v-if="isAll">汇总所有</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: () => ([])
    },
    all: {
        type: Boolean,
        default: false
    },
})

const curKey = ref(props.cur)
const years = ref(props.datas)
const isAll = ref(props.all)

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

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

//事件
const emit = defineEmits(['change'])

const dropdownItemClick = (item) => {
    curKey.value = item
    emit('change', item)
}
</script>
