<template>
    <text :class="getClass" :style="getStyle">{{ getStatus.text }}</text>
</template>

<script setup>
import { computed } from 'vue'
import * as dictData from './dictData'
import { cloneDeep } from 'lodash'
const ps = defineProps({
    style: {
        type: Object,
        default: () => {
            return {}
        }
    },
    class: {
        type: String,
        default: ''
    },
    dictkey: {
        type: String,
        default: ''
    },
    options: {
        type: Array,
        default: () => {
            return []
        }
    },
    value: {
        type: [String, Number],
        default: ''
    },
    valueField: {
        type: String,
        default: 'value'
    },
    size: {
        type: Number,
        default: 28
    }
})
const getData = computed(() => {
    if (ps.dictkey) {
        if (dictData[ps.dictkey]) {
            return cloneDeep(dictData[ps.dictkey])
        } else {
            throw new Error('请输入存在的dictkey值')
        }
    } else {
        return ps.options || []
    }
})
const getStatus = computed(() => {
    const data = getData.value.find((item) => item[ps.valueField] == ps.value)
    return data || {}
})
const getStyle = computed(() => {
    return {
        fontSize: ps.size + 'rpx',
        ...ps.style
    }
})
const getClass = computed(() => {
    const _class = []
    if (ps.class) {
        _class.push(ps.class)
    }
    if (getStatus.value.class) {
        _class.push(getStatus.value.class)
    }
    return _class
})
</script>
<style lang="scss" scoped></style>
