<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="planStartTime">
          <el-date-picker
            v-model="form.planStartTime"
            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="12">
        <el-form-item label="计划结束时间" prop="planEndTime">
          <el-date-picker
            v-model="form.planEndTime"
            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="equipmentId">
          <el-cascader
            v-model="form.equipmentId"
            :options="cascaderOptions"
            :props="{ value: 'id', label: 'name' }"
            style="width: 100%"
            @change="selectEq"
          ></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="24">
        <el-form-item label="维护内容" prop="maintainContent">
          <el-input
            v-model="form.maintainContent"
            placeholder="维护内容"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { getModelList, getNameList } from '@/api/basicConfig'
import {
  getMaintainManage,
  maintainManageAdd,
  maintainManageUUnDistribute
} from '@/api/deviceManagement'
import moment from 'moment'
import { getTreeData } from '@/api/app'
export default {
  name: 'SparePartsAdd',
  data() {
    return {
      form: {
        id: '',
        code: '',
        planStartTime: '',
        planEndTime: '',
        proLineId: '',
        equipmentId: '',
        sparePartName: '',
        sparePartModel: '',
        maintainContent: ''
      },
      cascaderOptions: [],
      rules: {
        code: [
          { required: true, message: '请输入维护工单号', trigger: 'blur' }
        ],
        planStartTime: [
          { required: true, message: '请选择计划开始时间', trigger: 'change' }
        ],
        planEndTime: [
          { required: true, message: '请选择计划结束时间', trigger: 'change' }
        ],
        equipmentId: [
          { required: true, message: '请选择设备名称', trigger: 'change' }
        ],
        sparePartName: [
          { required: true, message: '请选择备件名称', trigger: 'change' }
        ],
        sparePartModel: [
          { required: true, message: '请选择备件型号', trigger: 'change' }
        ]
      },
      sparePartsList: [],
      sparePartsSpecList: [],
      isEdit: false
    }
  },
  mounted() {},
  methods: {
    init(id) {
      this.getTree()
      this.getNameList()
      if (id) {
        this.form.id = id
        this.isEdit = true
        getMaintainManage({ id: id }).then((res) => {
          console.log(res)
          this.form.code = res.data.code
          this.form.planStartTime = res.data.planStartTime
          this.form.planEndTime = res.data.planEndTime
          this.form.equipmentId = res.data.equipmentId
          this.form.proLineId = res.data.proLineId
          this.form.sparePartName = res.data.sparePartName
          this.selectModel(this.form.sparePartName, 'noClear')
          this.form.sparePartModel = res.data.model
          this.form.maintainContent = res.data.maintainContent
        })
      } else {
        this.form.planStartTime = moment().format('yyyy-MM-DDTHH:mm:ss')
        this.form.planEndTime = moment()
          .add(2, 'days')
          .format('yyyy-MM-DDTHH:mm:ss')
        this.form.id = ''
        this.isEdit = false
      }
    },
    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) => {
        console.log(res)
        this.sparePartsList = res.data
        this.sparePartsSpecList = []
      })
    },
    selectModel(val, param) {
      getModelList({
        name: val
      }).then((res) => {
        console.log(res)
        this.sparePartsSpecList = res.data
        if (param !== 'noClear') {
          this.form.sparePartModel = ''
        }
      })
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        console.log(this.form)
        if (valid) {
          if (this.isEdit) {
            maintainManageUUnDistribute({ ...this.form }).then((res) => {
              if (res.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
                this.$emit('successSubmit')
              }
            })
          } else {
            maintainManageAdd({ ...this.form }).then((res) => {
              if (res.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
                this.$emit('successSubmit')
              }
            })
          }
        } else {
          return false
        }
      })
    },
    formClear() {
      this.$refs.form.resetFields()
      this.sparePartsList = []
      this.sparePartsSpecList = []
    }
  }
}
</script>
