<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="editRepairNotesDialog"
    :title="title"
    :close-on-click-modal="false"
    width="85%"
    :maxable="true"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="editFormRef" :model="editForm" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="编码">
            <el-input v-model="editForm.code" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="故障类型"
            prop="type"
            :rules="{
              required: true,
              message: '请选择故障类型',
              trigger: 'change'
            }"
          >
            <el-select
              style="width: 100%;"
              v-model="editForm.type"
              :disabled="type == 'view'"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="故障现象"
            prop="faultPhenomenon"
            :rules="{
              required: true,
              message: '请输入故障现象',
              trigger: 'change'
            }"
          >
            <el-input
              v-model="editForm.faultPhenomenon"
              size="small"
              placeholder="请输入"
              :disabled="type == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="故障原因"
            prop="faultReason"
            :rules="{
              required: true,
              message: '请输入故障原因',
              trigger: 'change'
            }"
          >
            <el-input
              v-model="editForm.faultReason"
              size="small"
              placeholder="请输入"
              :disabled="type == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="维修过程"
            prop="maintenanceProcess"
            :rules="{
              required: true,
              message: '请输入维修过程',
              trigger: 'change'
            }"
          >
            <el-input
              v-model="editForm.maintenanceProcess"
              size="small"
              placeholder="请输入"
              :disabled="type == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件">
            <fileMain :type="type == 'view' ? 'view' : ''" v-model="editForm.attachments"></fileMain>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" v-if="type == 'edit'" @click="save" :loading="loading">确认</el-button>
    </template>
  </ele-modal>
</template>
  
  <script>
import { faultKnowledgeUpdate } from '@/api/salesServiceManagement/index';
import fileMain from '@/components/addDoc/index.vue';
export default {
  props: {
    typeOptions: {
      type: Array,
      default: () => []
    }
  },
  components: { fileMain },
  data() {
    return {
      loading: false,
      title: '修改',
      editRepairNotesDialog: false,
      type: 'edit',
      editForm: {}
    };
  },
  methods: {
    init(row, type) {
      this.editRepairNotesDialog = true;
      this.type = type;
      this.title = type == 'edit' ? '修改' : '详情';
      this.editForm = {
        code: row.code,
        type: String(row.type),
        faultPhenomenon: row.faultPhenomenon,
        faultReason: row.faultReason,
        maintenanceProcess: row.maintenanceProcess,
        attachments: row.attachments,
        id: row.id
      };
    },
    handleClose() {
      this.editRepairNotesDialog = false;
      this.editForm = {};
      this.$refs.editFormRef.clearValidate();
    },
    save() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.editForm));
          delete data.code;
          const res = await faultKnowledgeUpdate(data);
          if (res) {
            this.$message.success('操作成功');
            this.handleClose();
            this.$emit('refresh');
          }
        }
      });
    }
  }
};
</script>
  
  <style>
</style>