<template>
  <Page name="start-car">
    <template #content>
      <view class="address">
        <view class="icon-waypoint icon-start">装</view>
        <text>{{ item.waypoints[0].address }}</text>
      </view>
      <u-form :model="form" ref="uForm" labelWidth="100">
        <view class="card">
          <u-form-item label="实际发车时间" @click="showLoadTime = true" required>
            <u-input v-model="form.departTime" border="none" suffix-icon="arrow-right" placeholder="请选择时间" disabledColor="#ffffff" disabled />
          </u-form-item>
        </view>
        <view class="card">
          <u-form-item label="上传照片">
            <z-upload v-model="item.receiptAttachment" :limit="20"></z-upload>
          </u-form-item>
        </view>
      </u-form>
    </template>
    <u-datetime-picker :show="showLoadTime" :value="loadTimeDef" @cancel="showLoadTime = false" @close="showLoadTime = false" @confirm="loadTimeFormat"></u-datetime-picker>
    <template #footer>
      <u-button type="primary" @tap="submit">确认发车</u-button>
    </template>
    <u-toast ref="uToast"></u-toast>
  </Page>
</template>

<script>
import ZUpload from '../../components/zee/z-upload.vue';
import dayjs from 'dayjs';

export default {
  name: 'startCar',
  components: { ZUpload },
  data() {
    return {
      showLoadTime: false,
      loadTimeDef: new Date(),
      form: {
        departTime: '',
        receiptAttachment: '',
      },
      item: {},
    };
  },
  onLoad(options) {
    if (options.code) {
      this.initData(options.code);
    }
  },
  methods: {
    initData(code) {
      uni.$u.api.freightOrder.getDetail({ code }).then(res => {
        this.item = res.result || {};
        this.form = {
          departTime: this.item.confirmDepartureTime,
          receiptAttachment: this.item.receiptAttachment,
        };
      });
    },
    loadTimeFormat({ value }) {
      this.form.departTime = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
      this.showLoadTime = false;
    },
    submit() {
      if (!this.form.departTime) {
        uni.showToast({ title: '发车时间不能为空', icon: 'none' });
        return;
      }
      if (new Date(this.form.departTime).getTime() > new Date().getTime()) {
        uni.showToast({ title: '发车时间不能大于当前时间', icon: 'none' });
        return;
      }
      let driverInfo = uni.getDeviceInfo();
      uni.$u.api.freightOrder
        .depart({ codeList: [this.item.code], ...this.form })
        .then(res => {
          if (res.success) {
            uni.$u.api.freightMaRecord.add({ orderCode: this.item.code, operateType: 'DEPART', ...driverInfo });
            uni.showToast({ title: '操作成功', icon: 'none' });
            this.getOpenerEventChannel().emit('refreshData');
            setTimeout(() => uni.navigateBack(), 500);
          }
        })
        .catch(e => {
          this.loading = false;
          this.$refs.uToast.show({
            type: 'default',
            message: e,
          });
        });
    },
  },
};
</script>

<style lang="scss">
.page-start-car {
  &__content {
    padding-top: 0 !important;
  }
  &__footer {
    background: $color-white;
  }
  .address {
    background-color: $color-white;
    padding: $padding-md;
    .icon-waypoint {
      font-size: $font-sm;
      margin-right: $padding-sm;
      height: $padding-md * 1.2;
      width: $padding-md * 1.2;
      min-width: $padding-md * 1.2;
    }
  }
  .card {
    color: #999999;
    margin: $padding-md;
    background-color: $color-white;
    border-radius: $radius-md;
    box-shadow: $shadow-normal;
    .u-form-item {
      padding-left: $padding-md !important;
      padding-right: $padding-sm !important;
    }
  }
}
</style>
