<template>
  <view class="ctr" v-if="data !== null">
    <view class="form-group">
      <view class="group-name flex-l line-after">
        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
        <text class="text">沟通后请提交信息</text>
      </view>
      <view class="item time">
        <view class="item-row flex-sb">
          <view class="title flex-l">上门时间</view>
          <uni-datetime-picker v-model="data.plan_time" type="datetime" :hide-second="true">
            <view class="value flex-r value-empty" v-if="data.plan_time === ''">点击选择上门时间</view>
            <view class="value flex-r" v-else>{{ helpers.removeSeconds(data.plan_time) }}</view>
          </uni-datetime-picker>
        </view>
        <view class="desc flex-l">点击时间可更改，请确认和客户沟通的上门时间</view>
      </view>
    </view>
    <me-empty-space height="376"></me-empty-space>
    <view class="bottom">
      <me-button @click="submit()" text="确认上门时间" width="686rpx" icon-type="icon-checkbox-circle" margin-top="32rpx"></me-button>
    </view>
  </view>
</template>

<script setup>

import MeIcon from "../../components/me-icon/me-icon.vue";
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} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import api from "../../api/api";
import {throttle} from "../../utils/throttle";
import enums from "../../utils/enums";

//预约上门时间
const submit = throttle(() => {
  uni.showModal({
    title: '提示信息',
    confirmText: '确认',
    content: '确认已和客户约定上门时间？',
    success: function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: '提交中'
        });
        api.appointmentTime({order_dispatch_id: id.value, plan_time: data.value.plan_time}).then(() => {
          uni.hideLoading();
          uni.showToast({
            title: '预约成功',
            icon: "success"
          })
          setTimeout(() => {
            helpers.jumpToPage('order-info', `id=${id.value}`, 'redirectTo')
          }, 1000)
        }).catch(() => {})
      }
    }
  });
})

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

const data = ref(null)
const init = () => {
  api.orderInfo({order_dispatch_id: id.value}).then(res => {
    if (res.status !== enums.ORDER_DISPATCH_STATUS.STATUS_GOTIT) {
      return helpers.showToast('该订单不可预约上门时间')
    }

    data.value = res
  }).catch(() => {})
}

</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>













