<template>
  <div v-loading="loading" class="small">
    <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"
          alt="banner"
          style="width: 100%; height: 100%"
        />
      </div>
      <div
        v-if="state.caseList.length"
        :class="isFixed ? '_fixed' : ''"
        class="_li"
      >
        <ul class="conter1000">
          <li
            v-for="(item, index) in state.caseList"
            :key="item.id"
            :class="activeId == item.id ? '_active' : ''"
            @click="setScrollTop(item.id, index)"
          >
            {{ item[titleField] }}
          </li>
        </ul>
      </div>
      <h2 v-else style="text-align: center; line-height: 100px">
        {{ t("common.noData") }}
      </h2>
    </div>
    <div v-show="!isShowMore" class="box">
      <div
        v-for="(item, index) in state.caseList"
        :key="index"
        :ref="setItemRef"
        :data-id="item.id"
        class="_item"
      >
        <h3 class="_tit text-center" style="font-size: 24px; color: #333333">
          {{ item[titleField] }}
        </h3>
        <div class="_info conter1000">
          <div v-if="isOddEvenNumber(index)" class="_r">
            <img :src="item.image" alt srcset />
          </div>
          <div
            :class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
            class="_l"
          >
            <h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
              {{ item[titleField] }}
            </h3>
            <!-- <p>{{ item.description }}</p> -->
            <p>{{ item[descriptionField] }}</p>
          </div>
          <div v-if="!isOddEvenNumber(index)" class="_r">
            <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
                :src="child.image"
                fit="cover"
                style="width: 100%; height: 135px"
              ></el-image>
              <div class="_head text_hidden">{{ child[titleField] }}</div>
              <div class="_detail text_hidden">{{ child[descriptionField] }}</div>
            </li>
          </ul>
          <div class="_liBtn text-right">
            <el-button class="x_btns" @click="handleShowMore(item)">
              {{ t("common.viewMore") }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <seeMore
      v-if="isShowMore"
      v-model:isShowMore="isShowMore"
      v-model:oneLevelTitle="oneLevelTitle"
      :data="moreData"
    ></seeMore>
    <webFooter></webFooter>
  </div>
</template>
<script setup>
import { computed, nextTick, onMounted, reactive, ref } 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";
import { useI18n } from "vue-i18n";
// import { getCategory } from "../../../api/website/solution";

const router = useRouter();

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

const { t, locale } = useI18n();

const titleField = computed(() =>
  locale.value === "zh" ? "title" : `${locale.value}Title`
);
const descriptionField = computed(() =>
  locale.value === "zh" ? "description" : `${locale.value}Description`
);
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();
});

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

  mode &&
    getCase({ mode }).then((res) => {
      state.caseList = res.data;
      initScroll();
      // loading.value = false;
    });
  loading.value = true;
  banner({ locals: `解决方案>${name}` })
    .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;
          background: transparent;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }

    ._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>
