<template>
    <el-select popper-class="app-performance" value-key="autoid" :placeholder="placeholder" v-model="selectedItem"
        @change="onChange" clearable>
        <el-option class="app-performance-item" v-for="(item, i) in performanceStore.performanceTemplates" :key="i"
            :label="item.templatename" :value="item">
            <h4 class="app-performance-item__title">{{ item.templatename }}</h4>
            <app-performance-rule :item="item" />
        </el-option>
    </el-select>
</template>

<script lang="ts" setup>
import { shallowRef, onMounted } from 'vue'
import { usePerformanceStore } from '@/stores'
import AppPerformanceRule from '../performance-rule/index.vue'

const props = defineProps({
    modelValue: Number,
    placeholder: {
        type: String,
        default: '请选择'
    }
})

const emit = defineEmits(['update:modelValue'])
const performanceStore = usePerformanceStore()
const selectedItem = shallowRef<Ermcp.PermancePlanTmpRsp>()

const onChange = (item: Ermcp.PermancePlanTmpRsp) => {
    emit('update:modelValue', item.autoid)
}

onMounted(() => {
    selectedItem.value = performanceStore.performanceTemplates.find((e) => e.autoid === props.modelValue)
    if (!selectedItem.value) {
        emit('update:modelValue')
    }
})
</script>

<style lang="less">
@import './index.less';
</style>