<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 dataList" :key="i" :label="item.templatename"
            :value="item">
            <h4 class="app-performance-item__title">{{ item.templatename }}</h4>
            <div class="app-performance-item__content">
                <div class="block" v-for="(step, j) in item.LstStep" :key="j">
                    <el-tag :type="j % 2 ? 'warning' : ''">{{ step.steptypename }}</el-tag>
                    <span class="block-label">{{ step.stepdate }}</span>
                </div>
            </div>
        </el-option>
    </el-select>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { queryPermancePlanTmp } from '@/services/api/performance'

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

const emit = defineEmits(['update:modelValue'])

const dataList = shallowRef<Ermcp.PermancePlanTmpRsp[]>([])
const selectedItem = shallowRef<Ermcp.PermancePlanTmpRsp>()

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

queryPermancePlanTmp({
    success: (res) => {
        dataList.value = res.data
        selectedItem.value = res.data.find((e) => e.autoid === props.modelValue)
    }
})
</script>

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