<template>
  <div class="small">
    <div class="_title">
      <div style="height: 394px; background-color: #108de9"></div>
      <div class="_li" :class="isFixed ? '_fixed' : ''">
        <ul class="conter1000">
          <li
            :class="activeId == item.id ? '_active' : ''"
            v-for="(item, index) in caseList"
            :key="item.id"
            @click="setScrollTop(item.id, index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
    </div>
    <div class="box" v-show="!isShowMore">
      <div
        class="_item"
        :ref="setItemRef"
        v-once
        v-for="(item, index) in caseList"
        :key="index"
        :data-id="item.id"
      >
        <h3 class="_tit text-center" style="font-size: 24px; color: #333333">
          {{ item.title }}
        </h3>
        <div class="_info conter1000">
          <div class="_r" v-if="isOddEvenNumber(index)">img</div>
          <div
            class="_l"
            :class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
          >
            <h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
              {{ item.title }}
            </h3>
            <!-- <p>{{ item.description }}</p> -->
            <p>
              本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
            </p>
          </div>
          <div class="_r" v-if="!isOddEvenNumber(index)">img</div>
        </div>
        <div class="_list conter1400">
          <ul>
            <li v-for="item in 6" :key="item">
              <el-image
                style="width: 100%; height: 135px"
                src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
                fit="cover"
              ></el-image>
              <div class="_head text_hidden">
                盘活本地技术供需对接，某企业引盘活本地技术供需对接，某企业引
              </div>
              <div class="_detail text_hidden">
                江启明电子有限公司自成立以来始终专注于LED显示屏。
              </div>
            </li>
          </ul>
          <div class="_liBtn text-right">
            <el-button class="x_btns" @click="handleShowMore(item)"
              >查看更多</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <seeMore
      v-show="isShowMore"
      v-model:isShowMore="isShowMore"
      v-model:oneLevelTitle="oneLevelTitle"
    ></seeMore>
    <webFooter></webFooter>
  </div>
</template>
<script setup>
import { nextTick, onMounted } from "vue";
import seeMore from "./components/seeMore.vue";
import webFooter from "@/components/webFooter/index.vue";

const oneLevelTitle = ref({});
const isShowMore = ref(false);
const activeId = ref("");
const itemRefs = [];
const setItemRef = (el) => {
  if (el) {
    itemRefs.push(el);
  }
};
const caseList = reactive([
  {
    id: "1",
    title: "宣传介绍1",
    description: "方案详细描述",
    image: "",
  },
  {
    id: "2",
    title: "宣传介绍2",
    description: "方案详细描述",
    image: "",
  },
  {
    id: "3",
    title: "宣传介绍3",
    description: "方案详细描述",
    image: "",
  },
]);
const scrollTop = ref(0);
const isFixed = ref(false);
onMounted(() => {
  activeId.value = caseList[0].id;
  document.addEventListener("scroll", () => {
    scrollTop.value = getScroll().top;
    if (scrollTop.value >= 394) {
      isFixed.value = true;
    } else {
      isFixed.value = false;
    }
    itemRefs.map((item) => {
      if (isShowMore.value) return false;
      if (scrollTop.value >= item.offsetTop - 80) {
        activeId.value = item.getAttribute("data-id");
      }
    });
  });
});
function getScroll() {
  return {
    left:
      window.pageXOffset ||
      document.documentElement.scrollLeft ||
      document.body.scrollLeft ||
      0,
    top:
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      0,
  };
}
function setScrollTop(id, index) {
  // if (isShowMore.value) return false;
  isShowMore.value = false;
  nextTick(() => {
    window.scrollTo({
      // - 80
      top: itemRefs[index].offsetTop,
    });
  });
  activeId.value = id;
}
function isOddEvenNumber(num) {
  return num % 2 == 0 ? false : true;
}
function handleShowMore(item) {
  oneLevelTitle.value = item;
  window.scrollTo({
    top: 0,
  });
  isShowMore.value = true;
}
</script>
<style lang="scss" scoped>
.small {
  background-color: #fff;
  ._title {
    position: relative;
    ._li {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 48px;
      background: rgba(0, 0, 0, 0.2);
      > ul {
        display: flex;
        height: 48px;
        line-height: 48px;
        li {
          flex: 1;
          text-align: center;
          font-size: 18px;
          color: #ffffff;
          display: inline-block;
          cursor: pointer;
        }
        ._active {
          background: #000000;
        }
      }
    }
    ._fixed {
      position: fixed;
      top: 80px;
      z-index: 1;
      background-color: #ccc;
    }
  }
  .box {
    margin-bottom: 30px;
    ._item {
      ._tit {
        margin: 0;
        padding: 100px 0 60px;
      }
      ._info {
        display: flex;
        ._paddingr {
          padding-right: 63px;
        }
        ._paddingl {
          padding-left: 63px;
        }
        ._l {
          flex: 1;
          h3 {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
          }
          p {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 24px;
          }
        }
        ._r {
          width: 520px;
          background: #f2f6ff;
        }
      }
    }
    ._list {
      margin-top: 86px;
      > ul {
        display: flex;
        li {
          width: calc(100% / 6);
          padding: 0 11px;
          ._head {
            margin: 5px 0;
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
            line-height: 19px;
          }
          ._detail {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            line-height: 19px;
          }
        }
      }
      ._liBtn {
        margin-top: 36px;
      }
    }
  }
}
</style>