<script setup>
import XNav from "../../components/XNav.vue";
import XForm from "../../components/XForm.vue";
import XFormItem from "../../components/XFormItem.vue";
import XUpload from "../../components/XUpload.vue";
import XInput from "../../components/XInput.vue";
import Api from "../../api";
import {reactive} from "vue";
import {backPage, showToast} from "../../utils/uils";

const form = reactive({
    content: null,
    images: [],
    mobile: null,
});

const success = async () => {
    const {msg} = await Api.system.complaint(form);
    showToast(msg);
    backPage();
}
</script>

<template>
    <x-nav></x-nav>
    <view class="p-[20rpx]">
        <x-form>
            <x-form-item>
                <template v-slot:label>
                    <view class="!flex items-center gap-[12rpx]">
                        <text class="!mt-[10rpx] text-[red]">*</text>
                        投诉内容
                    </view>
                </template>
                <view class="bg-[#F2F3F5] rounded-[8rpx] overflow-hidden px-[24rpx] py-[8rpx] relative">
                    <textarea
                        v-model="form.content"
                        class="!w-full !h-[400rpx]"
                        placeholder="请填写你想投诉的问题，以便我们提供更好的帮助">
                    </textarea>
                    <view class="absolute right-[24rpx] z-10 bottom-[8rpx] text-[#86909C]">22/200</view>
                </view>
            </x-form-item>
            <x-form-item label="相关截图">
                <x-upload v-model:files="form.images"></x-upload>
            </x-form-item>
            <x-form-item label="联系方式">
                <template v-slot:label>
                    <view class="!flex items-center gap-[12rpx]">
                        <text class="!mt-[10rpx] text-[red]">*</text>
                        联系方式
                    </view>
                </template>
                <x-input v-model:model-value="form.mobile" placeholder="手机号或微信号"></x-input>
            </x-form-item>
        </x-form>

        <view class="fixed bottom-[24rpx] w-[calc(100vw-40rpx)]">
            <tui-button @click="success">确定提交</tui-button>
        </view>
    </view>
</template>

<style>
page {
    background-color: #fff;
}
</style>

<style scoped lang="scss">

</style>
