<template>
  <view class="page">
    <uv-navbar title="故障反馈" bgColor="#C6171E" leftIconColor="#FFFFFF" :titleStyle="{ color: '#FFFFFF' }" :autoBack="true" :placeholder="true"></uv-navbar>
    <view class="sheet">
      <uv-list border>
        <uv-list-item
            border
            :title="item.title"
            clickable
            show-arrow
            @click="handleClickFaq(item)"
            :note="item.createTime"
            v-for="(item, index) in state.feedbackList" :key="index">
          <template #footer>
            <uv-tags text="已反馈" plain size="mini" type="warning" v-if="item.replyContent"></uv-tags>
            <uv-tags text="待反馈" plain size="mini" type="primary" v-else></uv-tags>
          </template>
        </uv-list-item>
      </uv-list>
    </view>


    <view class="feedback-plus" @click="handleAddFeedback">
      <uv-icon name="plus" color="#FFFFFF"></uv-icon>
    </view>

    <add ref="add_ref" @refresh="loadDataList"></add>
    <add ref="detail_ref"></add>
  </view>
</template>

<script setup lang="ts">
import {onShow} from "@dcloudio/uni-app";
import {reactive, ref} from "vue";
import {body} from "@/utils/https"

import add from '@/pages-user/feedback/add.vue';

const add_ref = ref()
const detail_ref = ref()

const initState = () => ({
  feedbackList: [] as any[],
})

const state = reactive(initState())

onShow(() => {
  loadDataList()
});

const loadDataList = () => {
  body(`/feedback/list`).then((res: any) => {
    state.feedbackList = res.list;
  })
}

const handleClickFaq = (item: any) => {
  detail_ref.value?.open(item, 'detail')
}

const handleAddFeedback = () => {
  add_ref.value?.open(null, 'add');
}
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background: $uni-bg-color-page;
  box-sizing: border-box;
  padding: 40rpx 32rpx;
}

.sheet {
  box-sizing: border-box;
  border-radius: 24rpx;
  background: $uni-bg-color-card;
  overflow: hidden;

  &_bar {
    .head {
      padding: 0rpx 24rpx;
      box-sizing: border-box;

      & > view {
        border-bottom: 1rpx solid $uni-border-color-light;
      }
    }

    .body {
      box-sizing: border-box;
      background-color: rgba(52, 125, 255, 0.06);
      transition: all 0.15s;
      padding: 0rpx 24rpx;
    }

    .body-hidden {
      height: 0px;
      overflow: hidden;
    }

    .body-open {
      height: auto;
      padding-top: 24rpx;
      padding-bottom: 24rpx;
    }

    &:last-child {
      .head {
        & > view {
          border-bottom: none;
        }
      }
    }
  }
}

.feedback-plus {
  position: fixed;
  bottom: 60rpx;
  right: 60rpx;
  width: 90rpx;
  height: 90rpx;
  background: $uni-color-primary;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}
</style>
