<!--
@name: 待调度-中转
@author: 张泽贤
@time: 2022-04-26
-->
<template>
  <p-spin :spinning="spinning">
    <p-card>
      <a-space slot="title">
        <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
        中转
      </a-space>
      <a-space slot="extra">
        <p-button type="primary" @click="onAdd" icon="plus">新增</p-button>
        <p-button type="primary" @click="onSave" :disabeld="!formList.length">保存</p-button>
      </a-space>
      <div v-for="(item, index) in formList" :key="index">
        <p-form-model ref="formTarget" :model="item" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-row>
            <a-col :span="6">
              <p-form-model-item label="中转站" prop="name">
                <p-search-modal v-model="item.name" v-bind="$data.$formItems.transferAttr" @change="(...args) => onFormChange('transfer', index, ...args)" />
              </p-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <p-form-model-item label="预计到达时间" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <p-range-picker
                  v-model="item.estimatedDeliveryTime"
                  format="YYYY-MM-DD HH:mm"
                  valueFormat="YYYY-MM-DD HH:mm"
                  :show-time="{ format: 'HH:mm' }"
                  :placeholder="['开始日期', '结束日期']"
                  style="width: 100%"
                  @change="(...arg) => dateChange(index, ...arg)"
                />
              </p-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <p-form-model-item label="预计发出时间" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <p-range-picker
                  v-model="item.estimatedSendTime"
                  format="YYYY-MM-DD HH:mm"
                  valueFormat="YYYY-MM-DD HH:mm"
                  :show-time="{ format: 'HH:mm' }"
                  :placeholder="['开始日期', '结束日期']"
                  style="width: 100%"
                  @change="(...arg) => dateChange(index, ...arg)"
                />
              </p-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              <p-form-model-item label="时效" prop="diff">
                <p-input v-model="item.diff" suffix="小时" readOnly />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                <a-space>
                  <p-button type="danger" @click="onDel(index)">删除</p-button>
                </a-space>
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </div>
    </p-card>
  </p-spin>
</template>

<script>
import * as $formItems from '@/blocks/components/searchModalConfig/index'
import { Transit } from '../js/api'

export default {
  props: {
    shipbillIdList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      spinning: false,
      $formItems,
      formList: [],
    }
  },
  methods: {
    // 返回
    back() {
      this.$emit('back')
    },
    onAdd() {
      this.formList.push({
        id: '',
        code: '',
        name: '',
        estimatedDeliveryTime: ['', ''],
        estimatedSendTime: ['', ''],
      })
    },
    // 保存
    onSave() {
      let transitDetailInfoVOList = []
      let list = JSON.parse(JSON.stringify(this.formList))
      for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (!element.id) {
          this.$message.error('第' + (index + 1) + '条请选择中转站')
          return false
        }
        if (!element.estimatedDeliveryTime.length) {
          this.$message.error('第' + (index + 1) + '条请选择预计到达时间')
          return false
        }
        if (!element.estimatedSendTime.length) {
          this.$message.error('第' + (index + 1) + '条请选择预计发出时间')
          return false
        }
        element.estimatedDeliveryStartTime = element.estimatedDeliveryTime[0]
        element.estimatedDeliveryEndTime = element.estimatedDeliveryTime[1]
        element.estimatedSendStartTime = element.estimatedSendTime[0]
        element.estimatedSendEndTime = element.estimatedSendTime[1]
        element.transitNumber = index + 1
        delete element.estimatedDeliveryTime
        delete element.estimatedSendTime
        transitDetailInfoVOList.push(element)
      }

      let params = {
        transitDetailInfoVOList,
        shipbillIdList: this.shipbillIdList,
      }
      this.spinning = true
      Transit(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('back')
          } else {
            this.$exception(res)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },

    onFormChange(name, index, ...args) {
      console.log(args)
      if (name === 'transfer') {
        this.formList[index] = Object.assign({}, this.formList[index], args[2][0])
        this.formList = [...this.formList]
      }
    },
    dateChange(index) {
      if (
        this.formList[index].estimatedDeliveryTime.length &&
        this.formList[index].estimatedSendTime.length &&
        this.formList[index].estimatedDeliveryTime[1] &&
        this.formList[index].estimatedSendTime[1]
      ) {
        let diff = new Date(this.formList[index].estimatedSendTime[1]).getTime() - new Date(this.formList[index].estimatedDeliveryTime[1]).getTime()
        this.formList[index].diff = parseFloat(this.BigJs(Number(diff)).div(1000 * 60 * 60)).toFixed(2)
      }
    },
    onDel(index) {
      this.formList.splice(index, 1)
    },
  },
}
</script>