<template>
  <el-dialog class="dialog"
             :visible.sync="dialogVisible"
             center
             :title="Number(type)===2?'确认':data?'编辑':'添加'"
             append-to-body
             :before-close="onBeforeClose"
             @close="onClose"
             width="600px">
    <el-form label-width="120px" ref="dataForm" :model="dataForm" :rules="dataRules">
      <el-form-item label="设备名称" prop="name">
        <el-input v-model.trim="dataForm.name" placeholder="请输入设备名称" class="input-width" maxlength="20" clearable></el-input>
      </el-form-item>
      <el-form-item label="设备厂商" prop="vendor">
        <el-input v-model.trim="dataForm.vendor" placeholder="请输入设备厂商" class="input-width" maxlength="20" clearable></el-input>
      </el-form-item>
      <el-form-item label="设备型号" prop="model">
        <el-input v-model.trim="dataForm.model" placeholder="请输入设备型号" class="input-width" maxlength="20" clearable></el-input>
      </el-form-item>
      <el-form-item label="占用层数" prop="layerCount">
        <el-input v-model.trim.number="dataForm.layerCount" placeholder="请输入占用层数" class="input-width" maxlength="20" clearable oninput="value=value.replace(/[^\d]/g,'')"></el-input>
      </el-form-item>
      <el-form-item v-if="Number(type)===2" label="设备备注" prop="remark">
        <el-input v-model.trim="dataForm.remark" placeholder="请输入设备备注" class="input-width" maxlength="20" clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="onConfirm">确 认</el-button>
      <el-button v-if="Number(type)===1 && dataForm.id" type="danger" @click="onDelete">删 除</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {validateNotEmpty} from "@/utils/validate";


export default {
  name: "DeviceDeviceCabinetEdit",
  components: {},
  props: {
    visible: {
      type: Boolean
    },
    data: {
      type: Object
    },
    type: { // 类型。1:添加默认设备  2:添加到机柜
      type: [String, Number]
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {
      dataForm: {
        id: undefined, // 机柜找中子设备id
        cabinetId: undefined, // 设备id
        name: undefined, // 设备名称
        model: undefined, // 设备型号
        vendor: undefined, // 设备厂商
        layerCount: undefined, // 设备高度
        remark: undefined, // 设备备注
      },

      dataRules: {
        name: [{validator: validateNotEmpty, errorMessage: "设备名称不能为空", required: true, trigger: 'blur'}],
        layerCount: [{validator: validateNotEmpty, errorMessage: "设备高度不能为空", required: true, trigger: 'blur'}],
      }
    }
  },

  mounted() {
    this.initData();
    if (this.data) {
      this.dataForm = {...this.data};
    }
  },

  methods: {
    validateNotEmpty,

    // 初始化数据
    initData() {
    },

    // 取消
    onCancel() {
      this.dialogVisible = false;
    },

    // 确认
    onConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (Number(this.type) === 1) { // 操作设备模板
            if (this.data) { // 更新
              this.$axios.put("/v1/device/template/update", this.dataForm).then(() => {
                this.$message.success("更新成功！");
                this.$emit("update");
                this.onCancel();
              });
            } else { // 添加
              this.$axios.post("/v1/device/template/add", this.dataForm).then(() => {
                this.$message.success("保存成功！");
                this.$emit("add");
                this.onCancel();
              });
            }
          } else { // 添加到机柜中
            this.$axios.post("/v1/device/cabinet/child/device/add", this.dataForm).then(data => {
              this.$message.success("添加成功！");
              this.dataForm.id = data.id;
              this.$emit("confirm", this.dataForm);
              this.onCancel();
            });
          }
        }
      });
    },

    onDelete() {
      this.$axios.delete(`/v1/device/template/delete/${this.dataForm.id}`).then(() => {
        this.$message.success("删除成功！");
        this.$emit("delete", this.dataForm.id);
        this.onCancel();
      });
    },

    // 关闭前确认
    onBeforeClose(done) {
      if (this.$store.state.app.closeConfirmEnable) {
        this.$confirm("确认关闭？").then(() => done());
      } else {
        done();
      }
    },

    // 关闭
    onClose() {
      this.$emit("close");
    }
  }
}
</script>

<style scoped lang="scss">
.input-width {
  width: 300px;
}

.image {
  height: 80px;
  margin-right: 14px;

  ::v-deep.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-size: 40px;
  }
}
</style>
