import { css } from "@linaria/core";
import { defineComponent, reactive, ref, nextTick } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay } from "swiper";
import "swiper/css";
import { useArticle, useCategory } from "@/modules";
import loading from "@/components/Provider/Loading";
import Image from "@/components/Image";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const store = useArticle();
    const storeCategory = useCategory();
    const router = useRouter();
    const state = reactive({
      active: 0,
      images: [] as any,
    });
    const swiperRef = ref();
    const initBanner = async () => {
      loading.show("");
      await store.bannerList.loadPage(1);
      state.images = store.bannerList.state.list;

      nextTick(() => {
        if (swiperRef.value) {
          swiperRef.value.update();
        }
      });
      loading.hidden();
    };
    initBanner();
    const initSwiper = (swiper: any) => {
      swiperRef.value = swiper;
    };
    const bannerClick = async (item: any) => {
      if (item.url) {
        window.open(item.url);
        return;
      }
      if (!item.aid) return;
      const detRes = await store.listController.itemDetail(item.aid);
      if (detRes.errorNo != 200) {
        message.warn("未查询到数据！");
        return;
      }
      const artDetail = detRes.result;
      const currCate = storeCategory.listController.state.list.find((e) => {
        return e._id == artDetail.cid;
      });
      if (!currCate) {
        return;
      }
      const currParent = storeCategory.listController.state.list.find((e) => {
        return e._id == currCate?.pid;
      });
      if (currParent?.pid == "top") {
        router.push({
          name: "article",
          params: { id: currCate._id },
          query: { aid: artDetail._id },
        });
      } else {
        router.push({
          name: "article",
          params: { id: currParent?._id },
          query: { aid: artDetail._id },
        });
      }
    };
    return () => (
      <div class={page}>
        <Swiper
          class={"banner_swiper"}
          modules={[Autoplay]}
          autoplay={false}
          loop={true}
          onSwiper={initSwiper}
          onSlideChange={(e) => {
            state.active = e.realIndex;
          }}
        >
          {state.images.map((item: any) => {
            return (
              <SwiperSlide>
                <div
                  class={"banner_item"}
                  onClick={() => {
                    bannerClick(item);
                  }}
                >
                  <Image src={item.cover} />
                </div>
              </SwiperSlide>
            );
          })}
        </Swiper>
        <div class={"swiper_prev"}>
          <img
            src={getImageUrl("botton_prev.png")}
            onClick={() => {
              swiperRef.value.slidePrev();
            }}
          />
        </div>
        <div class={"swiper_next"}>
          <img
            src={getImageUrl("botton_next.png")}
            onClick={() => {
              swiperRef.value.slideNext();
            }}
          />
        </div>
        <div class={"swiper_pagination"}>
          {state.images.length > 0 && (
            <div class={"page_dots_box"}>
              {state.images.map((_: any, i: number) => {
                return (
                  <div
                    class={["page_dot", state.active == i ? "active" : null]}
                    onClick={() => {
                      swiperRef.value.slideTo(i);
                    }}
                  ></div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  width: 100%;
  height: 600px;
  max-height: 600px;
  .banner_swiper {
    height: 100%;
    img {
      height: 600px;
      width: 100%;
      object-fit: cover;
      user-select: none;
    }
    .banner_item {
      cursor: pointer;
    }
  }
  .swiper_prev,
  .swiper_next {
    position: absolute;
    top: 0;
    width: 66px;
    height: 100%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    &:hover {
      img {
        opacity: 1;
      }
    }
    img {
      width: 66px;
      height: 66px;
      object-fit: contain;
      opacity: 0;
      transition: all 0.3s ease-in-out;
      cursor: pointer;
      user-select: none;
    }
  }
  .swiper_prev {
    left: 0;
  }
  .swiper_next {
    right: 0;
  }
  .swiper_pagination {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
    .page_dots_box {
      display: inline-block;
      padding: 6px 9px;
      border-radius: 30px;
      font-size: 0;
      background-color: rgba(0, 0, 0, 0.56);
      .page_dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 4px;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        &.active {
          width: 24px;
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
`;
