<template>
    <!-- 全局单选框 -->
    <up-radio-group
        :style="getStyle"
        class="radio-group"
        v-model="radioValue"
        :placement="placement"
        @change="radioChange"
        :disabled="disabled"
        :borderBottom="borderBottom"
    >
        <up-radio :customStyle="getCustomStyle" v-for="(item, index) in getColumns" :key="index" :label="item.label" :name="item.value"></up-radio>
    </up-radio-group>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import * as dictData from 'mocp/hooks/use-dict/dict-data'
import { cloneDeep } from 'lodash'

const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    //显示为空的value值
    emptyValue: {
        type: [String, Number],
        default: ''
    },
    dictkey: {
        type: String,
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    },
    options: {
        type: Array,
        default: () => {
            return []
        }
    },
    labelField: {
        type: String,
        default: 'label'
    },
    valueField: {
        type: String,
        default: 'value'
    },
    radioAlign: {
        type: String,
        default: 'left'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    customStyle: {
        type: Object,
        default: () => {
            return {}
        }
    },
    // row|column
    placement: {
        type: String,
        default: 'row'
    },
    marginLeft: {
        type: [String, Number],
        default: 16
    },
    marginBottom: {
        type: [String, Number],
        default: 40
    },
    borderBottom: {
        type: Boolean,
        default: false
    }
})
const radioValue = ref('')
//获取单选框样式
const getAlign = computed(() => {
    let radioAlign = 'flex-start'
    if (ps.radioAlign == 'center') {
        radioAlign = 'center'
    } else if (ps.radioAlign == 'right') {
        radioAlign = 'flex-end'
    }
    return radioAlign
})
const getStyle = computed(() => {
    return {
        justifyContent: getAlign.value
    }
})
const getCustomStyle = computed(() => {
    const _style = {
        ...ps.customStyle
    }
    if (ps.placement == 'row') {
        _style.marginLeft = ps.marginLeft + 'rpx'
    }
    if (ps.placement == 'column') {
        _style.marginBottom = ps.marginBottom + 'rpx'
    }
    return _style
})
//获取下拉框的内容Columns
const getColumns = computed(() => {
    if (ps.dictkey) {
        return cloneDeep(dictData[ps.dictkey])
    } else {
        if (ps.options && Object.prototype.toString.call(ps.options[0]) == '[object Object]') {
            return ps.options
        } else {
            return ps.options.map((item) => {
                return {
                    [ps.labelField]: item,
                    [ps.valueField]: item
                }
            })
        }
    }
})
//监听设置默认值
watch(
    [() => ps.modelValue, () => ps.options],
    () => {
        let option = getColumns.value.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
        if (option) {
            radioValue.value = option[ps.valueField]
        } else {
            radioValue.value = ps.emptyValue
        }
    },
    { immediate: true }
)
const radioChange = (value) => {
    es('update:modelValue', value)
    es('change', value)
}
</script>
<style lang="scss" scoped></style>
