<template>
  <el-form ref="form" :rules="rules" label-width="110px" :model="form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="维护工单号" prop="code">
          <el-input
            v-model="form.code"
            placeholder="维护工单号"
            :disabled="isEdit"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备名称" prop="equipmentId">
          <el-cascader
            v-model="form.equipmentId"
            :options="cascaderOptions"
            :props="{ value: 'id', label: 'name' }"
            @change="selectEq"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="备件名称" prop="sparePartName">
          <el-select
            v-model="form.sparePartName"
            placeholder="备件名称"
            @change="selectModel"
            style="width: 100%"
          >
            <el-option
              v-for="(item, i) in sparePartsList"
              :key="i"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备件型号" prop="sparePartModel">
          <el-select
            v-model="form.sparePartModel"
            placeholder="备件型号"
            style="width: 100%"
          >
            <el-option
              v-for="(item, i) in sparePartsSpecList"
              :key="i"
              :label="item.model"
              :value="item.model"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="更换数量" prop="replaceNum">
          <el-input-number
            v-model="form.replaceNum"
            :min="0"
            :max="10"
            label="更换数量"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="维护人员" prop="maintainStaff">
          <el-input
            v-model="form.maintainStaff"
            placeholder="维护人员"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="实际开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-ddTHH:mm:ss"
            placeholder="实际开始时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实际结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-ddTHH:mm:ss"
            placeholder="实际结束时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="完成情况" prop="complete">
          <el-input v-model="form.complete" placeholder="完成情况"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import defaultSettings from '@/settings'
import { getTreeData } from '@/api/app'
import { getModelList, getNameList } from '@/api/basicConfig'
import moment from 'moment'
import {
  getMaintainManage,
  autoMaintainAdd,
  autoMaintainUpdate
} from '@/api/deviceManagement'
export default {
  name: 'SelfMaintenanceAdd',
  data() {
    return {
      form: {
        id: '',
        code: '',
        equipmentId: '',
        sparePartName: '',
        sparePartModel: '',
        replaceNum: null,
        maintainStaff: '',
        startTime: '',
        endTime: '',
        complete: ''
      },
      cascaderOptions: [],
      rules: {
        code: [
          { required: true, message: '请输入维护工单号', trigger: 'blur' }
        ],
        equipmentId: [
          { required: true, message: '请选择设备名称', trigger: 'change' }
        ],
        sparePartName: [
          { required: true, message: '请选择备件名称', trigger: 'change' }
        ],
        sparePartModel: [
          { required: true, message: '请选择备件型号', trigger: 'change' }
        ],
        replaceNum: [
          { required: true, message: '请输入更换数量', trigger: 'blur' }
        ],
        maintainStaff: [
          { required: true, message: '请输入执行人员', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择实际开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择实际结束时间', trigger: 'change' }
        ]
      },
      productionLineList: defaultSettings.productionLineList,
      sparePartsTypeList: defaultSettings.sparePartsTypeList,
      sparePartsList: [],
      sparePartsSpecList: [],
      isEdit: false
    }
  },
  methods: {
    init(id) {
      this.getTree()
      this.getNameList()
      if (id) {
        this.form.id = id
        this.isEdit = true
        getMaintainManage({ id }).then((res) => {
          this.form.code = res.data.code
          this.form.equipmentId = res.data.equipmentId
          this.form.proLineId = res.data.proLineId
          this.form.sparePartName = res.data.sparePartName
          this.form.sparePartModel = res.data.model
          this.form.replaceNum = res.data.replaceNum
          this.form.maintainStaff = res.data.maintainStaff
          this.form.startTime = res.data.startTime
          this.form.endTime = res.data.endTime
          this.form.complete = res.data.complete
        })
      } else {
        this.form.startTime = moment().format('yyyy-MM-DDTHH:mm:ss')
        this.form.endTime = moment().format('yyyy-MM-DDTHH:mm:ss')
        this.isEdit = false
        this.form.id = ''
      }
    },
    getTree() {
      getTreeData().then((res) => {
        this.cascaderOptions = res.data
      })
    },
    selectEq(val) {
      this.form.equipmentId = val[2]
      this.form.proLineId = val[0]
    },
    getNameList() {
      getNameList({
        type: ''
      }).then((res) => {
        this.sparePartsList = res.data
      })
    },
    selectModel(val) {
      getModelList({
        name: val
      }).then((res) => {
        this.sparePartsSpecList = res.data
        this.form.sparePartModel = ''
      })
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            autoMaintainUpdate({ ...this.form }).then(() => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('successSubmit')
            })
          } else {
            autoMaintainAdd({ ...this.form }).then(() => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('successSubmit')
            })
          }
        } else {
          return false
        }
      })
    },
    formClear() {
      this.$refs.form.resetFields()
      this.sparePartsList = []
      this.sparePartsSpecList = []
      this.form.proLineId = ''
      this.form.id = ''
    }
  }
}
</script>
