<template>
  <el-dialog v-model="visible" title="设备管理" width="40%" :before-close="closeDialog">
    <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef" size="large" label-position="top">
      <el-form-item label="设备名称:" prop="device_name">
        <el-input v-model="addForm.device_name" placeholder="请输入设备名称(不超过20个字符)" maxlength="10" clearable
          :disabled="type !== 'I'" />
      </el-form-item>
      <el-form-item label="设备id:" prop="slave_id">
        <el-input v-model="addForm.slave_id" placeholder="请输入设备id:1-255" clearable type="number" />
      </el-form-item>

      <el-form-item label="设备描述:" prop="device_description">
        <el-input v-model="addForm.device_description" placeholder="请输入点位描述（不超过50）" maxlength="50" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="large" @click="closeDialog">取消</el-button>
        <el-button size="large" type="primary" @click="saveSet"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  props: ["formData", "dialogVisible", "setData", "type"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const checkSetId = (rule, value, callback) => {
      let num = Number(value);
      if (value && (num >= 1 && num <= 255)) {
        callback();
      } else {
        callback(new Error("设备ID：1-255"));
      }
    };
    const validName = (rule, value, callback) => {
      var name = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
      if (name.test(value) || !value) {
        callback();
      } else {
        callback(new Error("名称只能以字母开头,仅支持字母,数字和下划线,最短3个字符起,且长度不能超过20个字符"));
      }
    };
    const ruleFormRef = ref(null);
    const state = reactive({
      addForm: {
      },
      modelArr: [],
      rules: {
        device_name: [{ required: true, message: "请输入设备名称", trigger: "blur" },
        { min: 3, max: 20, message: "长度在3到20个字符", trigger: "blur" },
        { required: true, validator: validName, trigger: "blur" },],
        device_description: [
          { required: false, message: "请输入设备描述", trigger: "blur" }
        ],
        slave_id: [
          { required: true, message: "请输入设备ID", trigger: "blur" },
          { required: true, validator: checkSetId, trigger: "blur" }
        ],
      },
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {
      state.addForm = props.setData;
    });
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };

    const scanData = () => { };

    const saveSet = async () => {
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const param = {
            driver_name: props.formData.driver_name,
            ...state.addForm,
            slave_id: Number(state.addForm.slave_id)
          }
          const res = props.type === 'I' ? await infoApi.addSet(param) : await infoApi.editSet(param);
          if (res.code == 0) {
            ElMessage.success(res.message || "请求成功");
            ctx.emit("dialogSuccess");
          } else {
            ElMessage.error(res.data || res.message);
          }
        } else {
        }
      });


    };
    return {
      ...toRefs(state),
      visible,
      closeDialog,
      saveSet,
      ruleFormRef
    };
  },
};
</script>
<style lang="scss" scoped>
.top-title {
  width: 100%;

  ::v-deep .el-card__body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 16px;
  }
}

.btns {
  padding: 15px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  cursor: pointer;
}
</style>
