<template>
  <view class="suggest-submit-container">
    <!-- 问题类型 -->
    <HyCard title="请选择您要反馈的问题类型">
      <view class="suggest-type-wrapper">
        <view
          v-for="(item, index) in typeList"
          :key="index"
          class="type-item"
          :class="{ active: index === typeIndex }"
          @click="handleTypeClick(index)"
        >
          {{ item.name }}
        </view>
      </view>
    </HyCard>
    <!-- 描述问题 -->
    <HyCard title="请描述您的问题">
      <view class="suggest-common-wrapper">
        <u-input
          v-model="form.content"
          type="textarea"
          :height="328"
          :maxlength="200"
          border
          placeholder="请详细描述您的问题，以便于我们及时跟进及解决（最多可输入200字）"
        ></u-input>
      </view>
    </HyCard>
    <!-- 图片描述 -->
    <HyCard title="图片描述（选填）">
      <view class="suggest-common-wrapper">
        <u-upload ref="uploadRef" width="160" height="160" :action="'/system/oss/upload'" />
      </view>
    </HyCard>
    <!-- 联系方式 -->
    <HyCard title="联系方式">
      <view class="suggest-common-wrapper">
        <u-input v-model="form.phone" placeholder="请输入您的联系方式" />
      </view>
    </HyCard>
    <!-- 提交 -->
    <view class="submit-btn-wrapper" @click="submit">提交</view>
  </view>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, getCurrentInstance } from 'vue'
import { addQuestionFeedback } from '@/api/home'

const { proxy } = getCurrentInstance() as any

const typeList = ref([
  { name: '现场环境', value: 1 },
  { name: '商家服务', value: 2 },
  { name: '商品问题', value: 3 },
  { name: '价格问题', value: 4 },
  { name: '其他', value: 5 }
])
const typeIndex = ref(0)
const categoryId = computed(() => typeList.value[typeIndex.value].value)

const handleTypeClick = (index: number) => {
  typeIndex.value = index
}

const form = reactive({
  content: '',
  phone: ''
})

const pics = ref<any>([])

const submit = () => {
  if (!form.content) {
    uni.showToast({
      title: '请描述您的问题',
      icon: 'none'
    })
    return
  }
  if (!form.phone) {
    uni.showToast({
      title: '请输入您的联系方式',
      icon: 'none'
    })
    return
  }
  // 处理上传的图片
  const files = proxy?.$refs?.uploadRef?.lists.filter((v: any) => v.progress == 100) || []
  files.forEach((file: any) => {
    if (file.response && file.response.data && file.response.data.filePath) {
      pics.value.push(file.response.data.filePath)
    }
  })
  // 构造提交参数
  const submitParams = {
    ...form,
    categoryId: categoryId.value,
    albumPics: pics.value,
    parkId: uni.getStorageSync('parkId')
  }
  // 提交到服务器
  addQuestionFeedback(submitParams).then((res: any) => {
    if (res.code == 200) {
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      // 提交成功后，清空表单数据
      form.content = ''
      form.phone = ''
      pics.value = []
      typeIndex.value = 0
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  })
}
</script>

<style lang="scss" scoped>
.suggest-submit-container {
  box-sizing: border-box;
  padding: 34rpx 28rpx 172rpx 28rpx;
  .suggest-type-wrapper {
    margin-top: 26rpx;
    display: flex;
    flex-wrap: wrap;
    .type-item {
      width: 201rpx;
      height: 63rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f6f7fb;
      font-size: 28rpx;
      color: #a2a8be;
      border-radius: 14rpx;
      margin-right: 16rpx;
      margin-bottom: 15rpx;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &.active {
        background-color: #2375ff;
        color: #fff;
      }
    }
  }
  .suggest-common-wrapper {
    margin-top: 26rpx;
  }
  .submit-btn-wrapper {
    width: 694rpx;
    height: 83rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2374ff;
    font-size: 31rpx;
    color: #fff;
    border-radius: 42rpx;
    margin-top: 50rpx;
    // position: fixed;
    // bottom: 31rpx;
    // left: 28rpx;
  }
}
</style>
