<template>
  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;display: flex;" :style="{'height':heightAll+'px'}">
    <div style="width: 20%;background-color: white;margin-left: 1%;" :style="{'height':heightAll+'px'}">
      <div style="padding-top: 5%;text-align: center;">
        <el-select
          v-model="value"
          class="m-2"
          placeholder="技术模型说明"
          style="width: 90%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-tree :data="treeData" @node-click="showNode" node-key="id" style="margin-left: 1%;margin-top: 5%;" default-expand-all>
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon v-if="node.data.label === '前言'"><House /></el-icon>
              <el-icon v-if="node.data.label === '模型搭建'"><User /></el-icon>
              <el-icon v-if="node.data.label === '模型设计'"><FolderOpened /></el-icon>
              <el-icon v-if="node.data.label === '参数说明'"><FolderOpened /></el-icon>
              <el-icon v-if="node.data.label === '参数配置'"><FolderOpened /></el-icon>
              <el-icon v-if="node.data.label === '模拟计算方案'"><Tools /></el-icon>
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <div style="width: 77%;background-color: white;margin-left: 1%;" :style="{'height':heightAll+'px'}">
      <div style="margin-top: 1.5%;margin-left: 1%;font-weight: bold;color: #337ecc;">一维水动力模型接口说明:</div>
      <div style="display: flex;margin-top: 2%;align-items: center;margin-left: 1%">
        <div style="font-weight: bold;"> 
          接口名称:
        </div>
        <div>
          2dHydrologyModelCaculation
        </div>
      </div>
      <div style="display: flex;margin-top: 2%;align-items: center;margin-left: 1%">
        <div style="font-weight: bold;"> 
          请求方式:
        </div>
        <div>
          POST
        </div>
      </div>
      <div style="margin-top: 2%;width: 98%;margin-left: 1%;">
        <el-table 
          :data="tableData" 
          style="width: 100%"
          :row-style="{ height: heightAll*0.08+'px',fontSize: '16px'  }"
          border 
          :max-height="tableheight">
          <el-table-column prop="date" label="参数" width="300" />
          <el-table-column prop="name" label="意义" width="300" />
          <el-table-column prop="address" label="类型" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
const tableData = [
  {
    date:'start',
    name:'开始时间',
    address:'string 示例:“2022-11-08 00:00:00'
  },
  {
    date:'start',
    name:'开始时间',
    address:'string 示例:“2022-11-08 00:00:00'
  },
  {
    date:'start',
    name:'开始时间',
    address:'string 示例:“2022-11-08 00:00:00'
  },
  {
    date:'start',
    name:'开始时间',
    address:'string 示例:“2022-11-08 00:00:00'
  },
  {
    date:'start',
    name:'开始时间',
    address:'string 示例:“2022-11-08 00:00:00'
  },
  {
    date:'start',
    name:'开始时间',
    address:'string 示例:“2022-11-08 00:00:00'
  },
]
const treeData = [
  {
    label: '前言',
    children: [
      {
        label: '接口说明',
      },
      {
        label: '新安江模型',
      },
      {
        label: '陕北模型',
      },
      {
        label: '马斯京根模型',
      },
      {
        label: '一维水动力模型',
      },
      {
        label: '二维水动力模型',
      },
    ],
  },
  {
    label: '模型搭建',
  },
  {
    label: '模型设计',
  },
  {
    label: '参数说明',
  },
  {
    label: '参数配置',
    children: [
      {
        label: '项目1',
      },
      {
        label: '项目2',
      },
      {
        label: '项目3',
      },
    ],
  },
  {
    label: '模拟计算方案',
  },
]
const heightAll = window.innerHeight
const valueHelpSel = '';
const tableheight = window.innerHeight*0.7
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
function showNode(data, node){
  console.log(data,node)
}
</script>
<style scoped lang="scss">
.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
</style>