<!--
 * @Date: 2024-10-18 12:06:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-12-09 13:41:51
 * @FilePath: /hager/src/views/solution/case.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-case-page">
    <hager-box>
      <div style="margin-top: 1.5rem;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-if="!is_xs" :to="{ path: '/solution/index' }">解决方案</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: casePath }">{{ success_info.category_name }}</el-breadcrumb-item>
          <el-breadcrumb-item>成功案例</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </hager-box>
    <hager-box v-if="!is_xs" class="box-n">
      <el-row class="solution-case-banner">
        <el-col :span="8">
          <div class="solution-case-box">
            <div class="title">
              <p class="c">{{ success_info.post_title }}</p>
              <p class="e">{{ success_info.post_subtitle }}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="solution-case-img" :style="{ 'background-image': 'url(' + top_banner + ')' }"></div>
        </el-col>
      </el-row>
    </hager-box>
    <div v-else>
      <div style="padding: 1rem;">
        <div class="solution-case-img xs" :style="{ 'background-image': 'url(' + top_banner + ')' }"></div>
        <div class="solution-case-box xs">
          <div class="title">
            <p class="c xs">{{ success_info.post_title }}</p>
            <p class="e xs">{{ success_info.post_subtitle }}</p>
          </div>
        </div>
      </div>
    </div>
    <hager-box>
      <div :class="['solution-case-intro', is_xs ? 'xs' : '']">
        <p v-html="success_info.post_excerpt"></p>
      </div>
    </hager-box>
    <hager-box v-if="!is_xs && text_img" class="box-n">
      <el-row class="solution-case-banner">
        <el-col :span="16">
          <div class="solution-case-img" :style="{ 'background-image': 'url(' + text_img + ')' }"></div>
        </el-col>
        <el-col :span="8">
          <div class="solution-case-box" style="padding: 1rem 2rem;">
            <p v-html="success_info.post_content"></p>
          </div>
        </el-col>
      </el-row>
    </hager-box>
    <div v-if="is_xs && text_img">
      <div style="padding: 1rem;">
        <div class="solution-case-img xs" :style="{ 'background-image': 'url(' + text_img + ')' }"></div>
        <div class="solution-case-box xs">
          <p v-html="success_info.post_content"></p>
        </div>
      </div>
    </div>
    <hager-box v-if="success_info.post_text">
      <div :class="['case-content', is_xs ? 'xs' : '']" v-html="success_info.post_text"></div>
    </hager-box>
    <hager-box v-if="case_img.length" class="box-n">
      <div style="padding: 1vw; background-color: #F3F3F3;">
        <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
          <swiper-slide v-for="(item, index) in case_img" :key="index">
            <div class="solution-card-box">
              <div class="card-image-wrapper">
                <img :src="item.value" style="">
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div v-if="case_img.length > productSlidesPerView || (is_xs && case_img.length > 2)" class="hager-product-center-more">
          <div class="xs-control">
            <div>
              <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
              <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
            </div>
          </div>
        </div>
      </div>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import { getSolutionDetailAPI } from "@/api/hager.js";

export default {
  // TAG：配置页面meta和标题信息
  metaInfo () {
    return {
      meta: [
        { name: 'keyword', content: this.keyword },
        { name: 'description', content: this.description
      }]
    }
  },
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      product_list: [],
      swiperOption: {
        slidesPerView: 2,
        spaceBetween: 50,
        preventClicks : true,
        slideToClickedSlide: false,
        touchRatio: 0,
        breakpoints: {
          1024: {
            slidesPerView: 4,
            spaceBetween: 20
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20
          },
          640: {
            slidesPerView: 2,
            spaceBetween: 20
          },
          320: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          160: {
            slidesPerView: 1,
            spaceBetween: 0
          }
        }
      },
      activeProductIndex: 0,
      reach_product_end: false,
      productSlidesPerView: 4,
      success_info: {},
      top_banner: '',
      text_img: '',
      case_img: [],
      keyword: '',
      description: '',
    }
  },
  computed: {
    casePath () {
      return `/solution/detail?id=${this.success_info.category_id}&current_index=${this.$route.query.current_index}`;
    }
  },
  watch: {
    'top_banner' (v) {
      console.warn(v);
    }
  },
  async mounted () {
    const { code, data } = await getSolutionDetailAPI({ id: this.$route.query.id });
    if (code) {
      this.success_info = data;
      this.top_banner = this.success_info.file?.top_img ? this.success_info.file?.top_img[0]['value'] : '';
      this.text_img = data.file?.left_img ? data.file?.left_img[0]['value'] : '';
      this.case_img = data.file?.img_list ? data.file?.img_list : [];
      this.keyword = data.post_keyword;
      this.description = data.post_description;
    }

    this.$nextTick(() => {
      this.$refs.myProductSwiper?.$swiper?.on('breakpoint', (swiper) => {
        // breakpoint时 显示的条数
        this.productSlidesPerView = swiper.slidesPerView
      });
    });
  },
  methods: {
    prevProductBtn () {
      this.$refs.myProductSwiper.$swiper.slidePrev();
    },
    nextProductBtn () {
      this.$refs.myProductSwiper.$swiper.slideNext();
    },
    onProductSlideChange () {
      this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
      const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;

      if (isEnd) {
        this.reach_product_end = true;
      } else {
        this.reach_product_end = false;
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .hager-case-page {
    .top-img {
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
      height: 25rem;
      &.xs {
        height: 12rem;
      }
      .top-center {
        position: absolute;
        transform: translateY(50%); /* 垂直与水平居中 */
      }
    }

    .solution-case-img {
      width: 100%;
      height: 35rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      &.xs {
        height: 15rem;
      }
    }

    .solution-case-box {
      background-color: #F7F7F7;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 35rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &.xs {
        height: auto;
      }
      .title {
        font-weight: bold;
        word-break: break-all;
        .c {
          font-size: 1.5rem;
          color: @secondary-color;
          line-height: 1.5;
          &.xs {
            font-size: 1.5rem;
          }
        }
        .e {
          font-size: 1.2rem;
          color: @primary-color;
          margin-top: 0.5rem;
          &.xs {
            font-size: 1.1rem;
          }
        }
      }
    }

    .solution-case-intro {
      padding: 1rem 3rem 3rem;
      &.xs {
        padding: 1rem;
      }
    }

  .solution-card-box {
    .card-image-wrapper {
      // background-color: #F3F3F3;
      border-radius: 5px;
      transition: transform 0.3s ease-in-out;
      // &:hover {
      //   transform: scale(1.05);
      //   // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      //   cursor: pointer;
      // }
      img {
        width: 100%;
        // margin-left: calc((100%) / 2);
        height: auto;
      }
    }
    .card-title {
      color: @text-color;
      font-weight: bold;
      margin: 1rem 0;
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }

  .xs-control {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    i {
      font-size: 1.35rem;
      color: #EE6D10;
      &:hover {
        cursor: pointer;
      }
      &.disabled {
        color: #ccc;
      }
    }
  }

    .case-title {
      color: @secondary-color;
      text-align: center;
      font-size: 1.75rem;
      font-weight: bold;
      margin: 3rem 0;
    }

    :deep(.case-content) {
      padding: 1rem 3rem;
      &.xs {
        padding: 1rem;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
</style>