<script setup>
  import { reactive } from 'vue'
  import CardInput from '../components/card-input.vue'
  import { addUserFeedback } from '../../../api/my-index'
  import { useUI } from '@/utils/use-ui'
  import { navigateBack } from '../../../utils/router'

  const list = [
    { text: '功能建议', value: '1' },
    { text: '问题反馈', value: '2' },
    { text: '内容举报', value: '3' },
    { text: '投诉建议', value: '4' },
    { text: '其他', value: '5' }
  ]

  const { showDialog } = useUI()

  const formData = reactive({
    content: '',
    images: '',
    /** 反馈类型：1-功能建议 2-问题反馈 3-内容举报 4-投诉建议 5-其他 */
    type: ''
  })

  const onConfirm = async () => {
    await addUserFeedback(formData)
    const show = await showDialog(
      '提示',
      '感谢您对我们的反馈意见，我们会尽快处理',
      false
    )
    if (show) {
      navigateBack()
    }
  }
</script>

<template>
  <view class="fee-box">
    <CardInput :is-input="false" title="反馈类型">
      <uni-data-checkbox
        mode="tag"
        v-model="formData.type"
        :localdata="list"
      ></uni-data-checkbox>
    </CardInput>

    <CardInput :is-input="false" title="反馈描述">
      <textarea
        v-model="formData.content"
        placeholder="说说您的建议或问题，以便我们提供更好的服务"
        confirm-type="done"
        @confirm="onConfirm"
      />
    </CardInput>

    <CardInput :is-input="false" title="添加图片">
      <cb-file-picker v-model="formData.images"></cb-file-picker>
    </CardInput>

    <!-- 底部按钮 -->
    <bottom-view>
      <cb-button
        :disabled="!formData.content || !formData.type"
        @click="onConfirm"
      >
        提交反馈
      </cb-button>
    </bottom-view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background: #f9f9f9;
  }

  .fee-box {
    padding: 20rpx 32rpx;
  }
</style>
