<template>
  <view class="container">
    <view class="top-text">
      我们一直努力改进应用程序，您的用户体验对我们来说很重要，如果您在使用过程中产生了糟糕的用户体验，您可以将用户意见提交给我们，我们会积极改正。
    </view>

    <view class="item-box">
      <view class="item">
        <view class="item-title"> <span class="star">*</span> 标题</view>
        <view class="item-text-box">
          <u--textarea v-model="queryParams.title" autoHeight placeholder="请输入标题" border='none'></u--textarea>
        </view>
      </view>

      <view class="item">
        <view class="item-title"> <span class="star">*</span> 评论</view>
        <view class="item-text-box">
          <u--textarea v-model="queryParams.content" count placeholder="您提出的意见是对我们最大的认可" border='none'></u--textarea>
        </view>
      </view>

      <view class="item">
        <view class="item-title">电话</view>
        <view class="item-text-box">
          <u--input placeholder="请输入您的联系方式(选填)" type='number' maxlength='13' border="none"
            v-model="queryParams.phone"></u--input>
        </view>
      </view>
    </view>

    <view class="btn-box">
      <button class="btn" @click='handlerSubmitFeedback'>提交反馈</button>
    </view>
  </view>
</template>

<script>
  import { getFeedback } from "@/api/client/mine.js"
  export default {
    data() {
      return {
        value1: '',
        value: '',
        queryParams: {
          title: '',
          content: '',
          type: 0,
          phone: '',
          channel: 0
        }
      }
    },
	onLoad(options) {
		console.log(options)
		this.queryParams.channel = options.channelType
	},
    methods: {
      // 提交反馈意见
      handlerSubmitFeedback() {
        if (this.queryParams.title == '') {
          uni.showToast({
            title: "请输入标题",
            icon: 'none'
          })
          return
        } else if (this.queryParams.content == '') {
          uni.showToast({
            title: "评论内容",
            icon: 'none'
          })
          return
        } else {
          getFeedback(this.queryParams).then(res => {
            if (res.code === 'OK') {
              uni.showToast({
                title: "反馈成功",
                icon: 'none'
              })
              setTimeout(() => {
                uni.navigateBack(-1)
              },1500)
            }else{
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              return
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    box-sizing: border-box;

    .top-text {
      color: #999999;
      font-size: 32rpx;
      padding: 40rpx;
      box-sizing: border-box;
    }

    .item-box,
    .btn-box {
      padding: 40rpx;
      box-sizing: border-box;

      .item {
        margin-bottom: 40rpx;

        .item-title {
          color: #999999;
          font-weight: 32rpx;
          font-weight: bold;
          margin-bottom: 20rpx;

          .star {
            color: #EA512F;
          }
        }

        .item-text-box {
          background-color: #FAFAFA;
          padding: 20rpx;
          border-radius: 20rpx;
          box-shadow: 0 5rpx 15rpx 0 rgba(225, 225, 225, 0.9);
        }
      }
    }

    .btn-box {
      .btn {
        background-color: #80AB3F;
        border-radius: 20rpx;
        text-align: center;
        font-size: 32rpx;
        color: #fff;
        height: 80rpx;
        box-shadow: 0 5rpx 15rpx 0 rgba(128, 171, 63, 0.6);
      }
    }
  }

  ::v-deep .u-textarea {
    background-color: #FAFAFA !important;
  }

  ::v-deep .u-textarea__count.data-v-09988a29 {
    background-color: #FAFAFA !important;
  }
</style>
