<template>
    <div class="replied">
        <div class="problem-description">投诉建议</div>
        <div class="text-box">
            <textarea class="content" disabled="trun" v-model="questionDesc"> </textarea>
            <text class="current-word">{{ inputLength }}/{{ wordMax }}</text>
        </div>
        <div class="picture-position">
            <block v-for="imgs in imagesPath" :key="imgs.index">
                <image class="img-size-box" :src="evn.APP_IMAGE_BASE_API + imgs" mode="aspectFit" />
            </block>
        </div>
        <div class="feedback-replied-line"></div>
        <div class="problem-description">平台回复</div>
        <div class="replied-content">{{ feedbackInfo.replyMessage }}</div>
    </div>
</template>

<script setup>
import evn from "@/utils/config";
import { getFeedbackList } from "@/api/common";
import { onLoad } from "@dcloudio/uni-app";

const wordMax = 300;
const replyMessage = ref(null);
let questionDesc = ref("");
let id = ref("");
let feedbackInfo = ref([]);
let imagesPath = ref([]);
let feedbackListData = ref([]);

const inputLength = computed(() => {
    return questionDesc.value.length;
});
const getFeedbackArr = () => {
    // feedbackListData = res.feedbackListData;
    getFeedbackList()
        .then(res => {
            feedbackListData = res.data;
            // feedbackListData = feedbackListData;
            console.log("feedbackListData:", feedbackListData);
            feedbackInfo.value = feedbackListData.find(function (person) {
                // console.log("person.id=", person.id);
                // console.log("id=", id);
                return person.id === id;
            });
            console.log("feedbackInfo=", feedbackInfo);
            questionDesc.value = feedbackInfo.value.questionDesc;
            console.log("questionDesc=", questionDesc);
            imagesPath.value = feedbackInfo.value.imagesPath.split(",");
            console.log("imagesPath=", imagesPath);
            replyMessage.value = feedbackInfo.value.replyMessage;
            console.log(replyMessage);
            //     feedbackListData.push(...res.data);
        })
        .catch(res => {});
};
onLoad(options => {
    id = options.id;
    console.log("id=", id);
});
onReady(() => {
    getFeedbackArr();
});
</script>

<style lang="scss" scoped>
page {
    background-color: #fff;
}
.replied {
    width: 750rpx;
}
.replied .problem-description {
    font-size: 36rpx;
    font-weight: 600;
    color: #1b2026;
    margin-top: 32rpx;
    margin-left: 32rpx;
}
.replied .text-box {
    width: 686rpx;
    height: 272rpx;
    margin-top: 32rpx;
    margin-left: 32rpx;
    border-radius: 8rpx;
    background: #f2f5fb;
}
.replied .text-box .content {
    width: 640rpx;
    height: 190rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #77818f;
    margin-left: 32rpx;
    top: 32rpx;
    background: #f2f5fb;
}
.replied .text-box .current-word {
    font-size: 28rpx;
    color: gray;
    position: absolute;
    right: 72rpx;
    margin-top: 32rpx;
}
.replied .picture-position {
    width: 610rpx;
    height: 160rpx;
    display: flex;
    margin-top: 32rpx;
    margin-left: 32rpx;
}
.replied .picture-position .img-size-box {
    width: 158rpx;
    height: 160rpx;
    border-radius: 4rpx;
    margin-right: 16rpx;
}
.replied .feedback-replied-line {
    margin-top: 32rpx;
    width: 750rpx;
    height: 16rpx;
    background: #f3f4f8;
}
.replied .replied-content {
    width: 686rpx;
    height: 288rpx;
    margin-top: 16rpx;
    margin-left: 32rpx;
    font-size: 24rpx;
    line-height: 36rpx;
}
</style>