<template>
  <div class="small" v-loading="loading">
    <div class="_title">
      <div
        v-if="!state.banner"
        style="height: 394px; background-color: #108de9"
      ></div>
      <div v-else style="height: 394px">
        <img
          :src="state.banner"
          style="width: 100%; height: 100%"
          alt="banner"
        />
      </div>
      <div
        v-if="state.caseList.length"
        class="_li"
        :class="isFixed ? '_fixed' : ''"
      >
        <ul class="conter1000">
          <li
            :class="activeId == item.id ? '_active' : ''"
            v-for="(item, index) in state.caseList"
            :key="item.id"
            @click="setScrollTop(item.id, index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <h2 v-else style="text-align: center; line-height: 100px">暂无数据</h2>
    </div>
    <div class="box" v-show="!isShowMore">
      <div
        class="_item"
        :ref="setItemRef"
        v-for="(item, index) in state.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 :src="item.image" alt srcset />
          </div>
          <div
            class="_l"
            :class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
          >
            <h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
              {{ item.title }}
            </h3>
            <!-- <p>{{ item.description }}</p> -->
            <p>{{ item.description }}</p>
          </div>
          <div class="_r" v-if="!isOddEvenNumber(index)">
            <img :src="item.image" alt srcset />
          </div>
        </div>
        <div class="_list conter1400">
          <ul>
            <li
              v-for="child in item.children.slice(0, 2)"
              :key="child.id"
              @click="handlePath(child.id)"
            >
              <el-image
                style="width: 100%; height: 135px"
                :src="child.image"
                fit="cover"
              ></el-image>
              <div class="_head text_hidden">{{ child.title }}</div>
              <div class="_detail text_hidden">{{ child.description }}</div>
            </li>
          </ul>
          <div class="_liBtn text-right">
            <el-button class="x_btns" @click="handleShowMore(item)"
              >查看更多</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <seeMore
      v-if="isShowMore"
      :data="moreData"
      v-model:isShowMore="isShowMore"
      v-model:oneLevelTitle="oneLevelTitle"
    ></seeMore>
    <webFooter></webFooter>
  </div>
</template>
<script setup>
import { nextTick, onMounted, reactive } from "vue";
import seeMore from "./components/seeMore.vue";
import webFooter from "@/components/webFooter/index.vue";
import { banner } from "@/api/website/home/index";
import { useRoute, useRouter } from "vue-router";
import { getCase } from "@/api/website/solution";

const router = useRouter();

function handlePath(id) {
  let routeData = router.resolve({ path: `/solution/detail/${id}/` });
  window.open(routeData.href, "_blank");
}

let moreData = ref([]);
const loading = ref(true);
const oneLevelTitle = ref({});
const modeDict = { small: 101, large: 102, government: 103, scientific: 104 };
const keyDict = {
  small: "解决方案>中小型企业服务",
  large: "解决方案>大型企业服务",
  government: "解决方案>政府区域服务",
  scientific: "解决方案>政府区域服务",
};
const isShowMore = ref(false);
const activeId = ref("");
const itemRefs = [];
const setItemRef = (el) => {
  if (el) {
    itemRefs.push(el);
  }
};
const state = reactive({
  caseList: [],
  banner: "",
});
const scrollTop = ref(0);
const isFixed = ref(false);
const route = useRoute();

watch(route, () => {
  initData();
});
onMounted(() => {
  initData();
});

//
function initData() {
  let name = route.params.name;
  if (!name) return;
  let mode = modeDict[name];
  let key = keyDict[name];

  getCase({ mode }).then((res) => {
    state.caseList = res.data;
    initScroll();
  });
  loading.value = true;
  banner({ locals: key })
    .then((resp) => {
      state.banner = resp.data[0].images;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

function initScroll() {
  if (state.caseList.length) {
    activeId.value = state.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({
      top: itemRefs[index].offsetTop,
    });
  });
  activeId.value = id;
}
function isOddEvenNumber(num) {
  return num % 2 == 0 ? false : true;
}
function handleShowMore(item) {
  console.log(item);
  moreData.value = item.children;
  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: 420px;
          background: #f2f6ff;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    ._list {
      margin-top: 86px;
      > ul {
        display: flex;
        justify-content: center;
        li {
          cursor: pointer;
          width: calc(100% / 6);
          padding: 0 11px;
          &:hover ._head,
          &:hover ._detail {
            opacity: 0.6;
          }
          ._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;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
