<!-- 改约 -->
<template>
  <view class="feedback-box bg">
    <u-navbar
      back-icon-color="#FFFFFF"
      :background="background"
      title="改约"
      titleColor="#FFFFFF"
      :border-bottom="false"
      title-bold
    ></u-navbar>
    <view class="content u-p-l-30 u-p-r-30">
      <FeedbackContent
        ref="feed-back"
        :categoryId="categoryId"
        @change="handleChange"
        class="content-view"
      />
    </view>
    <view class="bottom-view">
      <button
        class="btn, bottom-btn"
        @click="$u.throttle(submitForm, 500)"
        :loading="submiting"
        :disabled="disabledSubmit"
      >
        <text class="button-text">确定</text>
      </button>
    </view>
  </view>
</template>

<script>
import FeedbackContent from '@/components/order/feedback.vue'

export default {
  data() {
    return {
      orderId: null,
      categoryId: null,
      submiting: false,
      disabledSubmit: true,
    }
  },
  components: {
    FeedbackContent,
  },
  computed: {},
  onLoad(e) {
    getApp().trackPage('订单过程反馈页')
    if (e) {
      this.orderId = e.orderId || null
      this.categoryId = e.categoryId || null
    }
  },
  methods: {
    handleChange(val) {
      this.disabledSubmit = val
    },
    async submitForm() {
      let submitData = this.$refs['feed-back'].submitData
      let self = this
      if (!self.orderId) {
        uni.showToast({
          icon: 'none',
          title: '工单ID不能为空',
        })
        return false
      }

      if (!submitData.remark) {
        uni.showToast({
          icon: 'none',
          title: '请补充详细说明',
        })
        return
      }

      self.submiting = true
      getApp().track('order_feedback_submitForm', {
        reasonType: submitData.reasonType,
        traceDate: submitData.traceDate,
      })

      let res = await self.$u.api.traceAndAppointment(submitData, self.orderId)
      self.submiting = false
      if (res && res.code == 200) {
        var pages = getCurrentPages()
        if (pages.length >= 2) {
          var page = pages[pages.length - 2]
          page.needFresh = true
        }

        uni.navigateBack()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.bg {
  width: 750rpx;
  height: 100vh;
  overflow: auto;
  background-color: #f4f5f7;
  background-image: linear-gradient(to top, #f4f5f7 0%, #2272ff 50%);
  background-size: 750rpx 600rpx;
  background-repeat: no-repeat;
}
.feedback-box {
  display: flex;
  flex-direction: column;
  .header {
    padding: 12rpx 30rpx 40rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 188rpx;
  margin-top: 30rpx;
  .content-view {
    height: 100%;
    overflow: auto;
  }
}
.bottom-view {
  position: fixed;
  bottom: 44rpx;
  width: 100%;
}
.bottom-btn {
  height: 104rpx;
  width: 600rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .button-text {
    font-size: 32rpx;
    font-weight: bold;
  }
}
.btn {
  padding: 30rpx;
  border-radius: 52rpx;
  line-height: 44rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #2272ff;
  color: #fff;
  &::after {
    content: '';
    height: 0;
    border: none;
  }
}
.btn {
  padding: 30rpx;
  border-radius: 52rpx;
  line-height: 44rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #2272ff;
  color: #fff;
  &::after {
    content: '';
    height: 0;
  }
}
.width-320 {
  width: 320rpx;
}
/deep/ button[plain] {
  border: none;
}
button[disabled]:not([type]) {
  background: #d1d4d4;
  color: #ffffff;
}
</style>
