<template>
    <div class="info-radio">
        <el-radio-group
            v-model="model"
            :size="row.size"
            @change="handleCheckedCitiesChange"
        >
            <template v-if="row.radioType === 'button'">
                <span
                    v-for="(item, index) in row.radio()"
                    :key="index"
                >
                    <el-radio-button
                        :label="typeof item === 'string' ? item : item.value"
                        :border="row.border"
                        :disabled="row.disabled?.()"
                    >
                        {{ typeof item === 'string' ? item : $t(item.label) }}
                    </el-radio-button>
                </span>
            </template>
            <template v-else>
                <el-radio
                    v-for="(item, index) in row.radio()"
                    :key="index"
                    :label="typeof item === 'string' ? item : item.value"
                    :border="row.border"
                    :disabled="row.disabled?.()"
                >
                    {{ typeof item === 'string' ? item : $t(item.label) }}
                    <el-tooltip
                        v-if="item?.tips"
                        placement="top"
                        :content="$t(item?.tips?.()?.split('\n')?.join('<br/>'))"
                    >
                        <el-icon
                        class="tooltips"
                        size="16px"><Warning /></el-icon>
                    </el-tooltip>
                </el-radio>
            </template>
        </el-radio-group>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import useModel from '../../../script/help/useModel'
import { RadioInterface } from './index'
import { Warning } from '@element-plus/icons-vue'
export default defineComponent({
    props: {
        row: {
            type: Object as PropType<RadioInterface>,
            default: () => {
            }
        },
        modelData: {
            type: Object,
            default: () => {
            }
        },
        addIndex: {
            type: [Number, String],
            default: ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        const model = useModel(modelData, row.model, row.deepData, props.addIndex)
        const handleCheckedCitiesChange = (value: string): void => {
            row.methods?.(value, modelData)
        }
        return {
            model,
            handleCheckedCitiesChange
        }
    }
})
</script>
<style lang="scss" scoped>
    .contentTip {
        max-width: calc(50vw)
    }
    :deep(.el-form-item__content) {
        position: relative;
        .tooltips {
            position: absolute;
            left: -20px;
            top: 8px;
        }
    }
</style>
