<template>
    <NavBar :showIcon="true" :showTitle="true" title="投诉建议" backgroundBox="#FFFFFF"></NavBar>
    <view class="feedback-page">
        <view class="title">问题描述</view>
        <wd-textarea
            show-word-limit
            maxlength="300"
            :readonly="id"
            custom-class="textarea"
            v-model="params.questionDesc"
            placeholder="请输入你的问题"
        />
        <view class="img-list">
            <image
                v-for="(item, index) in imgArr"
                :key="index"
                :src="evn.APP_IMAGE_BASE_API + item"
                @click="previewImage(evn.APP_IMAGE_BASE_API + item)"
            />
            <view class="up-load" @click="chooseImage" v-if="(imgArr.length < 3 && id == null) || !id">
                <wd-icon name="add" size="60rpx" color="#77818F"></wd-icon>
            </view>
        </view>
        <view class="tip" v-if="!id">上传图片（可上传0-3张图片）</view>
        <view class="msg">
            <view class="title">平台回复</view>
            <view class="hf">{{ detail.replyMessage || "暂无回复" }}</view>
        </view>
        <wd-tabbar
            v-if="!id"
            @click="feedbackAddFn"
            custom-style="display: flex;justify-content: center !important;"
            fixed
            placeholderW
            safeAreaInsetBottom
        >
            <wd-button :round="false" class="foot-btn" :disabled="params.questionDesc == '' || params.imagesPath == ''"
                >投诉建议</wd-button
            >
        </wd-tabbar>
    </view>
</template>

<script setup>
import evn from "@/utils/config.js";
import { uploadFiles } from "@/utils/fileUpload";
import { feedbackAdd, feedbackById } from "@/api/user";
const value = ref("");
const imgArr = ref([]);
const id = ref(null);
const detail = ref({});
const params = reactive({
    questionDesc: "",
    imagesPath: ""
});
onLoad(option => {
    id.value = option.id;
    feedbackByIdFn(option.id);
});
const feedbackByIdFn = id => {
    feedbackById(id).then(feedback => {
        detail.value = feedback.data;
        params.questionDesc = feedback.data.questionDesc;
        imgArr.value = feedback.data.imagesPath.split(",");
    });
};
function previewImage(url) {
    xma.previewImage({
        urls: [url] // 需要预览的图片http链接列表
    });
}
/* 选择图片 */
const chooseImage = () => {
    console.log(123);
    if (imgArr.value.length < 3) {
        uni.chooseImage({
            count: 1,
            success: async ({ tempFiles }) => {
                const res = await uploadFiles(tempFiles);
                imgArr.value.push(res[0].key);
                params.imagesPath = imgArr.value.join(",");
            }
        });
    } else {
        xma.showToast({
            title: "最多只能上传3张图片",
            icon: "none"
        });
    }
};

const feedbackAddFn = () => {
    xma.showLoading();
    if (params.questionDesc == "" || params.imagesPath == "") {
    } else {
        feedbackAdd(params).then(res => {
            if (res.code == 200) {
                xma.hideLoading();
                xma.navigateBack({
                    delta: 1
                });
            }
        });
    }
};
</script>

<style lang="scss" scoped>
.feedback-page {
    width: 750rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16rpx 32rpx;
    .msg {
        padding-top: 32rpx;
        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: #1b2026;
            position: relative;
        }
        .title::before {
            content: " ";
            position: absolute;
            left: 8rpx;
            top: 28rpx;
            width: 122rpx;
            height: 16rpx;
            opacity: 1;

            background: linear-gradient(90deg, rgba(241, 246, 251, 0) 0%, #76a5ff 100%);
        }
        .hf {
            font-size: 24rpx;
            line-height: 36rpx;
            color: #1b2026;
            margin-top: 16rpx;
        }
    }
    .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #1b2026;
    }
    .textarea {
        margin-top: 32rpx;
        background: #f2f5fb;
        max-height: 272rpx;
        :deep(.wd-textarea__value) {
            background: #f2f5fb !important;
            max-height: 272rpx;
            width: 100%;
            padding: 0 !important;
        }
        :deep(.wd-textarea__count) {
            background: none !important;
        }
    }
    .img-list {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-top: 32rpx;
        .up-load {
            width: 160rpx;
            height: 160rpx;
            border-radius: 4rpx;
            background: #f2f5fb;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        image {
            width: 160rpx;
            height: 160rpx;
        }
    }
    .tip {
        font-size: 24rpx;
        margin-top: 16rpx;
        color: #1b2026;
    }

    .foot-btn {
        position: fixed;
        width: 622rpx;
        height: 80rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
}
</style>
