<template>
    <view>
        <view class="form">
            <view
                class="px-[32rpx] flex flex-col gap-[24rpx]"
                v-for="(item, index) in modelValue"
                :key="`unique_${index}`"
            >
                <view class="prefix">{{ item.formTitle }}</view>
                <view>
                    <u-input
                        v-if="item.formType == 1"
                        v-model="item.value"
                        placeholder="请输入"
                        border="surround"
                    ></u-input>
                    <u-textarea
                        v-else-if="item.formType == 2"
                        v-model="item.value"
                        class="c-textarea"
                        placeholder="请输入"
                    ></u-textarea>
                </view>
            </view>
        </view>
        <view class="px-[60rpx] mt-[48rpx]" v-if="readonly == ''">
            <u-button class="btn" color="#0E66FB" shape="circle" @click="handleConfirm">
                确认
            </u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

export interface ISummary {
    formTitle: string
    formType: number
    value: string
}
defineProps({
    modelValue: {
        type: Array as PropType<ISummary[]>,
        default: () => []
    },
    readonly: {
        type: String,
        default: ''
    }
})
const emit = defineEmits(['handleConfirm'])
const handleConfirm = () => {
    emit('handleConfirm')
}
</script>
<style scoped lang="scss">
.form {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
    .prefix {
        &::before {
            content: '* ';
            color: #f5222d;
        }
    }
}
:deep(.btn) {
    button {
        @apply h-[88rpx];
    }
}
</style>
