<template>
  <view class="page-container">
    <view class="feedback-container">
      <view class="card">
        <view class="card-title">
          问题类型
        </view>
        <view class="card-content">
          <view class="feedback-type justify-start">
            <view v-for="(item, index) in typeList" :key="index" class="feedback-type-item" :class="type === item.id ? 'selected' : ''" @click="typeSelect(item.id)">{{item.name}}</view>
          </view>
          <textarea v-model="content" placeholder="请输入您的意见建议~" :maxlength="250" :auto-height="true" class="feedback-textarea"></textarea>
          <u-upload :fileList="fileList" :maxCount="1" @afterRead="uploadFile" @delete="deleteFile" class="feedback-upload"></u-upload>
        </view>
      </view>
    </view>
    <u-button shape="circle" :disabled="loading" :loading="loading" color="linear-gradient(90deg, #DA2538 0%, #F75F68 100%)" text="立即提交" class="feedback-submit-button" @click="submit"></u-button>
  </view>
</template>

<script>
import { upload } from '@/utils/request'
import { user } from '@/utils/api'
  
export default {
  data() {
    return {
      fileList: [],
      typeList: [{id: 1, name: '内容报错'}, {id: 2, name: '资源找片'}, {id: 3, name: '充值反馈'}, {id: 4, name: '意见建议'}, {id: 5, name: '其他'}],
      id: 0,
      type: 4,
      img: '',
      content: '',
      loading: false
    }
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/feedback/feedback-record'
    })
  },
  onLoad(option) {
    if (option.type) {
      this.type = parseInt(option.type)
    }
    if (option.vod_id) {
      this.id = parseInt(option.vod_id)
    }
    if (option.vod_name) {
      this.content = '《'+ option.vod_name +'》无法观看，请审查。'
    }
    if (option.orderId) {
      this.content = '订单号【'+ option.orderId +'】充值未到账，请审查。'
    }
  },
  methods: {
    deleteFile(event) {
      this.fileList.splice(event.index, 1)
      this.img = ''
    },
    uploadFile(event) {
      this.fileList = [{
        ...event.file,
        status: 'uploading',
        message: '上传中'
      }]
      upload(event.file.url).then(res => {
        if (res.code === 1) {
          this.fileList.splice(0, 1, {
            ...event.file,
            status: 'success',
            message: ''
          })
          this.img = res.data.url
        } else {
          uni.showToast({
              icon: 'none',
              title: res.msg,
              duration: 3000
          })
          this.fileList = []
        }
      }).catch(e => {
        this.fileList = []
      })
    },
    async submit() {
      if (this.content === '') {
        uni.showToast({
          icon: 'none',
          title: '请输入反馈内容~!',
          duration: 3000
        })
        return
      }
      if (this.type === 3 && this.img === '') {
        uni.showToast({
          icon: 'none',
          title: '请上传支付截图~!',
          duration: 3000
        })
        return
      }
      this.loading = true
      await user.gbook(this.type, this.content, this.img, this.id).then(res => {
        uni.showToast({
          icon: 'none',
          title: res.msg,
          duration: 3000
        })
        if (res.code === 1) {
          this.id = 0
          this.content = ''
          this.img = ''
          this.fileList = []
        }
      }).catch(e => {})
      this.loading = false
    },
    typeSelect(id) {
      this.type = id
    }
  }
}
</script>

<style lang="scss">
.page-container {
  padding-bottom: 15px;
  background-color: $uni-bg-color;
  .feedback-container {
    padding: 15px;
    .feedback-type {
      flex-wrap: wrap;
      .feedback-type-item {
        width: 84px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background-color: #f4f5f7;
        border-radius: 16px;
        font-size: 14px;
        font-weight: 400;
        color: #1a1a2a;
        margin: 0 20px 10px 0;
        &.selected {
          background: #DA2538;
          color: #FFF;
        }
      }
    }
    .feedback-textarea {
      width: 100%;
      min-height: 150px;
      background-color: #f4f5f7;
      border-radius: 8px;
      padding: 15px;
      margin-top: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #8f8f99;
    }
    .feedback-upload {
      margin-top: 10px;
    }
  }
  .feedback-submit-button {
    width: auto;
    margin: 20px 15px 0;
  }
}
</style>