<template>
    <NavBar :showIcon="true" backgroundBox="#ffffff" :showTitle="true" title="投诉建议"></NavBar>
    <div class="feedback-wait">
        <div class="problem-description">投诉建议</div>
        <div class="text-box">
            <textarea class="content" placeholder="请输入你的问题" maxlength="300" v-model="textInputs"> </textarea>
            <text class="current-word">{{ inputLength }}/{{ wordMax }}</text>
        </div>
        <div class="picture-position">
            <div v-for="(img, index) in imgList" :key="index">
                <img class="img-size-box" :src="img" data-index="{{index}}" />
                <img @click="deleteimg(index)" class="picture-del" src="/src/static/image/user/feedback_picture_del.png" alt="" />
            </div>
            <button class="div-picture" @click="chooseSource" v-if="imgList.length < 3">
                <img class="div-picture-add" src="/src/static/image/user/feedback_picture_add.png" alt="" />
            </button>
        </div>

        <text class="text-content">上传图片(可上传0-3张图片)</text>
        <div class="content-line"></div>
        <button @click="submit" id="button-submit">提交</button>
    </div>
</template>

<script setup>
import { uploadFiles } from "@/utils/fileUpload";
import { feedbackAdd } from "@/api/common";
import { ref, computed } from "vue";
import { ISuccessRes } from "rexma-cli";
import { useRouter } from "vue-router";
const router = useRouter();
const wordMax = ref(300);
let imgList = ref([]);
let item = ref([]);
const textInputs = ref("");
let questionDesc = ref("");
let imagesPath = ref("");
let imagesPaths = [];
let upArr = ref([]);

const inputLength = computed(() => {
    // console.log(imagesPaths.length);
    return textInputs.value.length;
});

const chooseSource = () => {
    uni.chooseImage({
        count: 3,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择,拍照上传
        success: async function (res) {
            // imgList = res.tempFiles.map(File => ({
            //     path: File.path
            // }));
            imgList.value = [...imgList.value, ...res.tempFilePaths];
            if (imgList.value.length > 3) {
                imgList.value = imgList.value.slice(0, 3);
            }
            let tempFiles = res.tempFiles;
            upArr = await uploadFiles(tempFiles);
            const imgs = upArr.map(({ key }) => [key]);
            imagesPaths = [...imagesPaths, ...imgs];
            if (imagesPaths.length > 3) {
                imagesPaths = imagesPaths.slice(0, 3);
            }
            // imagesPaths = upArr;
            imagesPath = imagesPaths.join(",");
        }
    });
};

const deleteimg = index => {
    imgList.value.splice(index, 1);
    imagesPaths.splice(index, 1);
    imagesPath = imagesPaths.join(",");
    console.log(imgList);
    console.log(imagesPaths);
    console.log(imagesPath);
};

const submit = res => {
    if (imagesPaths.length === undefined) {
        uni.showToast({
            title: "请至少上传一张图片",
            duration: 3000
        });
        return;
    }
    if (textInputs.value.length < 10) {
        uni.showToast({
            title: "请至少输入十个字及以上",
            duration: 3000
        });
        return;
    }
    // console.log(textInputs.value);
    questionDesc = textInputs.value;
    console.log(imgList);
    console.log("questionDesc:", questionDesc);
    console.log("imagesPath:", imagesPath);
    xma.showLoading();
    getFeedbackAdd({
        questionDesc,
        imagesPath
    }).then(res => {
        if (res.code == 200) {
            xma.hideLoading();
            xma.navigateBack({
                delta: 1
            });
        }
    });
    // router.go(-1);
};
</script>

<style lang="scss" scoped>
page {
    background-color: #ffffff;
}
.feedback-wait {
    width: 750rpx;
    padding-left: 32rpx;
}
.feedback-wait .problem-description {
    margin-top: 16rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #1b2026;
}
.feedback-wait .text-box {
    width: 686rpx;
    height: 272rpx;
    margin-top: 32rpx;
    background: #f2f5fb;
    border-radius: 8rpx;
}
.feedback-wait .text-box .current-word {
    position: absolute;
    right: 72rpx;
    margin-top: 32rpx;
    font-size: 28rpx;
    color: gray;
}
.feedback-wait .text-box .content {
    top: 32rpx;
    width: 640rpx;
    height: 190rpx;
    margin-left: 32rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #77818f;
}
.feedback-wait .picture-position {
    display: flex;
    width: 610rpx;
    height: 160rpx;
    margin-top: 32rpx;
}
.feedback-wait .picture-position .img-size-box {
    display: flex;
    width: 158rpx;
    height: 160rpx;
    margin-right: 16rpx;
    border-radius: 4rpx;
}
.feedback-wait .picture-position .picture-del {
    position: absolute;
    width: 22rpx;
    height: 22rpx;
    margin-top: -160rpx;
    margin-left: 136rpx;
}
.feedback-wait .picture-position .div-picture {
    display: flex;
    justify-content: center;
    width: 158rpx;
    margin-left: 0rpx;
    background: #f2f5fb;
    border-radius: 4rpx;
}
.feedback-wait .picture-position .div-picture .div-picture-add {
    width: 60rpx;
    height: 60rpx;
    margin-top: 50rpx;
}
.feedback-wait .text-content {
    margin-top: 16rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #1b2026;
}
.feedback-wait .content-line {
    position: absolute;
    top: 90%;
    left: 0rpx;
    width: 750rpx;
    height: 1rpx;
    background: rgb(31 35 41 / 15%);
}
.feedback-wait #button-submit {
    position: absolute;
    top: 92%;
    left: 65rpx;
    width: 622rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: #ffffff;
    background: #1f86ff;
    border-radius: 12rpx;
}
</style>
