<!--
 * @Author: your name
 * @Date: 2021-12-08 09:57:19
 * @LastEditTime: 2021-12-17 09:59:52
 * @LastEditors: Please set LastEditors
 * @Description: 设备详情 - 新增 or 编辑 设备 的 dialog
 * @FilePath: \hyyfClient\src\views\DeviceMana\device\AddOrEdit.vue
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleCancel"
  >
    <div class="reset-form">
      <el-form
        label-width="120px"
        size="small"
        :rules="rules"
        :model="form"
        ref="form"
      >
        <el-form-item label="设备名称：" prop="deviceName">
          <el-input v-model="form.deviceName"></el-input>
        </el-form-item>
        <el-form-item label="设备编号：" prop="deviceCode">
          <el-input v-model="form.deviceCode"></el-input>
        </el-form-item>
        <el-form-item label="型号：" prop="deviceType">
          <el-input v-model="form.deviceType"></el-input>
        </el-form-item>
        <el-form-item label="厂家：" prop="factory">
          <el-input v-model="form.factory"></el-input>
        </el-form-item>
        <el-form-item label="维保人：" prop="worker">
          <el-input v-model="form.worker"></el-input>
        </el-form-item>
        <el-form-item label="基本参数：" prop="mainParams">
          <el-input v-model="form.mainParams"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="state">
          <el-select v-model="form.state" style="width: 100%">
            <el-option
              v-for="item in statusItems"
              :key="item.label"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修记录：" prop="record">
          <el-input v-model="form.record"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { postDeviceAdd, postDeviceEdit } from "@/utils/chenApi.js";
export default {
  data() {
    return {
      title: "",
      dialogVisible: false,
      form: {
        id: undefined,
        deviceName: "",
        deviceCode: "",
        deviceType: "",
        factory: "",
        worker: "",
        mainParams: "",
        state: "",
        record: "",
      },
      rules: {
        deviceName: [
          { required: true, message: "设备名称不可以为空", trigger: "blur" },
        ],
        state: [
          { required: true, message: "设备状态需要选择", trigger: "blur" },
        ],
      },
      statusItems: [
        {
          label: "正常",
          value: 1,
        },
        {
          label: "异常",
          value: 2,
        },
      ],
    };
  },
  methods: {
    init(row) {
      if (row) {
        this.title = "编辑设备";
        this.$nextTick(() => {
          this.form = { ...row };
        });
      } else {
        this.title = "新增设备";
      }
      this.dialogVisible = true;
    },
    handleSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let request = postDeviceAdd;
      if (this.form.id) {
        request = postDeviceEdit;
      }
      request({ ...this.form }).then((res) => {
        loading.close();
        if (res.code === 10000) {
          this.$message.success(`${this.form.id ? "修改" : "添加"}成功`);
          this.handleCancel();
          this.$emit("reflash");
        }
      });
    },
    // 取消
    handleCancel() {
      this.dialogVisible = false;
      if (this.form.id) {
        this.$nextTick(() => {
          this.$refs["form"].resetFields();
        });
      }
    },
  },
};
</script>
<style scoped>
.reset-form {
  margin-right: 20px;
}
.dialog-footer {
  margin-right: 20px;
}
</style>
