<template>
  <div>
    <Modal v-model="repairerNamesActModal" width="430">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <Row>
        <!--维护实际时间-->
        <Col span="24" />
        <Form
          id="edit-time-names-forms"
          ref="formObj"
          :model="formObj"
          :rules="ruleValidate"
          inline
          onsubmit="return false"
          :label-width="130"
        >
          <Form-item label="维护实际维修人" prop="repairerNamesAct">
            <AutoComplete
              v-model="formObj.repairerNamesAct"
              :down-data="repairerNamesList"
              style="width:245px"
              show-key="repairerNames"
              placeholder="请选择实际维修人"
              @on-result-change="_repairerNameChange"
            />
          </Form-item>
        </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="ghost" style="margin-left: 8px" @click="_cancel">
          取消
        </Button>
        <Button type="info" @click="_ok">
          确定
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { equipRepairDetail } from '../../../../api'
import AutoComplete from '../../../../components/base/autoCompletes.vue'

const defVal = {
  repairerNamesAct: ''
}
export default {
  name: 'LmsMaintainStartTimeAct',
  components: {
    AutoComplete
  },
  data() {
    return {
      repairerNamesActModal: false,
      modalTitle: '',
      types: '',
      selectId: [],
      repairerNamesList: [],
      formObj: defVal,
      detailId: '',
      ruleValidate: {
        repairerNamesAct: [
          {
            required: true,
            message: '维护实际维修人不能为空',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    _open(ids, detailId) {
      this.$refs.formObj.resetFields()
      this.detailId = detailId
      this.modalTitle = '维护实际维修人'
      this._openSearchEquiprepairer()
      this.repairerNamesActModal = true
      this.selectId = ids
    },
    _cancel() {
      this.repairerNamesActModal = false
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          this._resultChange('保存成功!')
        }
      })
    },
    _resultChange(msg) {
      this.repairerNamesActModal = false
      this.$Message.success(msg)
      this.$emit(
        'on-result-change',
        this.formObj.repairerNamesAct,
        'repairerNamesAct'
      )
    },
    // 实际维修人 repairerNamesList
    _openSearchEquiprepairer: async function(repairer = '') {
      const data = {
        name: '计划维修人',
        value: repairer
      }
      const result = await equipRepairDetail.equipRepairBreakDownEdit(data)
      const repairerNameList = result.list
      this.repairerNamesList = repairerNameList
    },
    _repairerNameChange(msg, data) {
      switch (msg) {
        case 'select':
          this.formObj.repairerNamesAct = data.repairerNames
          break
        case 'query':
          this.formObj.repairerNamesAct = data.repairerNames
          this._openSearchEquiprepairer(data.repairerNames)
          break
      }
    },
    _repairerNamesActChange(data) {
      this.formObj.repairerNamesAct = data
    }
  }
}
</script>

<style scoped>
</style>
