<template>
  <view class="min-h-full flex flex-col w-full pt-20rpx">
    <view class="bg-white flex-1">
      <view class="p-40rpx flex justify-between">
        <view
          class="check-button"
          :class="{ 'bg-primary text-white': checkIndex === index }"
          v-for="(item, index) in types"
          :key="index"
          @tap="checkIndex = index"
          >{{ item.name }}</view
        >
      </view>
      <!-- 输入框 -->
      <view class="px-20rpx">
        <view class="bg-hex-F9F9F9 rounded-20rpx w-full relative">
          <textarea
            class="p-30rpx min-h-200rpx"
            v-model="content"
            placeholder-style="text-h999"
            placeholder="为了更好的解决您的问题，请尽量描述详细"
            maxlength="100"
            auto-height
          ></textarea>
          <view class="py-30rpx pl-18rpx pr-100rpx flex flex-wrap relative">
            <!-- 字数统计 -->
            <view class="text-h999 absolute right-20rpx bottom-20rpx">{{ content.length }}/100</view>
          </view>
        </view>
      </view>
      <!-- 提交 -->
      <view class="px-30rpx my-200rpx">
        <view class="login-btn block h-80rpx round bg-orange" @tap="onSubmit">提交</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      types: [{ name: '体验问题' }, { name: '功能问题' }, { name: '其他问题' }],
      imgList: [],
      maxImgLength: 5,
      checkIndex: 0,
      content: '',
    };
  },
  methods: {
    async onSubmit() {
      if (!this.content) {
        return this.$u.toast('请输入您的问题描述信息');
      }
      try {
        await this.$api.post('/v1/user-qr-code', {
          context: this.content,
        });
        this.content=''
        // uni.navigateBack();
        this.$u.toast('提交成功');
      } catch (err) {
        this.$u.toast(err.message);
      }
    },
  },
};
</script>

<style>
page {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.check-button {
  padding: 0 20rpx;
  min-width: 186rpx;
  height: 62rpx;
  line-height: 62rpx;
  text-align: center;
  border-radius: 60rpx;
}

.img {
  margin-right: 18rpx;
  margin-top: 18rpx;
  width: 116rpx;
  height: 116rpx;
  color: #999;
  border-radius: 8rpx;
  background-color: #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
