<template>
  <view class="feedback_page">
    <view class="feedback_page_hader">
      <view class="feedback_page_hader_info">
        <view class="name"> 请填写下列的建议 </view>
        <view class="des"> 我们期待为您带来更好的服务 </view>
      </view>
      <view @click="method?.toWorkOrder" class="feedback_page_hader_btn"> 物业报事 </view>
    </view>
    <view class="feedback_page_function"> 请选择您要建议的功能 </view>
    <view class="feedback_page_type">
      <view
        v-for="(i, index) in useModel?.typeList"
        :key="`item_${index}`"
        :class="`feedback_page_type_item_btn ${i?.value === useModel?.formData?.value?.type ? 'active' : ''}`"
        @click="method.handleSelectType(i)"
      >
        <uni-icons
          :type="i?.icon"
          size="20"
          :color="i?.value === useModel?.formData?.value?.type ? '#2a7efb' : '#999'"
        ></uni-icons>
        {{ i?.label }}
      </view>
    </view>
    <view class="feedback_page_textarea">
      <textarea
        placeholder="欢迎反馈使用建议，帮助我们做得更好（必填）"
        placeholder-class="textarea_placeholder"
        v-model="useModel.formData.value.content"
      ></textarea>
    </view>
    <view class="feedback_page_file">
      <hs-upload
        title="问题页面截图，最多五张（选填）"
        :count="5"
        :size="4"
        v-model:valueModel="useModel.formData.value.images"
      />
      <view class="feedback_page_file_tip">
        若有问题需要咨询或解决，请联系<button open-type="contact">在线客服</button>
      </view>
    </view>

    <hs-footer handleParmaryClick="提交" @handleParmaryClick="method.handleSubmit" />
  </view>
</template>
<script setup lang="ts">
import useModel from './model'
import method from './method'
import { onUnload } from '@dcloudio/uni-app'
onUnload(() => {
  useModel.formData.value = {}
})
</script>

<style lang="scss">
@import './style.scss';
</style>
