<template>
  <!-- 轮播文字的 -->
  <div v-if="isType === '2'" @mouseenter="closeLoop" @mouseleave="loopSlider" class="box-title"
    style="width: 96%; height: 100px">
    <div class="xtx-slider">
      <!-- 图片列表 -->
      <ul class="slider-body">
        <!--
          fade: 当fade类名存在 当前图片就显示 不存在就不显示
         -->
        <li class="slider-item" :class="{ fade: curIndex === i }" v-for="(item, i) in date" :key="i">
          <p class="slider-text" @click="textxData(item)">{{ item.imgUrl }}</p>
        </li>
      </ul>
    </div>
  </div>
  <div v-if="isType === '2'" class="scroll-btn">
    <span @click="upper" class="upper"></span>
    <span @click="lower" class="lower"></span>
  </div>
  <!-- 轮播图片的 -->
  <div v-if="isType === '1'" @mouseenter="closeLoop" @mouseleave="loopSlider" class="box">
    <div class="xtx-slider1">
      <!-- 图片列表 -->
      <ul class="slider-body">
        <!--
          fade: 当fade类名存在 当前图片就显示 不存在就不显示
         -->
        <li class="slider-item" @click="imgData(item, i)" :class="{ fade: curIndex === i }" v-for="(item, i) in date"
          :key="i">
          <img class="img-box" :src="item.imgUrl" alt="" />
        </li>
      </ul>
      <!-- 圆圈切换按钮 -->
      <div class="slider-indicator">
        <span @click="curIndex = index" :class="{ active: curIndex === index }" v-for="(item, index) in date"
          :key="index">{{ index + 1 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, } from 'vue'
import { useRouter } from 'vue-router'
import homePageApi from "@/api/homeApi.js";

export default {
  name: 'XtxSlider',

  props: {
    date: {
      type: Array,
      default: () => []
    },
    //  控制播放
    isAutoPlay: {
      type: Boolean,
      default: true
    },
    // 传入看是文字的还是图片的
    isType: {
      type: String,
      default: () => '1'
    },
  },

  setup(props) {
    const router = useRouter();
    // 当前要显示图片的索引
    const curIndex = ref(0)
    // const sliders = ref([
    //   {
    //     hrefUrl: '/#/',
    //     id: '630000201807155635',
    //     imgUrl: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b1.jpg'
    //   },
    //   {
    //     hrefUrl: '/#/',
    //     id: '650000201207058528',
    //     imgUrl: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b2.jpg'
    //   }
    // ])

    // 自动播放实现
    const timeId = ref(null)
    const loopSlider = () => {
      if (!props.isAutoPlay) return
      timeId.value = setInterval(() => {
        curIndex.value++
        if (curIndex.value > props.date.length - 1) {
          curIndex.value = 0
        }
      }, 2000)
    }
    onMounted(() => {
      loopSlider()
    })

    //  鼠标移入暂停
    const closeLoop = () => {
      clearInterval(timeId.value)
    }
    const upper = () => {
      // if (props.date.length) {
      //   curIndex.value = 0
      // } else {
      curIndex.value++
      // }
    }
    // 下一张
    const lower = () => {
      curIndex.value--
    }
    // 标题点击事件
    const textxData = (val) => {
      //定义一个路径
      let href = router.resolve({
        path: "/articleDetails",
        query: { type: "ttxmbt", id: val.id },
      }).href;
      //打开新的页面 到 href 这个页面
      window.open(href, "_blank");
    }
    // 跳转
    const imgData = (data, val) => {
      let jump = 'http://www.qinghai.gov.cn/zwgk/zt/index.shtml'
      console.log(val, data, 'val')
      if (val === 0) {
        window.open(jump)
      }
      if (val === 1) {
        // router.push('/ztzl')
        const { href } = router.resolve({
          path: `/ztzl`,
          // query: { 带参数传递法
          //   id: row.id,
          //   paperName: this.paperName,
          //   name: row.name,
          //   examScore: row.examScore,
          //   answersTime: row.answersTime
          // }
        });
        // _blank - 在新窗口显示目标网页。这是默认
        window.open(href, '_blank')
      }
      // 党史学习教育点击跳转详情
      if (val === 2 || val === 3 || val === 4) {
        homePageApi
          .hmcarouselconfigDetail({ id: data.id })
          .then((res) => {
            // res.data.redirectUrl
            //打开新的页面 到 href 这个页面
            window.open(res.data.redirectUrl, "_blank");
          });

      }
    }

    return {
      curIndex,
      closeLoop,
      loopSlider,
      upper,
      lower,
      imgData,
      textxData
    }
  }
}
</script>

<style scoped lang='less'>
.xtx-slider1 {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 100px;
  position: relative;
}

.xtx-slider {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 110px;
  position: relative;
}

.slider {
  &-body {
    width: 100%;
    height: 100%;
  }

  &-item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.5s linear;

    &.fade {
      opacity: 1;
      z-index: 1;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  &-indicator {
    position: absolute;
    left: 0;
    bottom: 6px;
    z-index: 2;
    width: 97%;
    text-align: right;

    span {
      line-height: 20px;
      display: inline-block;
      width: 16px;
      height: 19px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      cursor: pointer;
      text-align: center;

      ~span {
        margin-left: 12px;
      }

      &.active {
        background: #fff;
      }
    }
  }
}

.box {
  width: 96%;
  height: 100px
}

.slider-item {
  // height: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slider-text {
  font-size: 30px;
  width: 92%;
  text-align: center;
  margin: auto;
  line-height: 100px;
  color: crimson;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.scroll-btn {
  width: 42px;
  padding-top: 20px;
  cursor: pointer;
}

.img-box {
  cursor: pointer;
}

.upper {
  width: 24px;
  height: 28px;
  margin-bottom: 12px;
  display: block;
  background-image: url("../../../assets/logo/上.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.lower {
  width: 24px;
  height: 28px;
  display: block;
  background-image: url("../../../assets/logo/下.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
