<template>
    <view>
        <template v-if="loading && modelValue.length == 0">
            <u-loading-icon text="加载中" textSize="18"></u-loading-icon>
        </template>
        <template v-else-if="!loading && modelValue.length > 0">
            <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>
        </template>
        <template v-else-if="!loading && modelValue.length == 0">
            <view class="flex flex-col items-center text-gray4">
                <image :src="emptyImg" />
                <text>暂无模板可填写</text>
            </view>
        </template>
    </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import emptyImg from '@/static/images/error.png'

export interface ISummary {
    formTitle: string
    formType: number
    value: string
}
defineProps({
    modelValue: {
        type: Array as PropType<ISummary[]>,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    }
})
</script>
<style scoped lang="scss">
.form {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
    .prefix {
        &::before {
            content: '* ';
            color: #f5222d;
        }
    }
}
</style>
