<template>
  <div style="width: 100%;;display: flex;">
    <div style="width: 15%;;background-color: #F2F6FC;">
      <div style="display: flex;padding-top: 1%;padding-top: 5%;">
        <el-input
          v-model="input2"
          style="width:60%;margin-left: 5%;background-color: #ebeef5;"
          class="w-50 m-2"
          :prefix-icon="Search" 
        />
        <!-- <el-button style="margin-left: 2%;width: 10%;background-color: #F7F7F7" :icon="Filter"/> -->
        <el-button type="primary" @click="showAdd" style="margin-left: 5%;width: 10%;" :icon="Plus"/>
      </div>
      <!-- <Plus style="width: 1em; height: 1em; margin-left:90%;cursor: pointer;color: #337ecc;" @click="showAddTree"/> -->
      <el-tree class="treeLeft" :data="data" @node-click="handleNodeClick" node-key="id" style="margin-left: 5%;margin-top: 5%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon v-if="data.children"><Folder /></el-icon>
              <div v-if="!data.children">
                <el-tag v-if="data.label=='父级2'" class="ml-2" type="success">GET</el-tag>
                <el-tag v-if="data.label=='父级1'" class="ml-2">PUT</el-tag>
                <!-- <el-tag class="ml-2" type="warning">POST</el-tag>
                <el-tag class="ml-2" type="danger">DEL</el-tag> -->
              </div>
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
    </div>
    <div style="width: 84%;margin-left: 1%;" class="tab-container">
        <el-tabs style="" v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
            <el-tab-pane label="查看" name="first" style="">
              <div style="height: 80vh;overflow: auto;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div style="margin-left:1%;">修改数据项分类管理</div>
                    <div style="display: flex;">
                        <el-button type="primary" size="mini" :icon="Promotion">运行</el-button>
                        <el-button type="" size="mini">删除</el-button>
                    </div>
                </div>
                <div style="display: flex;align-items: center;margin-left:1%;margin-top: 1%;">
                    <el-tag type="primary" size="mini">PUT</el-tag>
                    <div style="margin-left: 0.5%;">
                        /data/cate
                    </div>
                    <div style="margin-left: 0.5%;">
                        <el-select class="transparent-select" v-model="valueSta" style="border-color: transparent;width: 100px;">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                            <div class="flex items-center" style="display: flex;align-items: center;">
                                <div v-if="item.label=='开发中'" style="width: 5px; height: 5px; background-color: #409EFF; border-radius: 50%;"></div>
                                <div v-if="item.label=='运行中'" style="width: 5px; height: 5px; background-color: #67C23A; border-radius: 50%;"></div>
                                <span style="margin-left:1%;">{{ item.label }}</span>
                            </div>
                            </el-option>
                            <template #prefix>
                                <div class="flex items-center" style="display: flex; align-items: center;">
                                    <div v-if="valueSta && options.find(opt => opt.value === valueSta)?.label === '开发中'" 
                                        style="width: 5px; height: 5px; background-color: #409EFF; border-radius: 50%; margin-right: 4px;"></div>
                                    <div v-if="valueSta && options.find(opt => opt.value === valueSta)?.label === '运行中'" 
                                        style="width: 5px; height: 5px; background-color: #67C23A; border-radius: 50%; margin-right: 4px;"></div>
                                    <span>{{ valueSta ? options.find(opt => opt.value === valueSta)?.label : '请选择' }}</span>
                                </div>
                            </template>
                        </el-select>
                    </div>
                </div>
                <div style="display: flex;width: 100%;">
                    <div style="display: flex;margin-left: 1%;font-size: 15px;color:#909399;width:100% ;">
                        <div>
                            服务分类:
                        </div>
                        <div style="margin-left: 0.5%;">
                            2025年7月25日
                        </div>
                        <div style="margin-left: 5%;">
                            服务名称:
                        </div>
                        <div style="margin-left: 0.5%;">
                            2025年7月25日
                        </div>
                        <div style="margin-left: 5%;">
                            接口地址:
                        </div>
                        <div style="margin-left: 0.5%;">
                            几秒前
                        </div>
                        <div style="margin-left: 5%;">
                            请求方式:
                        </div>
                        <div style="margin-left: 0.5%;">
                            秦素衣
                        </div>
                        <div style="margin-left: 5%;">
                            接口格式:
                        </div>
                        <div style="margin-left: 0.5%;">
                            朱得糠
                        </div>
                        <div style="margin-left: 5%;">
                            返回格式:
                        </div>
                        <div style="margin-left: 0.5%;">
                            数据项分类
                        </div>
                        
                        
                    </div>
                </div>
                <div style="margin-left: 1%;font-size: 15px;color:#909399;width:100%;display: flex;margin-top: 0.5%;">
                    <div style="margin-left: 0%;">
                        服务说明:
                    </div>
                    <div style="margin-left: 0.5%;">
                        数据项分类
                    </div>
                </div>
                <div style="margin-left: 1%;font-size: 15px;color:#909399;width:100%;display: flex;margin-top: 0.5%;">
                    <div style="margin-left: 0%;">
                        返回说明:
                    </div>
                    <div style="margin-left: 0.5%;">
                        数据项分类
                    </div>
                </div>
                <div style="margin-top: 2.5%;margin-left: 1%;">
                    <div>请求参数</div>
                    <el-table 
                      style="margin-top: 1%;"
                      :data="tableDataCan" 
                      :cell-style="{ textAlign: 'center', }"
                      :header-cell-style="{ textAlign: 'center'}"
                      :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                      border >
                          <el-table-column prop="itemName" label="参数字段">
                          </el-table-column>
                          <el-table-column prop="itemName" label="参数名称">
                          </el-table-column>
                          <el-table-column prop="itemName" label="参数类型" width="100">
                          </el-table-column>
                          <el-table-column prop="itemName" label="参数说明">
                          </el-table-column>
                      </el-table>
                </div>
                <div style="margin-top: 2.5%;margin-left: 1%;">
                    <div>返回响应</div>
                    <el-tabs type="card" style="margin-top: 1%;">
                        <el-tab-pane label="成功（200）">
                            <div style="display: flex;align-items: center;line-height: 1.5;font-size: 14px;margin-left: 1%;color: #606266;">
                                <div>HTTP状态码：</div>
                                <div>200</div>
                                <div style="margin-left: 5%;">内容格式：</div>
                                <div>JSON</div>
                            </div>
                            <el-tree  :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 1%;margin-left: 2%;background-color: #F7F7F7;background-color: transparent;width: 15%;" default-expand-all>
                                <template #default="{ node, data }">
                                    <span style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
                                        <span>{{ node.label }}</span>
                                        <span style="display: flex;align-items: center;">
                                            <div style="color:#67C23A;">string</div>
                                            <el-tooltip
                                                class="box-item"
                                                effect="light"
                                                content="必填"
                                                placement="top-start"
                                            >
                                                <el-button style="transform: scale(0.5);transform-origin: center;margin-left: 5%; " type="success" :icon="Check" circle size="mini" plain/>
                                            </el-tooltip>
                                        </span>
                                    </span>
                                </template>
                            </el-tree>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="margin-top: 2.5%;margin-left: 1%;padding-bottom: 1%;">
                    <div>响应示例</div><el-tabs type="card" style="margin-top: 1%;">
                        <el-tab-pane label="成功示例">
                             <div style="overflow: auto;height: 50vh">
                                <json-viewer 
                                    :value="data" 
                                    :expand-depth="5" 
                                    copyable 
                                    theme="my-theme"
                                />
                             </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            
              </div>
            </el-tab-pane>
            <el-tab-pane label="修改" name="second" style="">
                <div style="overflow: auto;height: 80vh;">
                    <el-form size="mini" :key="tableKey" style="margin-left: 0%;width: 98%;"  :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
                        <el-form-item label="接口地址:" prop="enname" style=""> 
                          <div style="display: flex;width: 100%;">
                            <el-input
                            v-model="input3"
                            style="width: 70%;"
                            placeholder=""
                            class="input-with-select"
                            >
                            <template #prepend>
                                <el-select v-model="select" placeholder="" style="width: 115px">
                                    <el-option label="http://" value="1" />
                                    <el-option label="https://" value="2" />
                                </el-select>
                            </template>
                          </el-input>
                          <el-button type="primary" @click="showAdd" style="margin-left: 20%;">提交</el-button>
                          <el-button type="danger" @click="showAdd" style="margin-left: 1%;">删除</el-button>
                          </div>
                  </el-form-item>
                      <el-row :gutter="48">
                            <el-col :span="12">
                                <el-form-item label="服务分类:" prop="name" style="">
                                    <el-select
                                    v-model="formJi.type"
                                    :disabled="isEdit"
                                        style="width: 100%;margin-left: 0%;"
                                    >
                                        <el-option
                                        v-for="item in optionsType"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="服务名称:" prop="version" style="">
                                    <el-input v-model="formJi.version" :disabled="isEdit"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="48">
                            <el-col :span="12">
                                <el-form-item label="接口格式:" prop="name" style="">
                                    <el-select
                                    v-model="formJi.type"
                                    :disabled="isEdit"
                                        style="width: 100%;margin-left: 0%;"
                                    >
                                        <el-option
                                        v-for="item in optionsType"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="请求方式:" prop="version" style="">
                                    <el-select
                                        v-model="formJi.type"
                                        :disabled="isEdit"
                                        style="width: 100%;margin-left: 0%;"
                                    >
                                        <el-option
                                        v-for="item in optionsType"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="返回格式:" prop="version" style="">
                            <el-input v-model="formJi.version" :disabled="isEdit"/>
                        </el-form-item>
                        <el-form-item label="组件简介:">
                            <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
                        </el-form-item>
                        <el-form-item label="组件简介:">
                            <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
                        </el-form-item>
                    </el-form>
                    <div style="margin-top: 2%;">
                        <div>
                            请求参数
                        </div>
                        <div style="display: flex;justify-content: flex-end;margin-right: 2%;">
                          <el-button  @click="addPa" style="margin-top: 1%;" type="success" size="mini" plain>新增参数</el-button>
                        </div>
                        <div>
                            <el-table 
                            style="margin-top: 1%;width: 98%;"
                            :data="tableDataCan" 
                            :cell-style="{ textAlign: 'center', }"
                            :header-cell-style="{ textAlign: 'center'}"
                            :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                            border >
                                <el-table-column prop="itemName" label="参数字段">
                                    <template #default="scope">
                                        <div style="width: 100%;">
                                            <el-input type="primary"  v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;border: transparent;"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="itemName" label="参数名称">
                                    <template #default="scope">
                                        <div style="width: 100%;">
                                            <el-input type="primary" v-model="scope.row.itemName" 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" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="itemName" label="参数说明" width="100">
                                    <template #default="scope">
                                        <div style="width: 100%;">
                                            <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="操作" width="222">
                                    <template #default="scope">
                                        <div style="width: 100%;">
                                            <el-button type="danger" @click="delCan(scope.row)" size="mini" text style="margin-left: 0%;">删除</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            
                        </div>
                    </div>
                    <div style="margin-top: 2%;">
                        <div>返回响应</div>
                        <el-tabs type="card" style="margin-top: 1%;">
                            <el-tab-pane label="成功">
                                <div style="display: flex;align-items: center;line-height: 1.5;font-size: 14px;margin-left: 1%;color: #606266;">
                                </div>
                                <div style="display: flex; flex-direction: column;">
                                    <!-- <el-tree  :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 1%;margin-left: 2%;background-color: #F7F7F7;background-color: transparent;width: 15%;" default-expand-all>
                                        <template #default="{ node, data }">
                                            <span style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
                                                <span><el-input v-model="node.label" size="mini"/></span>
                                                <span style="display: flex;align-items: center;">
                                                    <el-tooltip
                                                        class="box-item"
                                                        effect="light"
                                                        content="是否必填"
                                                        placement="top-start"
                                                    >
                                                    <el-checkbox v-model="checked1" label="" size="large" />
                                                    </el-tooltip>
                                                    <el-select
                                                        v-model="formJi.type"
                                                        :disabled="isEdit"
                                                        style="width: 100%;margin-left: -1%;"
                                                    >
                                                        <el-option
                                                        v-for="item in optionsType"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                        />
                                                    </el-select>
                                                    <el-tooltip
                                                        class="box-item"
                                                        effect="light"
                                                        content="是否允许null"
                                                        placement="top-start"
                                                    >
                                                    <el-checkbox v-model="checked1" label="" size="large" />
                                                    </el-tooltip>
                                                </span>
                                            </span>
                                        </template>
                                    </el-tree> -->
                                    <el-input :rows="8" type="textarea" v-model="titleTree" size="mini" text style="margin-left: 1%;width: 98%;" ></el-input>
                                  </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div style="margin-top: 2.5%;margin-left: 1%;padding-bottom: 1%;">
                    <el-tabs type="card" style="margin-top: 1%;">
                        <el-tab-pane label="成功示例">
                             <div style="overflow: auto;height: 20vh;">
                              <JsonEditorVue
                                v-model="msgSu"
                                style="height:100%;"
                                :mode="'code'"
                                :showBtns="false"
                                :options="{
                                  navigationBar: false, // 隐藏顶部导航栏
                                  statusBar: false,     // 隐藏底部状态栏
                                  mode: 'code',          // 仅保留代码编辑模式
                                  mainMenuBar: false     // 隐藏主菜单栏
                                }"
                                lang="zh"
                              />
                             </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog @close="clearFromTree" :title="titleTree" v-model="dialogVisible" title="" width="70%" destroy-on-close :key="tableKey">
          <div style="overflow: auto;height: 80vh;">
              <el-form size="mini" :key="tableKey" style="margin-left: 0%;width: 98%;"  :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
                  <el-row :gutter="48">
                      <el-col :span="12">
                          <el-form-item label="服务分类:" prop="name" style="">
                              <el-select
                              v-model="formJi.type"
                              :disabled="isEdit"
                                  style="width: 100%;margin-left: 0%;"
                              >
                                  <el-option
                                  v-for="item in optionsType"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  />
                              </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="服务名称:" prop="version" style="">
                              <el-input v-model="formJi.version" :disabled="isEdit"/>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-form-item label="接口地址:" prop="enname" style=""> 
                          <el-input
                          v-model="input3"
                          placeholder=""
                          class="input-with-select"
                          >
                          <template #prepend>
                              <el-select v-model="select" placeholder="" style="width: 115px">
                                  <el-option label="http://" value="1" />
                                  <el-option label="https://" value="2" />
                              </el-select>
                          </template>
                      </el-input>
                  </el-form-item>
                  <el-row :gutter="48">
                      <el-col :span="12">
                          <el-form-item label="接口格式:" prop="name" style="">
                              <el-select
                              v-model="formJi.type"
                              :disabled="isEdit"
                                  style="width: 100%;margin-left: 0%;"
                              >
                                  <el-option
                                  v-for="item in optionsType"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  />
                              </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="请求方式:" prop="version" style="">
                              <el-select
                                  v-model="formJi.type"
                                  :disabled="isEdit"
                                  style="width: 100%;margin-left: 0%;"
                              >
                                  <el-option
                                  v-for="item in optionsType"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  />
                              </el-select>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-form-item label="返回格式:" prop="version" style="">
                      <el-input v-model="formJi.version" :disabled="isEdit"/>
                  </el-form-item>
                  <el-form-item label="组件简介:">
                      <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
                  </el-form-item>
                  <el-form-item label="组件简介:">
                      <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
                  </el-form-item>
              </el-form>
              <div style="margin-top: 2%;">
                  <div>
                      请求参数
                  </div>
                  <div>
                      <el-table 
                      style="margin-top: 1%;"
                      :data="tableDataCan" 
                      :cell-style="{ textAlign: 'center', }"
                      :header-cell-style="{ textAlign: 'center'}"
                      :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                      border >
                          <el-table-column prop="itemName" label="参数字段">
                              <template #default="scope">
                                  <div style="width: 100%;">
                                      <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;border: transparent;"></el-input>
                                  </div>
                              </template>
                          </el-table-column>
                          <el-table-column prop="itemName" label="参数名称">
                              <template #default="scope">
                                  <div style="width: 100%;">
                                      <el-input type="primary" v-model="scope.row.itemName" 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" v-model="scope.row.itemName" 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" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
                                  </div>
                              </template>
                          </el-table-column>
                          <el-table-column prop="address" label="操作" width="222">
                              <template #default="scope">
                                  <div style="width: 100%;">
                                      <el-button type="danger" @click="delCan(scope.row)" size="mini" text style="margin-left: 0%;">删除</el-button>
                                  </div>
                              </template>
                          </el-table-column>
                      </el-table>
                      
                  </div>
              </div>
              <div style="margin-top: 2%;">
                  <div>返回响应</div>
                  <el-tabs type="card" style="margin-top:0%;">
                      <el-tab-pane label="成功">
                          <div style="">
                              <!-- <el-tree  :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 1%;margin-left: 2%;background-color: #F7F7F7;background-color: transparent;width: 15%;" default-expand-all>
                                  <template #default="{ node, data }">
                                      <span style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
                                          <span><el-input v-model="node.label" size="mini"/></span>
                                          <span style="display: flex;align-items: center;">
                                              <el-tooltip
                                                  class="box-item"
                                                  effect="light"
                                                  content="是否必填"
                                                  placement="top-start"
                                              >
                                              <el-checkbox v-model="checked1" label="" size="large" />
                                              </el-tooltip>
                                              <el-select
                                                  v-model="formJi.type"
                                                  :disabled="isEdit"
                                                  style="width: 100%;margin-left: -1%;"
                                              >
                                                  <el-option
                                                  v-for="item in optionsType"
                                                  :key="item.value"
                                                  :label="item.label"
                                                  :value="item.value"
                                                  />
                                              </el-select>
                                              <el-tooltip
                                                  class="box-item"
                                                  effect="light"
                                                  content="是否允许null"
                                                  placement="top-start"
                                              >
                                              <el-checkbox v-model="checked1" label="" size="large" />
                                              </el-tooltip>
                                          </span>
                                      </span>
                                  </template>
                              </el-tree> -->
                              <el-input :rows="8" type="textarea" v-model="titleTree" size="mini" text style="margin-left: 0%;width: 100%;" ></el-input>
                            </div>
                      </el-tab-pane>
                  </el-tabs>
              </div>
              <div style="margin-top: 2.5%;margin-left: 1%;padding-bottom: 1%;">
              <el-tabs type="card" style="margin-top: 1%;">
                  <el-tab-pane label="成功示例">
                        <div style="overflow: auto;height: 20vh;">
                        <JsonEditorVue
                          v-model="msgSu"
                          style="height:100%;"
                          :mode="'code'"
                          :showBtns="false"
                          :options="{
                            navigationBar: false, // 隐藏顶部导航栏
                            statusBar: false,     // 隐藏底部状态栏
                            mode: 'code',          // 仅保留代码编辑模式
                            mainMenuBar: false     // 隐藏主菜单栏
                          }"
                          lang="zh"
                        />
                        </div>
                  </el-tab-pane>
              </el-tabs>
          </div>
                </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button size="mini" @click="dialogVisible = false">取消</el-button>
              <el-button v-if="isAdd" type="primary" @click="addTree" size="mini">
                提交
              </el-button>
              <el-button v-if="!isAdd" type="primary" @click="saveEditTree" size="mini">
                提交
              </el-button>
            </span>
          </template>
        </el-dialog>
    </div>
  </div>
</template>
<script   setup>
import { Plus,Search,Filter,Promotion,Check  } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { addDataCate,getCateTree,getCateDe,editCate,delCate,addDataItem,getItem,getItemDe,editItem,delItem} from "@/api/service/cate";
import { ref, onMounted, onUnmounted, nextTick,onBeforeMount } from 'vue';
import JsonViewer from 'vue-json-viewer'
import 'vue-json-viewer/style.css' 
import  JsonEditorVue from 'json-editor-vue3'

const { proxy } = getCurrentInstance();
const treeData =  ref(
    {label:'上海市城区洪涝仿真模型'}, 
    {label:'上海沿海风暴潮预报模型'},
    {label:'黄浦江水系水文分析预报数值模拟'},
    {label:'苏州河水系水情预报模型'},
    {label:'内涝风险实时预警与预报'},
    {label:'上海市中心城区排水系统模型'},
    {label:'温带风暴潮预报模型等专业模型的标准化改造'},
)
const msgSu= ref({
  "msg":"操作成功",
  "code":200
})
const options =  ref([
    {label:'开发中',
    value:'1'
    },
    {label:'运行中',
    value:'2'
    },
])
const tableDataCan = ref([
    {itemName:'1'}
])
const data =  ref([])
const select =  ref('1')
const activeName =  ref('first')
const title =  ref([])
const titleTree =  ref([])
const currentPage =  ref(1)
const total =  ref(1)
const tableData = ref([])
const tableheight = window.innerHeight*0.7
const heightAll = window.innerHeight
const dialogVisible = ref(false)
const dialogVisibleTree = ref(false)
const isAdd = ref(false)
const isAddTa = ref(false)
const treeId = ref('');
const valueSta = ref('1');
const formZu = ref({
  itemName:'',
  itemTp:'',
  itemEn:'',
  itemTp:'',
  itemDataTp:'',
  itemDefaultVal:'',
  itemUnit:'',
  itemNotes:'',
});
const formJi = ref({
  name:'',
  version:'',
  enname:'',
  devlang:'',
  intro:'',
  type:''
});
const rulesJi = reactive({
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  version: [{ required: true, message: '必填', trigger: 'blur' }],
  enname: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefJi = ref();
const rulesZu = reactive({
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
  itemEn: [{ required: true, message: '必填', trigger: 'blur' }],
  itemTp: [{ required: true, message: '必填', trigger: 'blur' }],
  itemDataTp: [{ required: true, message: '必填', trigger: 'blur' }],
  itemDefaultVal: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefZu = ref();

const formTree = ref({
  itemName:'',
  catePid:'',
  itemNo:'',
  itemNotes:''
});
const rulesTree = reactive({
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
  catePid: [{ required: true, message: '必填', trigger: 'blur' }],
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefTree = ref();

function addPa(){
    var par = {
        itemName:''
    }
    tableDataCan.value.push(par)
}
function delCan(row){

}
function clearForm(){
  formZu.value = {
    itemName:'',
    itemTp:'',
    itemEn:'',
    itemTp:'',
    itemDataTp:'',
    itemDefaultVal:'',
    itemUnit:'',
    itemNotes:'',
  }
}
function getTable(){
  var par = {
    pageNum:currentPage.value,
    pageSize:15,
    cateId:''
  }
  getItem(par).then(res=>{
    tableData.value = res.rows
    total.value = res.total
  })
}
function showAdd(){
  title.value = '新增'
  dialogVisible.value = true
}
function showEdit(row){
  isAddTa.value = false
  title.value = '编辑'
  dialogVisible.value = true
  getItemDe(row.dataId).then(res=>{
    formZu.value = res.data
  })
}
function showAddTree(){
  isAdd.value = true
  titleTree.value = '新增节点'
  dialogVisibleTree.value = true
}
function clearFromTree(){
  formTree.value = {
    itemName:'',
    catePid:'',
    itemNo:'',
    itemNotes:''
  }
}
function getTree(){
  getCateTree().then(res=>{
    data.value = res.data
  })
}
function addTa(){
  formRefZu.value.validate(async (valid) => {
    await addDataItem(formZu.value).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess("新增成功");
        getTable()
        dialogVisible.value = false
      }
    })
  });
}
function saveEditTa(){
  editItem(formZu.value).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("修改成功");
      dialogVisible.value = false
      getTable()
    }
  })
}
function delRow(row) {
  proxy.$modal.confirm('是否确认删除？').then(function () {
    return delItem(row.dataId);
  }).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){
  console.log(data)
}
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(.el-tree-node) {
  margin-bottom:5px !important; /* 增大节点间距 */
}
.el-popover.custom-popover {
  min-width: 50px;
  padding: 8px; /* 可选：调整内边距 */
}
</style>
<style>
.dot {
  width: 20px;          /* 控制圆点直径 */
  height: 20px;
  background-color: #333; /* 实心颜色 */
  border-radius: 50%;    /* 关键属性 */
  display: inline-block; /* 确保与其他元素并排 */
}
/* 全局透明样式（不使用 scoped） */
.transparent-select .el-select__wrapper {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.transparent-select .el-select__selection {
  background-color: transparent;
}

/* 处理悬停和聚焦状态 */
.transparent-select .el-select__wrapper:hover,
.transparent-select .el-select__wrapper.is-focused {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 下拉箭头图标 */
.transparent-select .el-select__caret {
  color: rgba(0, 0, 0, 0.5); /* 半透明图标 */
}
</style>
<style scoped>
:deep(.treeLeft) .el-tree-node__content {
  padding-top: 10px;
}
:deep(.treeLeft) .el-tree-node__content:hover {
  background-color: rgb(243，243，245);
}
:deep(.treeLeft) .el-tree-node__content:active {
    background-color: rgka(69,157,255,0.1) !important;
    transform: scale(0.98); /* 轻微缩放增强按压感 */
  }

  /* 选中态（Active） */
:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
    background-color: rgb(237,237，239) !important;
  }

.tab-container {
  height: 100vh; /* 关键：父容器明确高度 */
  display: flex;
  flex-direction: column;
}
.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">

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