<template>
  <view class="suggest-container">
    <view class="suggest-header-wrapper" :style="{ backgroundImage: `url(${minioUrl}/suggest_bg.png)` }">
      <view class="suggest-tips">
        <view class="title">尊敬的顾客</view>
        <view class="sub-title">欢迎您对我们服务区提出建议反馈，我们会对您的问题进行全程跟踪</view>
      </view>
      <image class="header-logo" :src="minioUrl + '/icon_kefubz_01.png'" mode="aspectFill" />
    </view>
    <view class="suggest-block-wrapper">
      <view class="block-item" @click="toSuggest">
        <view class="b-title">投诉建议</view>
        <view class="b-sub-title">提交您建议，将有专业人士为您跟进处理</view>
        <image class="bottom-img" :src="minioUrl + '/icon_kefubz_02.png'" mode="aspectFill" />
      </view>
      <view class="block-item" @click="toRecord">
        <view class="b-title">反馈记录</view>
        <view class="b-sub-title">查看您的反馈记录</view>
        <image class="bottom-img" :src="minioUrl + '/icon_kefubz_3.png'" mode="aspectFill" />
      </view>
    </view>
    <HyCard title="常见问题">
      <view class="suggest-list-wrapper">
        <view class="list-item" v-for="(item, index) in questionList" :key="index" @click="toDetails(item.id)">
          <view class="text">{{ item.title }}</view>
          <image :src="minioUrl + '/icon_kefubz_05.png'" mode="aspectFill" />
        </view>
        <view class="refresh-wrap" @click="tapRefresh">
          <image :src="minioUrl + '/icon_kefubz_04.png'" mode="aspectFill" />
          <text>换一换</text>
        </view>
      </view>
    </HyCard>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getQuestionList } from '@/api/home'
import { useGlobal } from '@/composables/index'

const { minioUrl } = useGlobal()

const questionList = ref<any>([])
const query = ref<any>({
  pageNum: 1,
  pageSize: 3
})

onLoad(() => {
  getQuestionListData()
})

const getQuestionListData = async () => {
  const res = await getQuestionList(query.value)
  if (res.code === 200) {
    questionList.value = res.rows
  }
}

const tapRefresh = () => {
  query.value.pageNum++
  getQuestionListData()
}

const toDetails = (id: string) => {
  uni.navigateTo({
    url: '/base/suggest/details?id=' + id
  })
}

const toSuggest = () => {
  uni.navigateTo({
    url: '/base/suggest/suggest'
  })
}

const toRecord = () => {
  uni.navigateTo({
    url: '/base/suggest/record'
  })
}
</script>

<style lang="scss" scoped>
.suggest-container {
  width: 100%;
  box-sizing: border-box;
  .suggest-header-wrapper {
    width: 100%;
    height: 380rpx;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    box-sizing: border-box;
    padding: 70rpx 0 0 56rpx;
    .header-logo {
      width: 338rpx;
      height: 198rpx;
    }
    .suggest-tips {
      .title {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        line-height: 21rpx;
        margin-bottom: 24rpx;
      }
      .sub-title {
        font-size: 21rpx;
        color: #333;
        font-weight: 400;
        width: 338rpx;
        line-height: 33rpx;
      }
    }
  }
  .suggest-block-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -90rpx;
    margin-bottom: 30rpx;
    .block-item {
      width: 333rpx;
      height: 179rpx;
      border-radius: 14rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 29rpx 0 0 36rpx;
      position: relative;
      &:nth-child(2) {
        margin-left: 24rpx;
        .bottom-img {
          width: 69rpx;
          height: 74rpx;
        }
      }
      .bottom-img {
        position: absolute;
        bottom: 19rpx;
        right: 17rpx;
        width: 77rpx;
        height: 65rpx;
      }
      .b-title {
        font-size: 31rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      .b-sub-title {
        font-size: 17rpx;
        width: 166rpx;
      }
    }
  }
  :deep(.hy-card-container) {
    width: 694rpx;
    margin: 0 auto;
  }
  .suggest-list-wrapper {
    margin-top: 11rpx;
    .list-item {
      width: 100%;
      height: 77rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      border-bottom: 1rpx solid #f4f5f9;
      .text {
        font-size: 25rpx;
        color: #333;
      }
      image {
        width: 9rpx;
        height: 15rpx;
      }
    }
    .refresh-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 20rpx;
      image {
        width: 24rpx;
        height: 24rpx;
      }
      text {
        font-size: 25rpx;
        color: #4e6cef;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
