<template>
  <view>
    <u-popup
      v-model="isShow"
      mode="center"
      :border-radius="10"
      :closeable="true"
      @close="fnCancel"
      width="90%"
    >
      <u-row gutter="12">
        <u-col span="12">
          <view
            :style="{ textAlign: 'center', height: '60px', lineHeight: '60px' }"
          >
            <text
              :style="{ fontSize: '40rpx', fontWeight: 500, color: '#1D2129' }"
              >发货</text
            >
          </view>
        </u-col>
        <u-col span="12" :style="{ margin: '10rpx' }">
          <text :style="{ fontSize: '32rpx' }"> 本次发货时间： </text>
          <text :style="{ fontSize: '32rpx' }" @click="fnShowPickerA">
            {{ sendTime }}
          </text>
          <u-picker
            mode="time"
            :default-time="sendTime"
            v-model="isShowPickerA"
            :params="pickerParams"
            @confirm="fnSendTime"
          ></u-picker>
        </u-col>
        <u-col span="12" :style="{ margin: '10rpx' }">
          <text :style="{ color: 'red' }">*</text> <text>本次发货数量：</text>
        </u-col>
        <u-col span="10">
          <view :style="{ textAlign: 'center', margin: '10rpx' }">
            <u-input
              v-model="sendNumber"
              type="number"
              :border="true"
              placeholder="请输入投产数量"
            />
          </view>
        </u-col>
        <u-col span="2">
          <text>{{ orderItem.unit }}</text>
        </u-col>
        <u-col span="12">
          <view :style="{ textAlign: 'center', margin: '25rpx 0rpx' }">
            <u-button
              size="mini"
              shape="circle"
              @click="fnCancel"
              :custom-style="{
                margin: '5px 20px',
                padding: '5px 20px',
              }"
            >
              取消
            </u-button>
            <u-button
              size="mini"
              shape="circle"
              type="primary"
              :custom-style="{
                margin: '5px 20px',
                padding: '5px 20px',
              }"
              @click="fnOk"
            >
              确定
            </u-button>
          </view>
        </u-col>
      </u-row>
    </u-popup>
    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { mapGetters } from "vuex";
import { shipments } from "@/api/yys/materialProcurementOrder.js";
import dayjs from "dayjs";
export default {
  components: {},
  mixins: [],
  data() {
    return {
      isShow: false,
      sendNumber: undefined,
      orderItem: {},
      sendTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      isShowPickerA: false,
      pickerParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
    };
  },
  watch: {},
  computed: {},
  onLoad(params) {},
  onUnload() {},
  methods: {
    init(orderItem) {
      this.orderItem = orderItem;
      this.sendNumber = undefined;
      this.sendTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
      this.isShow = true;
    },
    fnCancel() {
      this.orderItem = {};
      this.isShow = false;
    },
    fnOk() {
      if (!this.sendNumber) {
        this.$refs.uTips.show({
          title: "数量不能为空",
          type: "error",
          duration: "2300",
        });
        console.log(this.sendNumber);
        return true;
      }
      let _params = {
        orderNumber: this.orderItem.orderNumber,
        sendTime: dayjs(this.sendTime),
        sendNumber: this.sendNumber,
      };
      shipments(_params)
        .then((res) => {
          if (res.code == 200) {
            this.$emit("evtRefresh");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.fnCancel();
    },
    fnShowPickerA() {
      this.isShowPickerA = true;
    },
    fnSendTime(timeObj) {
      this.sendTime =
        timeObj.year +
        "-" +
        timeObj.month +
        "-" +
        timeObj.day +
        " " +
        timeObj.hour +
        ":" +
        timeObj.minute +
        ":" +
        timeObj.second;
    },
  },
};
</script>

<style lang="scss"></style>
