<template>
  <div class="form-container">
    <div class="method-btn-area">
      <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
    </div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="180px">
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.equipmentId')" prop="equipmentId">
            <el-select
              v-model="formData.equipmentId"
              :placeholder="$t('module.equipmentManager.maintainlog.placeholderequipmentId')"
              clearable
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in dict.device"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceOrderNumber')" prop="logMaintenanceOrderNumber">
            <el-input v-model="formData.logMaintenanceOrderNumber" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber')" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="23">
          <el-form-item label="是否结束保养" prop="field104" required>
            <el-switch v-model="formData.field104" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainNextTime')" prop="nextMaintenanceTime">
            <el-date-picker
              v-model="formData.nextMaintenanceTime"
              type="datetime"
              :style="{width: '100%'}"
              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainNextTime')"
              clearable
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainStartTime')" prop="actualStartTime">
            <el-date-picker
              v-model="formData.actualStartTime"
              type="datetime"
              :style="{width: '100%'}"
              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainEndTime')" prop="actualEndTime">
            <el-date-picker
              v-model="formData.actualEndTime"
              type="datetime"
              :style="{width: '100%'}"
              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainWorkerId')" prop="maintainWorkerId">
            <el-select
              v-model="formData.maintainWorkerId"
              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId')"
              clearable
              multiple
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item, index) in dict.worker"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainDuration')" prop="maintainDuration">
            <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
            <el-select
              v-model="formData.status"
              :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
              clearable
              :style="{width: '100%'}"
            >
              <el-option
                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
                :value="0"
              />
              <el-option
                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
                :value="1"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceDetail')" prop="maintenanceDes">
            <el-input
              v-model="formData.maintenanceDes"
              type="textarea"
              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail')"
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="field110">
            <el-upload
              ref="field110"
              :file-list="field110fileList"
              :action="field110Action"
              :before-upload="field110BeforeUpload"
              name="annex"
            >
              <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('module.equipmentManager.maintainlog.remark')" prop="remark">
            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.maintainlog.placeholderremark')" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { editMaintainLog, getMaintainLog } from '@/api/equipment/maintain'
import { getDictDevice, getDictWorker } from '@/api/dict'
import i18n from '@/lang'
import { timeIsBefore } from '@/utils'
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        equipmentId: undefined,
        logMaintenanceOrderNumber: undefined,
        field104: false,
        nextMaintenanceTime: null,
        actualStartTime: null,
        maintainWorkerIdId: undefined,
        actualEndTime: undefined,
        maintenanceDes: undefined,
        field110: null,
        remark: undefined,
        status: undefined
      },
      rules: {
        equipmentId: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainlog.placeholderequipmentId'),
          trigger: 'change'
        }],
        logMaintenanceOrderNumber: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber'),
          trigger: 'change'
        }],
        maintainWorkerId: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId'),
          trigger: 'change'
        }],
        nextMaintenanceTime: [{
          required: false,
          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainNextTime'),
          trigger: 'change'
        }],
        actualStartTime: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualStartTime'),
          trigger: 'change'
        }],
        actualEndTime: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualEndTime'),
          trigger: 'change'
        }],
        maintainDuration: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainDuration'),
          trigger: 'blur'
        }],
        maintenanceDes: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail'),
          trigger: 'blur'
        }],
        status: [{
          required: true,
          message: i18n.t('module.equipmentManager.maintainplan.placeholderstatus'),
          trigger: 'blur'
        }],
        remark: []
      },
      field110Action: 'https://jsonplaceholder.typicode.com/posts/',
      field110fileList: [],
      dict: {
        device: [],
        worker: []
      }
    }
  },
  computed: {
    orderId() {
      return this.$route.query.orderId
    },
    id() {
      return this.$route.query.id
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getDict()
    this.getInfo()
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        if (this.formData.actualStartTime && this.formData.actualEndTime && !timeIsBefore(this.formData.actualStartTime, this.formData.actualEndTime)) {
          this.$message({
            type: 'error',
            message: '请确保时间前后顺序正确！'
          })
          return console.log('拦截')
        }
        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
        await editMaintainLog(this.formData).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '修改成功！'
            })
            this.$router.go(-1)
          }
        }).catch(res => {
          if (res.code !== 0) {
            this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
            console.log(this.formData.maintainWorkerId)
          }
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field110BeforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 10
      if (!isRightSize) {
        this.$message.error('文件大小超过 10MB')
      }
      return isRightSize
    },
    async getInfo() {
      const result = await getMaintainLog({
        id: this.id
      })
      if (result.code === 0) {
        this.formData = result.data
        this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
      }
    },
    async getDict() {
      const result = await getDictDevice({
        current: 1,
        size: 999
      })
      this.dict.device = result
      const result2 = await getDictWorker()
      this.dict.worker = result2
    },
    turnBack() {
      this.$router.go(-1)
    }
  }
}

</script>
<style lang="scss">
.form-container {
  padding: 30px;
      .method-btn-area {
    padding: 15px 30px;
    margin: 10px 0 20px 0;
    border: 1px solid #dfe6ec;
  }
}
.el-upload__tip {
  line-height: 1.2;
}

</style>
