<template>
  <view class="ctr" v-if="data !== null">
    <view class="form-group">
      <picker @change="bindPickerChange" range-key="title" :range="typeList">
        <view class="item input flex-sb line-after">
          <view class="title flex-l">异常原因</view>
          <view v-if="submitData.abnormal_id === 0" class="select-ctr flex-r">请选择异常原因</view>
          <view v-else class="select-ctr flex-r select">{{typeList[typeListIndex].title}}</view>
        </view>
      </picker>

      <view class="textarea">
        <view class="title flex-l">异常说明</view>
        <view class="value">
          <textarea :disable-default-padding="true" class="input-textarea" v-model="submitData.detail"  placeholder-class="placeholder-class" placeholder="请输入异常说明（200字以内）"/>
        </view>
      </view>
    </view>
    <me-empty-space height="376"></me-empty-space>
    <view class="bottom">
      <me-button @click="submit()" text="立即上报" width="686rpx" icon-type="icon-arrow-up-line" margin-top="32rpx"></me-button>
    </view>
  </view>
</template>

<script setup>

import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeButton from "../../components/me-button/me-button.vue";
import helpers from "../../utils/helpers";
import {ref, reactive} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import api from "../../api/api";
import {throttle} from "../../utils/throttle";

const bindPickerChange = (e) => {
  typeListIndex.value = e.detail.value;
  submitData.abnormal_id = typeList.value[e.detail.value].id
}

const typeListIndex = ref(0)

//提交
const submit = throttle(() => {
  if (!validate()) {
    return false
  }

  uni.showModal({
    title: '提示信息',
    confirmText: '确认',
    content: '确认已完成所有服务？',
    success: function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: '提交中'
        });

        let data = helpers.deepObj(submitData)
        data.complete_images = (submitData.complete_images).join(',')
        data.order_dispatch_id = id.value

        api.completeService(data).then(() => {
          uni.hideLoading();
          uni.showToast({
            title: '已完成服务',
            icon: "success"
          })
          setTimeout(() => {
            uni.navigateBack();
          }, 1000)
        }).catch(() => {})
      }
    }
  });
})

const id = ref(null)
onLoad((params) => {
  id.value = params.id
  init()
})

const data = ref(null)
const typeList = ref(null)
const init = () => {
  api.orderInfo({order_dispatch_id: id.value}).then(res => {
    data.value = res
  }).catch(() => {})

  api.findExceptionTypeList().then(res => {
    typeList.value = res
    console.log(typeList.value)
  }).catch(() => {})
}

//提交数据
const submitData = reactive({
  abnormal_id: 0,
  detail: '',
})

//验证提交数据
const validate = () => {
  if (submitData.abnormal_id === 0) {
    helpers.showToast('请选择异常原因')
    return false
  }

  if (submitData.detail === '') {
    helpers.showToast('请输入异常详情')
    return false
  }

  return true
}

</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  height: 100vh;
  .bottom {
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: 68rpx;
    background: var(--pageBgColor);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
  }
}
</style>













