<template>
  <div class="rescue">
    <div class="left">
      <div class="search">
        <input
          autofocus
          type="text"
          placeholder="请输入..."
          @keydown.enter="searchBtn"
        />
        <i class="iconfont icon-sousuo" @click="searchBtn"></i>
      </div>
      <div class="tree-list">
        <el-tree
          :auto-expand-parent="false"
          node-key="id"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :default-expanded-keys="[13, 26, 27, 28, 29, 30, 25]"
        >
        </el-tree>
      </div>
    </div>
    <div class="right">
      <div class="title">
        <div class="icon1"></div>
        <span>抢险方案库</span>
        <div class="icon2"></div>
      </div>
      <div class="article-content">
        <div class="article" v-for="(item, index) in articleList" :key="index">
          <div class="article-title">
            <h2>{{ item.title }}</h2>
          </div>
          <div class="txt" v-for="(it, i) in item.content" :key="i">
            <h3>{{ it.title }}</h3>
            <p>{{ it.txt }}</p>
            <img :src="it.img" v-if="it.img !== ''" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { treeData } from '@/utils/myData.js'
export default {
  name: 'Rescue',
  data () {
    return {
      treeData,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      articleList: [
        {
          title: '漫顶',
          content: [
            {
              title: '抢险思路和原则',
              txt: ' （1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。（1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。（1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。（1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。（1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。（1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。（1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。（1）首先应考虑加大泄洪流量，增加泄洪能力，降低库水位，防止洪水漫顶。',
              img: ''
            },
            {
              title: '注意事项',
              txt: '（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。',
              img: ''
            }
          ]
        }, {
          title: '无动力真空虹吸',
          content: [
            {
              title: '发生原因',
              txt: '大坝防洪标准偏低',
              img: ''
            },
            {
              title: '详情描述',
              txt: '采用水库防汛无动力真空虹吸溢洪成套设备等方法排水。',
              img: ''
            }, {
              title: '注意事项',
              txt: '（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。',
              img: ''
            }, {
              title: '注意事项',
              txt: '（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。',
              img: ''
            }, {
              title: '注意事项',
              txt: '（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。',
              img: ''
            }, {
              title: '注意事项',
              txt: '（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。（1）首先应将下游人员等安全撤离。 （2）在降低库水位同时，应采取必要措施，确保大坝在库水位骤降工况下上游坝坡的抗滑稳定。',
              img: ''
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick (data) {
      if (!data.children) {
        const articleContent = document.querySelector('.article-content')
        articleContent.innerHTML = data.content
      }
    },
    searchBtn () {
      console.log('搜索')
    }

  }
}
</script>

<style lang="scss" scoped>
.rescue {
  display: flex;
  width: 100%;
  height: 100%;
  .left {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100%;
    margin-right: 10px;
    padding: 10px;
    .search {
      position: relative;
      width: 100%;
      height: 36px;
      margin-bottom: 20px;
      input {
        width: 100%;
        height: 100%;
        line-height: 36px;
        color: #fff;
        font-size: 14px;
        padding-left: 18px;
        padding-right: 30px;
        background-color: rgba(0, 0, 0, 0.2);
        &::placeholder {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
        }
        border: 0;
      }
      i {
        position: absolute;
        top: 8px;
        right: 10px;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
      }
    }
    .tree-list {
      flex: 1;
      overflow: auto;
      .el-tree ::v-deep {
        background-color: transparent;
        .el-tree-node__label {
          color: #fff;
        }
        .el-tree-node:focus > .el-tree-node__content {
          background-color: rgba(255, 255, 255, 0.3);
        }
        .el-tree-node:focus > .el-tree-node__content span {
          color: #60fff6;
        }
        .el-tree-node__content:hover,
        .el-upload-list__item:hover {
          background-color: rgba(255, 255, 255, 0.3);
          // span {
          //   color: #60fff6;
          // }
        }
        // .el-tree-node:nth-child(1) {
        //   .el-tree-node__content {
        //     span:nth-child(2).el-tree-node__label {
        //       color: #ffc05d;
        //     }
        //   }
        // }
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      background-color: #12407f;
      .icon1 {
        width: 23px;
        height: 15px;
        background: url("~@/assets/images/engineering/title_left.png") center /
          100% 100%;
      }
      .icon2 {
        width: 23px;
        height: 15px;
        background: url("~@/assets/images/engineering/title_right.png") center /
          100% 100%;
      }
      span {
        color: #fff;
        font-size: 20px;
        margin: 0 20px;
      }
    }
    .article-content ::v-deep {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      padding-top: 40px;
      background-color: rgba(96, 255, 246, 0.05);
      overflow: auto;
      color: #fff;
      .MsoNormal {
        line-height: 30px;
      }
      &::-webkit-scrollbar {
        // 滚动条整体样式
        width: 10px; // 竖向滚动条宽度
        height: 0; // 横向滚动条高度
      }
      &::-webkit-scrollbar-thumb {
        // 滚动条内滑块样式
        background-color: #6d9dbc;
        border-radius: 2px;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道样式
        background-color: #2a5c8a;
      }
      .article {
        width: 906px;
        margin-bottom: 32px;
        .article-title {
          display: flex;
          justify-content: center;
          width: 100%;
          height: 34px;
          margin-bottom: 20px;
          h2 {
            height: 100%;
            color: #ffc05d;
            font-size: 18px;
            padding: 0 19px;
            background: url("~@/assets/images/rescue/h_bg.png") no-repeat bottom
              center / 100% 100%;
          }
        }
        .txt {
          width: 100%;
          margin-bottom: 23px;
          h3 {
            color: #60fff6;
            font-size: 16px;
            margin-bottom: 7px;
          }
          p {
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin-bottom: 20px;
          }
          img {
            width: 100%;
          }
        }
        .txt:last-child {
          margin-bottom: 0;
        }
      }
      .article:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
