<template>
  <tiny-drawer
    title="标题"
    :visible="visible"
    @update:visible="visible = $event"
    @confirm="confirm"
  >
    <div class="about">
       <tiny-form label-width="60px">
         <tiny-form-item label="ID">
           <tiny-input v-model="createData.id" placeholder="请输入ID"></tiny-input>
         </tiny-form-item>
         <tiny-form-item label="名称">
           <tiny-input v-model="createData.name" placeholder="请输入名称"></tiny-input>
         </tiny-form-item>
         <tiny-form-item label="协议">
           <tiny-input v-model="createData.protocol" placeholder="请输入协议"></tiny-input>
         </tiny-form-item>
         <tiny-form-item label="端点">
           <tiny-input v-model="createData.endpoint" placeholder="请输入端点"></tiny-input>
         </tiny-form-item>
         <tiny-form-item label="点位" v-if="mode=='edit'">
           <tiny-tree
              ref="treeRef"
              show-checkbox
              :data="pointData"
              node-key="id"
              only-check-children="true"
              :props="{ children: 'children', label: 'browse_name' }"
              @check="check"
              @check-change="checkChange"
              default-expand-all
            ></tiny-tree>
         </tiny-form-item>
         <tiny-form-item>
            <tiny-button type="primary" @click="submitClick"> 提交 </tiny-button>
          </tiny-form-item>
       </tiny-form>
    </div>
  </tiny-drawer>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import api from "../api";
import treedata from '@/utils/treedata.json';
const visible = ref(false);
const props = defineProps({
 mode: {
   type: String,
   default: "add",
 },
});
const emit = defineEmits(["update:visible"]);
const confirm = () => {
  emit("update:visible", false);
};
const treeRef = ref();
const createData = ref({
  id: "",
  name: "",
  protocol: "",
  endpoint: "",
});
const pointData = ref(treedata);
// function getChecks() {
//   const currentKey = treeRef.value.getCurrentKey();

//   // 查询勾选的值
//   const checkedKeys = treeRef.value.getCheckedKeys();
//   // 查询勾选叶子的值
//   const checkedKeysOnlyLeaf = treeRef.value.getCheckedKeys(true);
//   // 查询勾选的节点数据
//   const checkedNodes = treeRef.value.getCheckedNodes();
//   // 查询勾选的叶子节点数据，且包含半选状态的节点
//   const checkedNodesOnlyLeafAndHalf = treeRef.value.getCheckedNodes(true, true);
//   // 查询半选的值
//   const checkedHalfKeys = treeRef.value.getHalfCheckedKeys();
//   // 查询半选的节点数据
//   const checkedHalfNodes = treeRef.value.getHalfCheckedNodes();

//   console.log("当前组件的勾选状态为： ", treeRef.value, {
//     currentKey,
//     checkedKeys,
//     checkedKeysOnlyLeaf,
//     checkedNodes,
//     checkedNodesOnlyLeafAndHalf,
//     checkedHalfKeys,
//     checkedHalfNodes,
//   });
// }
// function clear() {
//   treeRef.value.setCheckedKeys([]);
// }
// function setChecked() {
//   // setChecked: (data, checked, deep) => void，deep 为 true 时，深度勾选
//   treeRef.value.setChecked({ id: "1-1" }, true, true);
//   treeRef.value.setChecked({ id: "3" }, true, false);
// }
// function setCheckedByNodeKey() {
//   // setCheckedByNodeKey: (key, checked) => void
//   treeRef.value.setCheckedByNodeKey("1-1", false);
// }
// function setCheckedKeys() {
//   // setCheckedKeys: (keys, leafOnly)=>void
//   treeRef.value.setCheckedKeys(["1-1", "2-1", "3-1"]);
// }
// function setCheckedNodes() {
//   // setCheckedNodes: (nodes, leafOnly)=>void  下一行设置 leafOnly, 所以 数据 1-1 没有被勾选。
//   treeRef.value.setCheckedNodes([{ id: "1-1" }, { id: "2-1" }, { id: "3-1" }], true);
// }
function check(data, currentChecked) {
  console.log("check 事件：", data, currentChecked);
}
function checkChange(data, checked, indeterminate) {
  console.log("checkChange 事件：", data, checked, indeterminate);
}

const submitClick = async () => {
  // 表单验证
  if (!createData.value.id || !createData.value.name || !createData.value.protocol || !createData.value.endpoint) {
    alert('请填写完整信息');
    return;
  }
  
  // 获取选中的点位
  // const checkedKeys = treeRef.value.getCheckedKeys();
  // if (checkedKeys.length === 0) {
  //   alert('请至少选择一个点位');
  //   return;
  // }
  
  try {
    // 准备提交数据
    const submitData = { ...createData.value};
    
    // 这里可以添加API调用
    const res = await api.createPlc(submitData);
    alert('提交成功');
    // 触发父组件刷新
    emit('refresh');
    
    // 关闭对话框
    visible.value = false;
  } catch (error) {
    console.error('提交失败:', error);
    alert('提交失败，请重试');
  }
}
</script>
<style>
.btn {
  width: 4rem;
  height: 1.9rem;
  color: #ffffff;
  text-align: center;
  background: rgb(var(--primary_btn));
  line-height: 1.8rem;
  cursor: pointer;
}
.delete_btn {
  background: rgb(var(--delete));
}
@media (min-width: 1024px) {
  .about {
    display: flex;
    align-items: center;
  }
}
</style>
