<template>
  <div style="width: 99%;display: flex;margin-left: 1%;background-color:#F5F8F9;;">
    <el-card style="width: 18%;height: 100%;overflow: auto;height: 85vh;background-color: white;overflow-x: hidden;" shadow="never">
      <template #header>
      <div class="card-header" style="display: flex;align-items: center;justify-content: space-between;">
        <span>数据集：</span>
      </div>
    </template>
      <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" 
      :data="data" @node-click="handleNodeClick" node-key="id" style="margin-left: -10%;margin-top: 0%;width: 120%;background-color: transparent;" default-expand-all :key="valueKet">
          <template #default="{ node, data }">
            <span  style="justify-content: space-between;display: flex;width: 30%;align-items: center;margin-left: 1%;">
              <div class="custom-tree-node" style="align-items: center;line-height: 1.5;">
                <svg-icon icon-class="model"  v-if="data.nodeType=='SET'"/>
                <svg-icon icon-class="model2"  v-if="data.nodeType=='TREE'"/>
                <span style="font-size: 1rem;">{{ node.label }}</span>
              </div>
              <div style="margin-right: 1%;position: absolute;left:90%;">
                <el-dropdown trigger="hover" @click.stop v-if="currentNodeKey === data.id">
                    <!-- <el-icon class="el-icon--right" style="color: black;">
                      <plus />
                    </el-icon> -->
                    <svg-icon icon-class="zhankai"/>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item style="display: flex;" @click="add1Level">
                        <el-icon class="el-icon--right" style="color: black;">
                          <CirclePlus />
                        </el-icon>
                        <div>
                          添加同级
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item style="display: flex;"  @click="addNextLevel">
                        <el-icon class="el-icon--right" style="color: black;">
                          <Connection />
                        </el-icon>
                        <div>
                          新建下级
                        </div>
                      </el-dropdown-item>
                      <divider/>
                      <el-dropdown-item style="display: flex;"  @click="delAll" divided>
                        <el-icon class="el-icon--right" style="color: black;">
                          <CircleClose />
                        </el-icon>
                        <div>
                          删除节点
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </span>
          </template>
        </el-tree>
    </el-card>
    <div style="width: 80%;margin-left: 1%;background-color: white;">
        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;margin-left: 0%;padding: 1%;">
            <div style="display: flex;width: 50%;align-items: center;">
                <div>
                    名称
                </div>
                <el-input size="mini" v-model="dcName" style="width: 30%;margin-left: 1%;"/>
                <el-button type="primary" @click="getTable" size="mini" style="margin-left:1%;">查询</el-button>
            </div>
            <el-button type="primary" @click="showAdd" size="mini" style="margin-left:1%;" :disabled="!parTree">新增</el-button>
        </div>
      <el-table 
        :data="tableData" 
        style="width: 99%;margin-left: 1%;margin-top: 0.5%;"
        :cell-style="{ padding:'5px' }"
        :header-cell-style="{height: heightAll*0.01+'px',}"
        :row-style="{ fontSize: '16px',textAlign:'center'}"
        border 
        :height="tableheight">
        <el-table-column prop="address" label="操作" width="250">
            <template #default="scope">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-button type="primary" @click="showPei(scope.row)" size="mini" text style="margin-left: 0%;">数据项配置</el-button>
                    <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left:0%;">编辑</el-button>
                    <el-button @click="delRow(scope.row)" type="danger" text size="mini" style="margin-left: 0%;">删除</el-button>
                </div>
            </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin-top: 0.5%;margin-right: 1%;">
          <!-- <el-pagination
            small
            v-model='currentPage'
            @current-change="changePage"
            background
            layout="prev, pager, next"
            :total="total"
            class="mt-4"
          /> -->
        </div>
    </div>
  </div>
  <el-dialog :title="title" @close="clearForm" v-model="dialogVisible" title="" width="30%"  destroy-on-close :key="tableKey">
    <el-form :label-width="140" label-position="right" :disabled="isEdit" style="margin-left: 5%;margin-top: 2%;"  :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
      <el-form-item label="数据集中文名:" prop="dcName" style="">
        <el-input v-model="formZu.dcName" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="数据集说明:" prop="dcNote" style="">
        <el-input v-model="formZu.dcNote" style="width: 75%;" placeholder="" type="textarea" :row="2" resize="none"/>
      </el-form-item>
      <el-form-item label="数据集类型:" prop="dcType" style="">
        <el-input v-model="formZu.dcType" style="width: 75%;" placeholder="" type="" :row="2" resize="none"/>
      </el-form-item>
      <el-form-item label="排序:" prop="dcSort">
        <el-input-number v-model="formZu.dcSort" :min="1" style="width: 50%;"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button v-if="isAddTa" type="primary" @click="addTa" size="mini">
          提交
        </el-button>
        <el-button v-if="!isAddTa" type="primary" @click="saveEditTa" size="mini">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog @close=""  v-model="dialogVisibleTree" title="配置管理" width="50%" destroy-on-close :key="tableKey">
    <div style="margin-top: 2%;">
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <div style="display: flex;justify-content: flex-end;width: 100%;margin-right: 2%;">
          <el-button  @click="addCanAdd" style="margin-top: 0%;" type="success" size="mini" plain>新增参数</el-button>
        </div>
      </div>
      <div>
          <el-table 
          style="margin-top: 1%;width: 98%;"
          :data="tableDataCanAdd" 
          :cell-style="{ textAlign: 'center',padding:'2px 0' }"
          :header-cell-style="{ textAlign: 'center'}"
          :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
          border >
              <el-table-column prop="itemName" label="字段编码" width="200">
                  <template #default="scope">
                      <el-input placeholder="(必填)" type="primary" class="noBor" v-model="scope.row.fieldCode" size="mini" text style="margin-left: 0%;"></el-input>
                  </template>
              </el-table-column>
              <el-table-column prop="itemName" label="字段名称">
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-input placeholder="" type="primary" class="noBor" v-model="scope.row.fieldName" size="mini" text style="margin-left: 0%;"></el-input>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="itemName" label="字段类型">
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-input placeholder="" type="primary" class="noBor" v-model="scope.row.metaType" size="mini" text style="margin-left: 0%;"></el-input>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="itemName" label="长度" >
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-input type="primary" class="noBor" v-model="scope.row.fieldLength" size="mini" text style="margin-left: 0%;"></el-input>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="itemName" label="默认值" >
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-input type="primary" class="noBor" v-model="scope.row.fieldDefault" size="mini" text style="margin-left: 0%;"></el-input>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="itemName" label="说明" >
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-input type="primary" class="noBor" v-model="scope.row.fieldDesc" size="mini" text style="margin-left: 0%;"></el-input>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="itemName" label="主键" width="80">
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-checkbox v-model="scope.row.fieldIspri" label="" size="large" />
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" width="100">
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-button type="danger" @click="delCanAdd(scope.$index)" size="mini" text style="margin-left: 0%;">删除</el-button>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          
      </div>
  </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleTree = false">取消</el-button>
        <el-button type="primary" @click="addPei" size="mini">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog @close="clearForm" v-model="dialogVisibleData" title="新增数据项" width="30%"  destroy-on-close :key="tableKey">
    <el-form :label-width="100" label-position="right" :disabled="isEdit" style="margin-left: 5%;margin-top: 2%;"  :model="formTree" class="demo-form-inline" ref="formRefTree" :rules="rulesTree">
      <el-form-item label="名称:" prop="itemName" style="">
        <el-input v-model="formTree.itemName" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="说明:" prop="itemNotes">
        <el-input v-model="formTree.itemNotes" style="width: 75%;" placeholder=""  resize="none"/>
      </el-form-item>
      <el-form-item label="排序:" prop="itemNo">
        <el-input-number v-model="formTree.itemNo" :min="1" style="width: 50%;"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleData = false">取消</el-button>
        <el-button type="primary" @click="addataXiang" size="mini">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script   setup>
import { reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { cateTree,addCate,delCate,fieldAll,addSet,dataSetList,editSet,fieldAdd,delField,delSet  } from "@/api/register/regCom.js";
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
const { proxy } = getCurrentInstance();
const data =  ref([])
const title =  ref([])
const titleTree =  ref([]) 
const dialogVisibleData = ref(false)
const currentPage =  ref(1)
const total =  ref(1)
const tableData = ref([])
const tableheight = window.innerHeight*0.78
const heightAll = window.innerHeight
const dialogVisible = ref(false)
const dialogVisibleTree = ref(false)
const isAdd = ref(false)
const isAddTa = ref(false)
const treeId = ref('');
const dcName =ref()
const parDel = ref({})
const parTree = ref({})
const formZu = ref({
  cateId:'',
  dcName:'',
  dcType:'',
  dcSort:1,
  dcNote:''
});
const currentNodeKey = ref('')
const rulesZu = reactive({
  dcName: [{ required: true, message: '必填', trigger: 'blur' }], 
  dcType: [{ required: true, message: '必填', trigger: 'blur' }],
  dcSort: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefZu = ref();
const tableDataCanAdd = ref([])
const formTree = ref({
  itemName:'',
  itemNo:'',
  itemNotes:'',
});
const parMeta = ref({})
const rulesTree = reactive({
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }]
});
const formRefTree = ref();
const parDscode = ref('')
const parLev = ref(1)

function delAll(){
    proxy.$modal.confirm('是否确认删除？').then(function () {
        return delCate(parTree.value.id);
    }).then(() => {
        getTree();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
}
function addataXiang(){
    if(parLev.value===1){
        formTree.value.catePid = parTree.value.pid
    }
    else{
        formTree.value.catePid = parTree.value.id
    }
    addCate(formTree.value).then(res=>{
        if(res.code===200){
            proxy.$modal.msgSuccess("修改成功");
            getTree()
            dialogVisibleData.value = false
        }
    })
}
function add1Level(){
    parLev.value = 1
    dialogVisibleData.value = true
}
function addNextLevel(){
    parLev.value = 2
    dialogVisibleData.value = true
}
function addPei(){
tableDataCanAdd.value.forEach((item, index, array)=>{
    if(item.fieldIspri===true){
      item.fieldIspri = '1'
    }
    if(item.fieldIspri===false){
      item.fieldIspri = '2'
    }
    if(!item.fieldCode){
      array.splice(index, 1)
    }
  })
  if(tableDataCanAdd.value.length===0){
    var par = {
      dcCode:currentNodeKey.value,
      metaTable:parMeta.value.metaTable,
      fieldCode:parDel.value.fieldCode
    }
    delField(par).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess("修改成功");
        getTable()
        dialogVisibleTree.value = false
      }
    })
  }
  else{
    fieldAdd(tableDataCanAdd.value).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess("修改成功");
        getTable()
        dialogVisibleTree.value = false
      }
    })
  }
  
}
function showPei(row){
  dialogVisibleTree.value = true
  parMeta.value = row
  var par = {
    dsCode:parDscode.value,
    metaTable:row.metaTable,
  }
  getMetaFiele(par).then(res=>{
    tableDataCanAdd.value = res.data
    tableDataCanAdd.value.forEach(item=>{
    if(item.fieldIspri==='1'){
      item.fieldIspri = true
    }
    if(item.fieldIspri==='2'){
      item.fieldIspri = false 
    }
  })
  })
}
function clearForm(){
  formTree.value = {
    dsTitle:'',
    dsType:'',
    dsDbname:'',
    dsIp:'',
    dsPort:'',
    dsUser:'',
    dsPass:'',
    dsNode:'',
  }
  formZu.value = {
    metaTable:'',
    dcName:'',
    metaType:'',
    metaNote:'',
    metaSort:1,
  }
  tableDataCanAdd.value = []
}
function addCanAdd(){
    var par = {
        dcCode:currentNodeKey.value,
        metaTable:parMeta.value.metaTable,
    }
    tableDataCanAdd.value.push(par)
}
function delCanAdd(index){
  if(tableDataCanAdd.value.length===1){
    parDel.value = tableDataCanAdd.value[0]
  }
  tableDataCanAdd.value.splice(index, 1)
}
function getTable(){
  var par = {
    dcCode:currentNodeKey.value,
  }
  dataSetList(par).then(res=>{
    tableData.value = res.rows
  })
}
function showAdd(){
  isAddTa.value = true
  title.value = '新增'
  dialogVisible.value = true
}
function showEdit(row){
  isAddTa.value = false
  title.value = '编辑'
  dialogVisible.value = true
  formZu.value = row
}
function showAddTree(){
  isAdd.value = true
  titleTree.value = '新增节点'
  dialogVisibleTree.value = true
}
function clearFromTree(){
  formTree.value = {
    itemName:'',
    catePid:'',
    itemNo:'',
    itemNotes:''
  }
}
function getTree(){
  cateTree().then(res=>{
    data.value = res.data
    data.value.forEach(item=>{
      item.value = item.id
      item.id = item.id
    })
  })
}
function addTa(){
  formRefZu.value.validate(async (valid) => {
      if(valid){
        formZu.value.dcCode = currentNodeKey.value
        await addSet(formZu.value).then(res=>{
        if(res.code===200){
          proxy.$modal.msgSuccess("新增成功");
          getTable()
          dialogVisible.value = false
        }
      })
    }
  }); 
}
function saveEditTa(){
  formRefZu.value.validate(async (valid) => {
      if(valid){
        editSet(formZu.value).then(res=>{
        if(res.code===200){
            proxy.$modal.msgSuccess("修改成功");
            dialogVisible.value = false
            getTable()
        }
    })
    }
  });
  
}
function delRow(row) {
  
  proxy.$modal.confirm('是否确认删除？').then(function () {
    console.log(111)
    return delSet(row.cateId);
  }).then(() => {
    getTable();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
};
async function addTree(){
  formRefTree.value.validate(async (valid) => {
    await addDataCate(formTree.value).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess("新增成功");
        getTree()
        dialogVisibleTree.value = false
      }
    })
  });
}
function saveEditTree(){
  editCate(formTree.value).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("修改成功");
      dialogVisibleTree.value = false
      getTree()
    }
  })
}
function handleNodeClick(node, data){
    currentNodeKey.value = data.data.id
    parTree.value = data.data
    getTable()
}
function delTree(node, data) {
  proxy.$modal.confirm('是否确认删除？').then(function () {
    return delCate(data.id);
  }).then(() => {
    getTree();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
};
function editTree(node, data){
  console.log(data)
  titleTree.value = '编辑'
  isAdd.value = false
  dialogVisibleTree.value = true
  getCateDe(data.id).then(res=>{
    formTree.value = res.data
  })
  console.log(node, data)
}
onMounted(() => {
//   getTree()
  // getTable()
});

</script>
<style scoped>
:deep(.svg-icon) {
  outline: none;
}
:deep(.svg-icon svg) {
  stroke: none;
}
:deep(.el-tree-node__expand-icon) {
  margin-left:5%; /* 向右推动图标 */
}
:deep(.el-table__body tr:hover > td) {
  background-color: #eaf7ff !important;
}
 :deep(.treeLeft) .el-tree-node__content {
  width: 100%;
  display: flex !important;
  height: 30px !important;
  align-items: center;
  padding-top: 0 !important;
}
:deep(.treeLeft) .el-tree-node__content:hover {
  background-color: #ecf5ff;
}
:deep(.treeLeft) .el-tree-node__content:active {
    background-color: #d9ecff !important;
  }

  /* 选中态（Active） */
:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
    background-color: #c6e2ff !important;
  }
.drag-handle {
  cursor: move;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 防止文字选中 */
:deep(.el-table__row) {
  user-select: none;
  -webkit-user-select: none;
}
</style>
<style scoped lang="scss">


.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 6px;            /* 图标与文字间距 */
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center; 
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>