<template>
  <div>
    <el-dialog
      title="月台"
      :visible.sync="addFormVisible"
      :before-close="handleFormClose"
      width="60%"
    >
      <el-form
        :disabled="mode==='detail'"
        inline
        ref="addForm"
        label-position="top"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="月台编码" prop="dockCode">
          <el-input v-model="formData.dockCode" @input="codeChange" :disabled="mode==='edit'"></el-input>
        </el-form-item>
        <el-form-item label="月台名称" prop="dockName">
          <el-input v-model="formData.dockName"></el-input>
        </el-form-item>
        <el-form-item label="使用类型" prop="dockUseType">
          <el-select  v-model="formData.dockUseType">
            <el-option label="装" value="LOAD"></el-option>
            <el-option label="卸" value="UNLOAD"></el-option>
            <el-option label="装+卸" value="LU"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作业区域" prop="areaCode">
          <PublicQuery
            title="作业区域"
            single
            :rowData.sync="areaData"
            baseUrl="/doc_web/docweb"
            cfgKey="docWmsArea"
            :valueField.sync="formData.areaCode"
            :textField.sync="formData.areaName"
          ></PublicQuery>
        </el-form-item>
        <el-form-item label="时间段1开始时间" prop="fmTime1">
          <el-time-select
            v-model="formData.fmTime1"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:00'
            }"
            placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="时间段1结束时间" prop="toTime1">
          <el-time-select
            v-model="formData.toTime1"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:00',
              minTime: formData.fmTime1
            }"
            placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="时间段2开始时间" prop="fmTime2">
          <el-time-select
            v-model="formData.fmTime2"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:00',
              minTime: formData.fmTime1
            }"
            placeholder="选择时间"
            @change="timeCheck(formData.fmTime2,formData.toTime1,'fmTime2')">
          </el-time-select>
        </el-form-item>
        <el-form-item label="时间段2结束时间" prop="toTime2">
          <el-time-select
            v-model="formData.toTime2"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:00',
              minTime: formData.fmTime2
            }"
            placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="时间段3开始时间" prop="fmTime3">
          <el-time-select
            v-model="formData.fmTime3"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:00',
              minTime: formData.fmTime2
            }"
            placeholder="选择时间"
            @change="timeCheck(formData.fmTime3,formData.toTime2,'fmTime3')">
          </el-time-select>
        </el-form-item>
        <el-form-item label="时间段3结束时间" prop="toTime3">
          <el-time-select
            v-model="formData.toTime3"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '23:00',
              minTime: formData.fmTime3
            }"
            placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="使用车型" prop="vehicleType">
          <el-select multiple 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="isEnable">
          <el-checkbox v-model="formData.isEnable" true-label="Y" false-label="N"></el-checkbox>
        </el-form-item>
        <el-form-item
            label="备注"
            prop="remark">
            <el-input v-model="formData.remark"></el-input>
        </el-form-item>
      </el-form>
      <hr style="background-color:#F5F5F5;height:1px;border:none" v-if="mode==='detail'">
      <div class="row-mrg-t" v-if="mode==='detail'">
        <div class="operation-info">
          <span>创建人登录名(姓名)：{{formData.createLoginName}}({{formData.createUserNameCn}})</span>
          <span>创建时间：{{formData.createTime}}</span>
          <span>修改人登录名(姓名)：{{formData.modifyLoginName}}({{formData.modifyUserNameCn}})</span>
          <span>修改时间：{{formData.modifyTime}}</span>
        </div>
      </div>
      <div v-if="mode!=='detail'">
        <el-button v-auth="50700010105" type="primary" @click="submitForm">保存</el-button>
        <el-button v-auth="50700010106" type="primary" @click="submitAddForm">保存并新增</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formData: { vehicleType: [] },
      rules: {
        dockCode: [
          { required: true, message: '月台编码必填', trigger: 'blur' }
        ],
        dockName: [
          { required: true, message: '月台名称必填', trigger: 'blur' }
        ],
        dockUseType: [
          { required: true, message: '使用类型必填', trigger: 'blur' }
        ],
        fmTime1: [
          { required: true, message: '时间段1开始时间必填', trigger: 'blur' }
        ],
        toTime1: [
          { required: true, message: '时间段1结束时间必填', trigger: 'blur' }
        ]
      },
      areaData: {},
    }
  },
  props: {
    addFormVisible: Boolean,
    rowData: {
      type: Object,
      default: () => ({})
    },
    mode: String
  },
  methods: {

    timeCheck (a, b, key) {
      if (a > b || a < b) {
        this.$message.warning('当前开始时间要与上一个结束时间保持一致！')
        this.formData[key] = ''
      }
    },

    codeChange () {
      this.formData.dockName = this.formData.dockCode
    },

    // 发送保存数据
    psotList () {
      this.format()
      const url = this.$API.platform.DockBasicdataList.save
      const dockHeader = JSON.stringify(this.formData)
      const param = { dockHeader }
      // console.log(param)
      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$emit('saveOK')
        }
      })
    },

    // 关闭新增弹窗
    handleFormClose () {
      this.$emit('handleFormClose')
      this.$refs.addForm.resetFields()
    },
    // 格式化对象数据
    format () {
      for (const key in this.formData) {
        if (this.formData.hasOwnProperty(key)) {
          const element = this.formData[key]
          if (Array.isArray(element)) {
            this.formData[key] = element.join(',')
          }
        }
      }
      return this.formData
    },

    // 保存
    submitForm () {
      console.log(this.formData)
      this.$refs.addForm.validate((vaild) => {
        if (vaild) {
          this.psotList()
          this.$nextTick(() => {
            this.handleFormClose()
          })
        } else {
          return false
        }
      })
    },

    // 保存并新增
    submitAddForm () {
      console.log(this.formData)
      this.$refs.addForm.validate((vaild) => {
        if (vaild) {
          this.psotList()
          this.$nextTick(() => {
            this.$refs.addForm.resetFields()
          })
        } else {
          return false
        }
      })
    },
  },
  watch: {
    rowData: {
      handler (item) {
        console.log(item.vehicleType)
        this.formData = { ...item }
        if (item.vehicleType === null || item.vehicleType === undefined) {
          this.formData.vehicleType = []
        } else {
          this.formData.vehicleType = item.vehicleType.split(',')
        }
      },
    },
    areaData: {
      handler (item) {
        this.formData.areaCode = item.areaCode
        this.formData.areaName = item.areaName
      }
    }
  }
}
</script>
