<template>
    <el-dialog  title="检测脚本信息" v-model='dialogVisible' @close="close" v-bind="dialogSmall">
        <div>
        <el-form :model="formContent" ref='dialogFormRef'>
            <el-tree
                :data="data"
                :props="defaultProps"
                node-key="id"
                show-checkbox
                :default-expanded-keys="[1]"
            >
            </el-tree>
      </el-form>
      </div>
        <template #footer>
            <div >
                <el-button @click='close()'>取 消</el-button>
                <el-button type="primary" @click='save()'>保存脚本</el-button>
                <el-button type="primary" @click='save()'>脚本另存为</el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script setup lang='ts'>
import { dialogSmall } from '@/utils/elementBind'
import { ElMessage, type FormItemRule } from 'element-plus'
import { computed, reactive, type Ref, ref } from 'vue'
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'

const defaultProps = {
  children: 'children',
  label: 'label',
}
const data = [
  {
    id: 1,
    label: '比对模式检测脚本',
    children: [
      {
        id: 2,
        label: '频率',
      },
      {
        id: 3,
        label: '电压',
      },
      {
        id: 4,
        label: '电流',
      },
      {
        id: 5,
        label: '电压不平衡',
      },
      {
        id: 6,
        label: '电流不平衡',
      },
      {
        id: 7,
        label: '谐波电压',
      },
      {
        id: 8,
        label: '谐波电流',
      },
      {
        id: 9,
        label: '间谐波电压',
      },
      {
        id: 10,
        label: '间谐波电流',
      },
      {
        id: 11,
        label: '闪变',
      },
    ],
  },
]

// 定义弹出组件元信息
const dialogFormRef = ref()

  function useMetaInfo() {
    const dialogVisible = ref(false)
    const formContent = ref()
    return { dialogVisible, formContent }
  }
  
  const { dialogVisible, formContent } = useMetaInfo()
  // 清空formContent
  const resetFormContent = () => {
    formContent.value = {
        
    }
  }

  // 关闭弹窗
  const close = () => {
    dialogVisible.value = false
    // 清空dialogForm中的值
    resetFormContent()
    // 重置表单
    dialogFormRef.value?.resetFields()
    
  }
  
  // 保存数据
  const save = () => {
    
}


// 打开弹窗，可能是新增，也可能是编辑
const open = (currentMode: string) => {
    // 重置表单
    dialogFormRef.value?.resetFields()
    dialogVisible.value = true
}
  
// 对外映射
defineExpose({ open })


</script>