<template>
  <el-dialog
    v-model="visible"
    :title="type === 'I' ? '新增模板': '编辑模板'"
    width="30%"
    :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
          :disabled="type === 'I' ? false: true"
        />
      </el-form-item>
      <el-form-item label="模板描述:" prop="description">
        <el-input
          v-model="addForm.description"
          placeholder="请输入模板描述"
          clearable
        />
      </el-form-item>
      <el-form-item label="模板类型:" prop="type">
        <el-input
          v-model="addForm.type"
          disabled
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="saveFormData"> 保存 </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";
import { mb_list, mb_info, response} from '../proto/data/pd'
export default {
  props: ["formData", "dialogVisible", "type"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) { 
    const ruleFormRef = ref(null); 
    const state = reactive({
      addForm: {},
      rules: {
        name: [
          { required: true, message: "请输入模板名称", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入模板描述", trigger: "blur" }
        ],
        type: [
          { required: true, message: "请选择类型", trigger: "blur" }
        ],
      },
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });
    const type = computed(() => {
      return props.type;
    });
    onMounted(() => {
      state.addForm = props.formData; 
    });

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

    const importData = () => {};

    const exoportData = () => {};


    const saveFormData = () => {
      ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const req_databuf = mb_info.encode(state.addForm).finish();
          // 截取有效长度
          const req_data = req_databuf.slice(0, req_databuf.length);
          const res = props.type === 'I' ? await infoApi.addMb(req_data) : await infoApi.editMb(req_data);
          console.log(555, res)
          const ret = response.decode(new Uint8Array(res));
          if (ret.code == 0) {
              // 获取数据
              console.log(new TextDecoder().decode(ret.data));
              ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
              // 关闭弹框
              ctx.emit("dialogSuccess");
          } else {
              console.log(res);
          }
        } else {
          console.log("error submit!");
        }
      });
    };
    return {
      ...toRefs(state),
      visible,
      type,
      closeDialog,
      importData,
      exoportData,
      saveFormData,
      ruleFormRef
    };
  },
};
</script>
<style lang="scss" scoped>
.title-div {
  height: 40px;
  line-height: 40px;
  display: flex;

  > div {
    width: 15%;
    span {
      margin-right: 10px;
    }
  }
}
.tree-div {
  height: 780px;
  display: flex;
  justify-content: space-between;
  .tree {
    width: 20%;
    border: 1px solid #f2f2f2;
    height: 100%;
    padding: 10px;
  }
  .table {
    height: 100%;
    width: 79%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .point-table {
      border: 1px solid #f2f2f2;
      padding: 10px;
    }
    .propertie-table {
      padding: 10px;
      border: 1px solid #f2f2f2;
    }
  }
  .custom-tree-node {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .add-icon {
      padding-right: 15px;
    }
  }
}
</style>
