<template>
  <view class="feedback">
    <view class="feedback-box">
      <view class="title"> 意见反馈： </view>
      <textarea
        @input="onInput"
        v-model="params.ygContent"
        class="textarea"
        :maxlength="500"
        placeholder-style="color:#C8C8C8"
        placeholder="您的建议是我们最大的动力"
      />
      <view class="count">{{ sumCount }}/500</view>
    </view>
    <view class="submit">
      <view class="s-btn" @click="onSubmit">提 交</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useLoginStore } from '@/store/login'
import { feedbackApi } from '@/service/modules/mine'

const loginStore = useLoginStore()

const params = reactive({
  ygContent: '',
  yjUserid: loginStore.currentUserInfo.userId
})

const sumCount = ref(0)
function onInput(e: any) {
  sumCount.value = e.detail.cursor
}

const onSubmit = async () => {
  if (!params.ygContent) {
    return uni.showToast({
      title: '请输入意见反馈内容',
      icon: 'none',
      duration: 800
    })
  }
  uni.showLoading()
  const res = await feedbackApi(params)
  uni.hideLoading()
  if (res.data) {
    uni.showToast({
      title: '提交成功',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.feedback {
  background: #f4f4f4;
  min-height: 100vh;
  .feedback-box {
    padding: 44rpx 54rpx;
    background: #ffffff;
    .title {
      font-size: 30rpx;
    }
    .textarea {
      margin-top: 20rpx;
      height: 600rpx;
      width: calc(100%);
    }
    .count {
      width: 100%;
      text-align: right;
      color: #dddddd;
    }
  }
  .submit {
    padding: 16rpx 26rpx;
    background: #ffffff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    .s-btn {
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      background: #6eb657;
      border-radius: 10rpx;
      color: #ffffff;
      font-size: 30rpx;
    }
  }
}
</style>
