<template>
  <el-dialog v-model="visible" title="点位管理" width="40%" :before-close="closeDialog">
    <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef">
      <el-form-item label="点位名称:" prop="name">
        <el-input v-model="addForm.name" placeholder="请输入点位名称" clearable />
      </el-form-item>
      <el-form-item label="点位地址:" prop="address">
        <el-input v-model="addForm.address" placeholder="请输入点位地址" clearable type="number"/>
      </el-form-item>
      <el-form-item label="点位类型:" prop="type">
        <el-select v-model="addForm.type" size="mini" placeholder="请选择点位类型">
          <el-option v-for="item in datatypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="字节顺序:" prop="byte_order">
        <el-select v-model="addForm.byte_order" size="mini" placeholder="请选择字节顺序">
          <el-option v-for="item in byte_orderArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="点位描述:" prop="description">
        <el-input v-model="addForm.description" placeholder="请输入点位描述" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveP"> 保存 </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"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const state = reactive({
      addForm: {
        type: 1,
        byte_order: 1
      },
      datatypeArr: [{
        label: 'bool',
        value: 1
      }, {
        label: 'int16',
        value: 2
      }, {
        label: 'int32',
        value: 3
      }, {
        label: 'int64',
        value: 4
      },
      {
        label: 'unit16',
        value: 5
      }, {
        label: 'unit32',
        value: 6
      },
      {
        label: 'unit64',
        value: 7
      }, {
        label: 'float32',
        value: 8
      }, {
        label: 'float64',
        value: 9
      }],
      byte_orderArr: [{
        label: 'null',
        value: 1
      }, {
        label: '12',
        value: 2
      }, {
        label: '21',
        value: 3
      }, {
        label: '4321',
        value: 4
      },
      {
        label: '2143',
        value: 5
      },
      {
        label: '1234',
        value: 6
      },
      {
        label: '3412',
        value: 7
      }, {
        label: '4312',
        value: 8
      }, {
        label: '3421',
        value: 9
      },
      {
        label: '2134',
        value: 10
      },
      {
        label: '1243',
        value: 11
      },
      {
        label: 'BIG',
        value: 12
      },
      {
        label: 'LIT',
        value: 13
      }],
      rules: {
        name: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
        address: [{ required: true, message: "请输入点位地址", trigger: "blur" }],
        type: [{ required: true, message: "请选择点位类型", trigger: "blur" }],
        byte_order: [{ required: true, message: "请选择字节顺序", trigger: "blur" }],
      },
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {

    });
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };

    const importData = () => { };

    const exportData = () => { };

    const saveP = async () => {
      console.log(ruleFormRef.value);
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const param = {
            template_name: props.formData.name,
            ...state.addForm,
            address: Number(state.addForm.address)
          }
          const res = await infoApi.addP(param);
          if (res.code == 0) {
            ElMessage.success(res.message || "请求成功");
            ctx.emit("dialogClose");
          } else {
            ElMessage.error(res.message);
          }
        } else {
          console.log("error submit!");
        }
      });


    };
    return {
      ...toRefs(state),
      visible,
      closeDialog,
      importData,
      exportData,
      saveP,
      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>
