<script lang="ts" setup>
    import { USER_ID_KEY } from '/@/enums/cacheEnum'

    const db = uniCloud.database()
    const dbCollectionName = 'opendb-feedback'

    const model = reactive({
        userId: uni.getStorageSync(USER_ID_KEY),
        content: '',
        mobile: '',
        imgs: [],
        loading: false,
    })

    function submit() {
        Message.loading('提交中...')

        // 使用 clientDB 提交数据
        db.collection(dbCollectionName)
            .add({
                user_id: model.userId,
                content: model.content,
                mobile: model.mobile,
                imgs: model.imgs,
            })
            .then(() => {
                Message.toast('提交成功')
                setTimeout(() => uni.navigateBack(), 500)
            })
            .catch((err) => {
                uni.showModal({
                    content: err.message || '请求服务失败',
                    showCancel: false,
                })
            })
            .finally(() => {
                uni.hideLoading()
            })
    }
</script>

<template>
    <view class="feedback-body">
        <text class="text-black">问题反馈和意见建议 <text style="color: red">*</text></text>
        <textarea
            placeholder="请描述您遇到的问题或对本产品的建议..."
            v-model="model.content"
            class="feedback-textare"
            maxlength="-1"
        ></textarea>

        <view class="image-title">
            <text class="text-black">上传问题截图<text class="text-grey"> (选填，最多可上传6张) </text> </text>
            <view class="text-grey">{{ model.imgs.length }}/6</view>
        </view>
        <view class="filepicker">
            <uni-file-picker file-mediatype="image" :limit="6" return-type="array" v-model="model.imgs" />
        </view>

        <text class="text-black">联系方式<text class="text-grey">(选填)</text> </text>
        <input class="feedback-input" v-model="model.mobile" placeholder="请输入您的手机号" />
        <view class="btn">
            <fui-button
                :disabled="!model.content || model.loading"
                :loading="model.loading"
                type="primary"
                @tap="submit"
            >
                提 交
            </fui-button>

            <!-- 安全区 -->
            <fui-safe-area />
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .text-black {
        color: #303133;
        font-size: 32rpx;
    }

    .text-grey {
        color: #bcbcbc;
        font-size: 24rpx;
        margin-left: 15rpx;
    }

    .feedback-quick {
        padding-right: 10rpx;
        color: #606266;
        font-size: 32rpx;
    }

    .feedback-body {
        padding: 30rpx;
        background-color: white;
        min-height: 100vh;
        box-sizing: border-box;
    }

    .feedback-textare {
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        height: 266rpx;
        color: #303133;
        font-size: 28rpx;
        line-height: 2em;
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx 30rpx;
        border-radius: 20rpx;
        background-color: #f5f6f8;
    }

    .feedback-input {
        font-size: 28rpx;
        color: #303133;
        background-color: #f5f6f8;
        border-radius: 20rpx;
        height: 100rpx;
        min-height: 100rpx;
        padding: 0 30rpx;
        margin-top: 30rpx;
        margin-bottom: 60rpx;
    }

    .btn-submit {
        border-radius: 20rpx;
        color: #ffffff;
        margin-top: 100rpx;
        background-color: #007aff;
        margin-bottom: 70rpx;
    }

    .image-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #606266;
    }

    .filepicker {
        margin-top: 30rpx;
        margin-bottom: 30rpx;
    }

    .btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 30rpx;
    }
</style>
