<template>
  <uv-sticky>
    <uv-tabs
      :list="tabList"
      :scrollable="false"
      :inactiveStyle="inactiveStyle"
      :activeStyle="activeStyle"
      :lineColor="`url(${ $handleImageUrl('/order/tabs_line.png') }) 100% 100%`"
      lineWidth="64rpx"
      lineHeight="10rpx"
      :customStyle="customStyle"
      @change="tabClick"
    ></uv-tabs>
  </uv-sticky>
  <view class="lists">
    <view class="list-item-box" v-for="(item, index) in list" :key="index">
      <view class="list-item-header-box">
        <text class="list-item-type">{{ opinionType(item.opinionType) }}</text>
        <text
          class="list-item-status"
          :style="{ color: item.opinionStatus ? '#000000' : '#08be5d' }"
          >{{ item.opinionStatus ? "已回复" : "待回复" }}</text
        >
      </view>
      <view class="list-item-desc">{{ item.opinionContent }}</view>
      <view class="list-item-time">{{ item.submitTime }}</view>
      <view class="list-item-imgs">
        <image
          v-for="(img, index) in item.opinionImgs"
          :key="index"
          :src="img + '?x-oss-process=style/w_150'"
          mode="aspectFill"
        ></image>
      </view>
      <uv-button
        type="error"
        color="#eb5153"
        text="查看详情"
        shape="circle"
        @tap="handleView(item)"
      ></uv-button>
    </view>
  </view>

  <noData
    v-if="list.length <= 0"
    :config="{ top: 20, content: '暂无数据~' }"
  ></noData>
  <uv-load-more v-else :status="status" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import { userOpinionOwnPage } from "@/api/complaints";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { dataType } from "@/api/common";

const tabList = ref([{ name: "全部" }, { name: "待回复" }, { name: "已回复" }]);
const list = ref([]);
const typelist = ref([]);
const status = ref("nomore"); //loadmore - 加载前，loading - 加载中，nomore - 没有数据
const params = ref({
  pageNum: 1,
  pageSize: 10,
});

const customStyle = {
  backgroundColor: "#F7F7F7",
};

const inactiveStyle = {
  color: "#1A1A1A",
  fontSize: "32rpx",
};
const activeStyle = {
  color: "#FF0000",
  fontSize: "32rpx",
  fontWeight: "bold",
};
const tabIndex = ref(0);
const tabClick = (e) => {
  // console.log(e);
  tabIndex.value = e.index;
  params.value.pageNum = 1;
  getList();
};

const handleView = (item) => {
  uni.navigateTo({
    url: "/pages/set/feedback/detail?opinionId=" + item.opinionId,
  });
};

const getList = () => {
  let obj = { ...params.value };
  if (tabIndex.value == 1) {
    obj.opinionStatus = 0;
  }
  if (tabIndex.value == 2) {
    obj.opinionStatus = 1;
  }
  userOpinionOwnPage(obj).then((res) => {
    if (params.value.pageNum == 1) {
      list.value = res.rows;
    } else {
      list.value = [...list.value, ...res.rows];
    }
    if (list.value.length < res.total) {
      status.value = "loadmore";
    } else {
      status.value = "noMore";
    }
    uni.stopPullDownRefresh();
  });
};

const opinionType = (type) => {
  return typelist.value.find((item) => item.dictValue == type)?.dictLabel;
};

// 下拉刷新
onPullDownRefresh(() => {
  params.value.pageNum = 1;
  getList();
});
// 上拉加载更多
onReachBottom(() => {
  if (status.value == "loadmore") {
    params.value.pageNum++;
    getList();
  }
});
onMounted(() => {
  dataType("user_opinion_type").then((res) => {
    if (res.code == 200) {
      typelist.value = res.data || [];
    }
  });
  getList();
});
</script>

<style>
page {
  background-color: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
}
</style>

<style lang="scss" scoped>
.lists {
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: normal;
  font-size: 28rpx;
  color: #1a1a1a;

  .list-item-box {
    padding: 40rpx 30rpx;
    background: #ffffff;
    border-radius: 24rpx;

    .list-item-header-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .list-item-type {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .list-item-desc {
      margin-bottom: 8rpx;
    }

    .list-item-time {
      margin-bottom: 20rpx;
      color: #808080;
    }

    .list-item-imgs {
      margin-bottom: 40rpx;

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

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

    :deep(.uv-button) {
      width: 180rpx;
      height: 60rpx;
      margin: 0;
      margin-left: auto;
      border-radius: 30rpx;
      font-size: 24rpx;
    }
  }
}
</style>
