<template>
    <view class="design-feedback">
        <view class="remark-area">
            <textarea
                :value="innerValue"
                :placeholder="placeholder"
                :auto-height="autoHeight"
                @input="handleInput"
                class="w-full"
            ></textarea>
        </view>
        <view class="picture-area">
            <u-upload
                class="upload-wrapper"
                :fileList="fileList['repairImage']"
                name="repairImage"
                :maxCount="9"
                multiple
                @beforeRead="beforeRead"
                @afterRead="afterRead"
                @delete="deletePic"
                :width="80"
                :height="80"
                :class="setClassName"
            ></u-upload>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, watch, unref, computed } from 'vue'
import { useUploadValidate } from '@/hooks/useUploadValidate'

const props = defineProps({
    placeholder: {
        type: String,
        default: '请输入备注信息，最多250字'
    },
    autoHeight: {
        type: Boolean,
        default: true
    },
    remark: {
        type: String,
        default: ''
    },
    maxlength: {
        type: Number,
        default: 250
    },
    imageList: {
        type: Object,
        default: () => ({})
    }
})
const emit = defineEmits(['update:remark', 'update:imageList'])

const innerValue = ref('')
const handleInput = e => {
    const { value } = e.detail
    innerValue.value = value
    emit('update:remark', value)
}

const { fileList, beforeRead, afterRead, deletePic } = useUploadValidate()

const setClassName = computed(() => (fileList.value['repairImage'].length <= 4 ? 'column-4' : ''))

watch(
    fileList,
    val => {
        emit('update:imageList', unref(val))
    },
    {
        deep: true
    }
)
watch(
    () => props.remark,
    val => {
        innerValue.value = val
    }
)
watch(
    () => props.imageList,
    val => {
        fileList.value = val
    },
    { deep: true }
)
</script>

<style lang="scss" scoped>
.design-feedback {
    padding: 32rpx 24rpx 20rpx;
    background-color: $white-1;
    border-radius: 16rpx;
    textarea {
        font-size: 28rpx;
        min-height: 200rpx;
    }
    .picture-area {
        margin-top: 20rpx;
    }
}
</style>
