<template>
  <div class="main">
    <div class="business-box">
      <div>
        <div class="tree-box">
          <a-input-search
            v-model:value="searchValue"
            style="margin-bottom: 8px"
            placeholder="Search"
          />
          <a-tree
            :expandedKeys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :tree-data="gData"
            @expand="onExpand"
          >
            <template #title="{ title }">
              <span v-if="title.indexOf(searchValue) > -1">
                {{ title.substr(0, title.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
              <span v-else>{{ title }}</span>
            </template>
          </a-tree>
        </div>
      </div>
      <div>
        <div>123</div>

        <div class="message-box">
          <div class="message-title"> 报文解析日志 </div>
          <ul>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
            <li>
              <div>2023-7-5 13:40:10 测试1（906100077）</div>
              <div>
                <div>加时报（CDY_GJ_1）</div>
                <div>雨量：<span>121.20</span></div>
                <div>水位：<span>121.20</span></div>
                <div>电压：<span>121.20</span></div>
                <div>发信包数：<span>2000</span></div>
              </div>
              <div
                >77634325fdfgdggf454354365y5y57756hgfhy75ns85487564564545t478511uu4876781455rb4t4786t148474545475t045145146514851485y478rt410465846514ty
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineComponent, ref, watch, onMounted } from 'vue';
  import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
  import { getAllCom, getRainLiveImg } from '/@/api/swHome/index';
  //树状控件
  const x = 3;
  const y = 2;
  const z = 1;
  const genData = [];
  const generateData = (_level, _preKey, _tns) => {
    const preKey = _preKey || '0';
    const tns = _tns || genData;
    const children = [];
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`;
      tns.push({
        title: key,
        key,
      });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return generateData(level, key, tns[index].children);
    });
  };
  generateData(z);
  const dataList = [];
  const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const key = node.key;
      dataList.push({
        key,
        title: key,
      });
      if (node.children) {
        generateList(node.children);
      }
    }
  };
  generateList(genData);
  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };
  const expandedKeys = ref([]);
  const searchValue = ref('');
  const autoExpandParent = ref(true);
  const gData = ref(genData);
  const onExpand = (keys) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
  };
  watch(searchValue, (value) => {
    const expanded = dataList
      .map((item) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, gData.value);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    expandedKeys.value = expanded;
    searchValue.value = value;
    autoExpandParent.value = true;
  });
  //获取左侧树桩数据
  async function getInitData() {
    getAllCom().then((res) => {
      console.log(res);
    });
  }
  onMounted(() => {
    getInitData();
  });
</script>

<style lang="scss" scoped>
  .business-box {
    display: flex;
    & > div:nth-child(1) {
      min-width: 400px;
      width: 400px;
      background-color: #fff;
      height: calc(100vh - 80px);
      border-radius: 5px;
      padding: 10px;
      overflow: auto;
    }
    & > div:nth-child(2) {
      margin-left: 10px;
      flex: 1;
      & > div:nth-child(1) {
        background-color: #fff;
        height: calc(50vh - 45px);
        padding: 10px;
        border-radius: 5px;
      }
      & > div:nth-child(2) {
        margin-top: 10px;
        background-color: #fff;
        height: calc(50vh - 45px);
        padding: 10px;
        border-radius: 5px;
      }
    }
  }
  .message-title {
    font-size: 16px;
    font-weight: 500;
  }
  .message-box {
    ul {
      width: 100%;
      height: calc(100% - 30px);
      overflow: auto;
      li {
        padding: 5px;
        border-radius: 4px;
        background-color: #f8f8f8;
        line-height: 30px;
        margin-bottom: 10px;
        & > div:nth-child(1) {
          color: #0671dd;
          font-size: 14px;
        }
        & > div:nth-child(2) {
          display: flex;
          flex-wrap: wrap;
          & > div {
            margin-right: 40px;
          }
          & > div:last-child {
            margin-left: auto;
            margin-right: 0;
          }
          span {
            color: #0671dd;
          }
        }
      }
    }
  }
</style>
