<template>
  <view class="feedback-content">
    <view class="content-item">
      <view class="item-label">类型：</view>
      <view class="item-content">{{ opinionType(details.opinionType) }}</view>
    </view>
    <view class="content-item">
      <view class="item-label">提交时间：</view>
      <view class="item-content">{{ details.submitTime || "--" }}</view>
    </view>
    <view class="content-item content-item-tag">
      <view class="item-label">问题描述：</view>
      <view class="item-content">{{ details.opinionContent || "--" }}</view>
    </view>
    <view class="content-item content-item-tag">
      <view class="item-label">上传凭证：</view>
      <view
        class="item-content"
        v-if="details.opinionImgs && details.opinionImgs.length > 0"
      >
        <image
          v-for="(item, index) in details.opinionImgs"
          :key="index"
          :src="item"
          mode="aspectFill"
        ></image>
      </view>
      <view class="item-content" v-else>--</view>
    </view>
  </view>
  <uv-gap height="12" bgColor="#f7f7f7"></uv-gap>
  <view class="feedback-reply">
    <view class="content-item">
      <view class="item-label">回复状态：</view>
      <view class="item-content" v-if="details.opinionStatus != null">{{
        details.opinionStatus ? "已回复" : "待回复"
      }}</view>
      <view class="item-content" v-else>--</view>
    </view>
    <view class="content-item">
      <view class="item-label">回复时间：</view>
      <view class="item-content">{{ details.operateTime || "--" }}</view>
    </view>
    <view class="content-item content-item-tag">
      <view class="item-label">回复内容：</view>
      <view class="item-content">{{ details.operateContent || "--" }}</view>
    </view>
  </view>
</template>

<script setup>
import { userOpinionInfo } from "@/api/complaints";
import { dataType } from "@/api/common";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const details = ref({});
const typelist = ref([]);
const getDetails = (opinionId) => {
  userOpinionInfo(opinionId).then((res) => {
    details.value = res.data;
  });
};
const opinionType = (type) => {
  return typelist.value.find((item) => item.dictValue == type)?.dictLabel;
};
onLoad((options) => {
  dataType("user_opinion_type").then((res) => {
    if (res.code == 200) {
      typelist.value = res.data || [];
    }
  });
  // getTypelist();
  getDetails(options.opinionId);
});
</script>

<style lang="scss" scoped>
.feedback-content,
.feedback-reply {
  padding: 30rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: normal;

  .content-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #1a1a1a;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border: none;
    }

    .item-content {
      color: #808080;
    }

    image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 14rpx;
      vertical-align: middle;
      margin-right: 17rpx;

      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }

  .content-item-tag {
    display: block;

    .item-label {
      margin-bottom: 10rpx;
    }
  }
}
</style>
