<template>
  <div>
    <el-dialog title="月台" v-if="goodsFormVisible" :visible.sync="goodsFormVisible" :before-close="close" width="66%">
      <el-form inline ref="goodsForm" label-position="top" :model="formData" :rules="rules">
        <div v-if="mode==='add'">
          <el-form-item label="月台" prop="dockCode">
            <PublicQuery title="月台"  single :rowData.sync="dockData" baseUrl="/doc_web/docweb" cfgKey="docWmsDock" :valueField.sync="formData.dockCode">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="使用车型" prop="vehicleType">
            <el-select  v-model="formData.vehicleType">
              <el-option label="牵引车" value="TR"></el-option>
              <el-option label="大型车辆" value="VE"></el-option>
              <el-option label="小型车辆" value="HI"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约作业时长(分钟)" prop="planMinute">
            <el-input v-model="formData.planMinute" disabled></el-input>
          </el-form-item>
          <el-form-item label="预约时间从" prop="fmPlanTime">
            <el-date-picker
                v-model="formData.fmPlanTime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="预约时间到" prop="toPlanTime">
            <el-date-picker
                v-model="formData.toPlanTime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
                @change="handleTimeChange">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="车牌号" prop="vehicleNo">
            <el-input v-model.number="formData.vehicleNo" ></el-input>
          </el-form-item>
          <el-form-item label="驾驶员" prop="driver">
            <el-input v-model.number="formData.driver" ></el-input>
          </el-form-item>
        </div>

        <div v-else>
          <el-form-item label="实际作业时间从" prop="fmActTime" >
            <el-date-picker
                :disabled="code==='release'"
                v-model="formData.fmActTime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="实际作业时间到" prop="toActTime" :rules="code==='qccupy'?[]:rules.toActTime">
            <el-date-picker
              :disabled="code==='qccupy'"
                v-model="formData.toActTime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
                @change="handleToActTime">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="实际作业时长(分钟)" prop="planMinute">
            <el-input v-model="formData.planMinute" disabled></el-input>
          </el-form-item>
        </div>

      </el-form>

      <div class="mrg-t">
        <div v-if="mode==='add'">
          <el-button v-auth="50100020205" type="primary" @click="handleConfirm">保存</el-button>
          <el-button v-auth="50100020206" type="primary" @click="handleConfirmAdd">保存并新增</el-button>
        </div>
        <div v-else>
          <el-button v-auth="50100020205" type="primary" @click="handleImplement">执行</el-button>
        </div>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import { time } from 'apec-fe-utils'

export default {

  data () {
    var startDate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('预约时间从必填'))
      } else if (value < time.formatTime(new Date())) {
        callback(new Error('预约时间从不能小于当前时间'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        vehicleNo: null,
        driver: null
      },
      dockData: {},
      rules: {
        dockCode: [
          { required: true, message: '月台必填', trigger: 'change' }
        ],
        fmPlanTime: [
          // { required: true, message: '预约时间从必填', trigger: 'change' }
          { required: true, validator: startDate, trigger: 'blur' }
        ],
        toPlanTime: [
          { required: true, message: '预约时间到必填', trigger: 'change' }

        ],
        fmActTime: [
          { required: true, message: '实际作业时间从必填', trigger: 'change' }
        ],
        toActTime: [
          { required: true, message: '实际作业时间到必填', trigger: 'change' }
        ]

      }
    }
  },
  props: {
    goodsFormVisible: Boolean,
    mode: String,
    code: String,
    tableData: Array,
    currentRow: Object,
  },
  created () {
    // console.log(this.chenckTime())
  },
  methods: {
    close () {
      this.$emit('close')
      this.$refs.goodsForm.resetFields()
    },

    // 保存
    handleConfirm () {
      let data = { ...this.formData, ...{ '_status': 0 } }
      if (!this.chenckTime()) return this.$message.warning('选择的时间不是该月台的空闲时间范围内')
      this.$refs.goodsForm.validate((valid) => {
        if (valid) {
          this.$emit('handleConfirm', data)
          this.$refs.goodsForm.resetFields()
        }
      })
    },

    // 保存并添加
    handleConfirmAdd () {
      let data = { ...this.formData }
      this.$refs.goodsForm.validate((valid) => {
        if (valid) {
          this.$emit('handleConfirmAdd', data)
          this.$refs.goodsForm.resetFields()
        }
      })
    },

    handleImplement () {
      let data = { ...this.formData }
      this.$refs.goodsForm.validate((valid) => {
        if (valid) {
          this.$emit('handleImplement', data, this.code)
          this.$refs.goodsForm.resetFields()
        }
      })
    },

    timeDifference (start, end) {
      let time1 = parseInt(new Date(start).getTime())
      let time2 = parseInt(new Date(end).getTime())
      return String(parseInt((time2 - time1) / 1000 / 60))
    },
    handleTimeChange (endTime) {
      const newVal = this.timeDifference(this.formData.fmPlanTime, endTime)
      this.$set(this.formData, 'planMinute', newVal)
    },
    handleToActTime (endTime) {
      const newVal = this.timeDifference(this.formData.fmActTime, endTime)
      this.$set(this.formData, 'planMinute', newVal)
    },

    chenckTime () {
      let timeObj1 = time.formatTimeObj(this.formData.fmPlanTime)
      let timeObj2 = time.formatTimeObj(this.formData.toPlanTime)
      const fm = `${timeObj1.hh}:${timeObj1.mm}`
      const to = `${timeObj2.hh}:${timeObj2.mm}`
      return this.tableData.some(item => {
        if (item.dockCode === this.formData.dockCode) {
          if (item.fmTime1 && fm >= item.fmTime1 && to <= item.toTime1) {
            return true
          } else if (item.fmTime2 && fm >= item.fmTime2 && to <= item.toTime2) {
            return true
          } else if (item.fmTime2 && fm >= item.fmTime3 && to <= item.toTime3) {
            return true
          } else {
            return false
          }
        }
      })
    }

  },

  watch: {
    dockData: {
      handler (item) {
        this.formData.dockName = item.dockName
      }
    },
    currentRow: {
      handler (item) {
        console.log(item)
        this.formData.status = item.status
        // this.formData.fmActTime = item.toActTime
        // this.formData.fmActTime = item.fmActTime
        this.$set(this.formData, 'toActTime', item.toActTime)
        this.$set(this.formData, 'fmActTime', item.fmActTime)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .mrg-t{
    margin-top: 20px
  }
</style>
