<template>
  <view class="ctr">
    <view class="form-group">
      <view class="item input flex-sb line-after" @click="selectIsFinishToday">
        <view class="title flex-l">今日完成</view>
        <view class="select-ctr flex-r select">{{ submitData.is_finish_today === 0 ? '今日不能完工' : '今日能完工'}}<me-icon class="icon" type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon></view>
      </view>
      <view :class="[submitData.is_finish_today == 0 ? 'line-after' : '', 'item', 'time']">
        <view class="item-row flex-sb">
          <view class="title flex-l">完工时间</view>
          <uni-datetime-picker v-model="submitData.estimated_finish_time" :start="Date.now()" type="datetime" :hide-second="true">
            <view class="value flex-r value-empty" v-if="submitData.estimated_finish_time === null">点击选择完工时间</view>
            <view class="value flex-r" v-else>{{ helpers.removeSeconds(submitData.estimated_finish_time) }}</view>
          </uni-datetime-picker>
        </view>
      </view>
      <view class="textarea" v-if="submitData.is_finish_today == 0">
        <view class="title flex-l">当前施工进度</view>
        <view class="value">
          <textarea maxlength="200" :disable-default-padding="true" class="input-textarea" v-model="submitData.work_progress"  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, computed} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import api from "../../api/api";
import {throttle} from "../../utils/throttle";
import MeIcon from "../../components/me-icon/me-icon.vue";

const selectIsFinishToday = () => {
  uni.showActionSheet({
    itemList: ['今日不能完工', '今日能完工'],
    success: function (res) {
      submitData.is_finish_today = res.tapIndex
    },
    fail: function (res) {
      console.log(res.errMsg);
    }
  });
}

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

  uni.showModal({
    title: '提示信息',
    confirmText: '确认',
    content: '确认更新进度？',
    success: function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: '提交中'
        });

        submitData.order_dispatch_id = id.value

        api.updateProgress(submitData).then(() => {
          helpers.delayHideLoading()
          uni.showModal({
            title: '提示信息',
            showCancel: false,
            content: '进度已更新',
            success: function (res) {
              if (res.confirm) {
                uni.navigateBack();
              }
            }
          });

          init()
        }).catch(() => {})
      }
    }
  });
})

const init = () => {
  api.orderInfo({order_dispatch_id: id.value}).then(res => {
    submitData.is_finish_today = res.is_finish_today === null ? 1 : res.is_finish_today
    submitData.estimated_finish_time = res.estimated_finish_time
    submitData.work_progress = res.work_progress

    helpers.delayHideLoading()
  }).catch(() => {})
}

const id = ref(null)
onLoad((params) => {
  id.value = params.id
  uni.showLoading({
    title: '加载中'
  })
  init()
})

//提交数据
const submitData = reactive({
  is_finish_today: 1,
  estimated_finish_time: null,
  work_progress: '',
})

//验证提交数据
const validate = () => {
  if (submitData.estimated_finish_time === null) {
    helpers.showToast('请选择完成时间')
    return false
  }

  if (submitData.is_finish_today === 0 && submitData.work_progress === '') {
    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>













