<template>
    <el-select class="app-invoice" value-key="autoid" :placeholder="placeholder" v-model="selectedItem"
        @change="onChange" @clear="onChange" clearable>
        <el-option class="app-invoice-item" v-for="(item, i) in dataList" :key="i"
            :label="[getReceiptTypeName(item.receipttype), item.username].join(' ')" :value="item" />
    </el-select>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { getReceiptTypeName } from '@/constants/receipt'
import { queryWrUserReceiptInfo } from '@/services/api/user'
import { useLoginStore } from '@/stores'

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

const { getUserId } = useLoginStore()
const emit = defineEmits(['update:modelValue', 'change'])
const dataList = shallowRef<Ermcp.WrUserReceiptInfoRsp[]>([])
const selectedItem = shallowRef<Ermcp.WrUserReceiptInfoRsp>()

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

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

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