<template>
  <div class="background-container">
    <el-row :gutter="10">
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple">
          <el-carousel
            style="display: inline-block; width: 100%"
            trigger="click"
            height="420px"
          >
            <el-carousel-item
              style="position: absolute"
              v-for="item in data"
              :key="item"
            >
              <div style="width: 45vw" @click="detail(item.id)">
                <el-image
                  style="width: 42.8vw; background-size: contain"
                  :src="item.titleImgFile.url"
                  :fit="none"
                />
                <div
                  style="
                    color: white;
                    position: fixed;
                    background-size: cover;
                    bottom: 0;

                    height: 4vh;
                    width: 106%;
                    line-height: 4vh;
                  "
                  class="small justify-center"
                  text="2xl"
                >
                  <div
                    style="
                      color: white;
                      padding-left: 10px;
                      background: rgba(0, 0, 0, 0.5);
                    "
                  >
                    <div
                      style="
                        overflow: hidden;
                        color: white;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        max-width: 400px;
                      "
                    >
                      {{ item.title }}
                    </div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :span="12"
        ><div
          style="
            width: 100%;
            background-color: white;
            padding: 15px;
            height: 420px;
            display: inline-block;
            border-radius: 5px;
            position: relative;
          "
        >
          <el-tabs class="demo-tabs" ref="navTabs" v-model="activeName">
            <el-tab-pane label="党建动态" name="activeName.second"
              ><govenmentOpen govenmentCode="DJDT"
            /></el-tab-pane>
            <el-tab-pane label="新闻中心" name="activeName.first"
              ><newCenter newCode="XWZX"
            /></el-tab-pane>
          </el-tabs>
          <router-link
            :to="{ path: '/more', query: { columnID: activeName } }"
            class="el-tabs-more"
          >
            <span>更多 ></span>
          </router-link>
        </div>
      </el-col>
    </el-row>
    <!-- 轮播图 -->
    <div style="margin-top: 5px" class="box">
      <div class="imgList" ref="imageContainer">
        <img
          @click="imgOpen(image)"
          v-for="(image, index) in data2"
          :key="index"
          :style="{
            width: '300px',
            height: '80px',
            marginLeft: index > 0 ? '10px' : '10px',
          }"
          :src="image.imgUrl"
          alt=""
        />
      </div>
    </div>

    <el-row :gutter="10">
      <el-col :span="12">
        <div
          style="
            margin-top: 10px;
            width: 100%;
            background-color: white;
            padding: 15px;
            height: 420px;
            display: inline-block;
            border-radius: 5px;
            position: relative;
          "
        >
          <el-tabs v-model="activeName1" class="demo-tabs">
            <el-tab-pane label="领导讲话" name="activeName1.two"
              ><leadershipSpeech leaderCode="LDJH"
            /></el-tab-pane>
            <el-tab-pane label="政务公开" name="activeName1.one"
              ><partyBuildingTrends partCode="ZWGK"
            /></el-tab-pane>
          </el-tabs>
          <router-link
            :to="{ path: '/more', query: { columnID: activeName1 } }"
            class="el-tabs-more"
          >
            <span>更多 ></span>
          </router-link>
        </div>
      </el-col>
      <el-col :span="12">
        <div
          style="
            width: 100%;
            background-color: white;
            padding: 15px;
            margin-top: 10px;
            height: 420px;
            display: inline-block;
            border-radius: 5px;
            position: relative;
          "
        >
          <el-tabs v-model="activeName3" class="demo-tabs">
            <el-tab-pane label="作风整顿" name="activeName3.1"
              ><rectificationOfWorkStyle rectificatCode="ZFZD"
            /></el-tab-pane>
            <el-tab-pane label="文件资料" name="activeName3.2"
              ><documentData docuCode="WJZL"
            /></el-tab-pane>
          </el-tabs>
          <router-link
            :to="{ path: '/more', query: { columnID: activeName3 } }"
            class="el-tabs-more"
          >
            <span>更多 ></span>
          </router-link>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div
          style="
            margin-top: 13px;
            width: 100%;
            background-color: white;
            padding: 15px;
            height: 420px;
            display: inline-block;
            border-radius: 5px;
            position: relative;
          "
        >
          <el-tabs v-model="activeName2" class="demo-tabs">
            <el-tab-pane label="安全生产" name="activeName2.a"
              ><safeProduction safeCode="AQSC"
            /></el-tab-pane>
            <el-tab-pane label="规章制度" name="activeName2.b"
              ><rulesAndRegulations studyCode="GZZD"
            /></el-tab-pane>
          </el-tabs>
          <router-link
            :to="{ path: '/more', query: { columnID: activeName2 } }"
            class="el-tabs-more"
          >
            <span>更多 ></span>
          </router-link>
        </div></el-col
      >
      <el-col :span="12">
        <div class="grid-content ep-bg-purple-light">
          <div
            style="
              width: 100%;
              background-color: white;
              padding: 15px;
              height: 420px;
              margin-top: 13px;
              display: inline-block;
              border-radius: 5px;
              position: relative;
            "
          >
            <el-tabs v-model="activeName4" class="demo-tabs">
              <el-tab-pane label="学习园地" name="activeName4.11"
                ><learningGarden learnGardenCode="XXYD"
              /></el-tab-pane>
              <el-tab-pane label="公共信息" name="activeName4.22"
                ><publicInformation publicCode="GGXX"
              /></el-tab-pane>
            </el-tabs>

            <router-link
              :to="{ path: '/more', query: { columnID: activeName4 } }"
              class="el-tabs-more"
            >
              <span>更多 ></span>
            </router-link>
          </div>
        </div></el-col
      >
    </el-row>
    <el-dialog
      v-model="centerDialogVisible"
      width="80%"
      style="height: 850px"
      title="文章详情"
      :append-to-body="true"
    >
      <div
        style="
          margin: 0 auto;
          background-color: #f2f2f2;
          height: 750px;
          overflow: auto;
        "
      >
        <div>
          <div>
            <div><div class="grid-content ep-bg-purple" /></div>
            <div style="">
              <div
                style="
                  background-color: white;
                  height: 100%;
                  width: 850px;
                  margin: 0 auto;
                  border: 2px solid #ececec;
                  padding: 15px 10px;
                "
              >
                <div
                  style="
                    border: 3px solid #f8f8f8;
                    min-height: 1000px;
                    width: 825px;
                    height: 100%;
                  "
                >
                  <div
                    style="background-color: #f8f8f8; width: 100%"
                    class="grid-content ep-bg-purple"
                  >
                    <div
                      style="
                        font-size: 25px;
                        font-weight: 600;
                        line-height: 50px;
                        text-align: center;
                        border-bottom: 1px solid #c0c0c0;
                      "
                    >
                      <div style="font-size: 25px">
                        {{ title1 }}
                      </div>
                    </div>
                    <div
                      style="
                        font-size: 14px;
                        height: 25px;
                        text-align: center;
                        line-height: 25px;
                      "
                    >
                      <div style="display: inline-block">
                        发布人：{{ createBy }}
                      </div>
                      <div style="display: inline-block; margin: 0 25px">
                        发布时间：{{
                          parseTime(publishTime, "{y}-{m}-{d} {h}:{m}")
                        }}
                      </div>
                      <div style="display: inline-block">
                        浏览量：{{ views }}
                      </div>
                    </div>
                    <div style="padding: 30px 15px; background-color: white">
                      <div v-html="responseData"></div>
                      <div style="width: 400px; height: 200px">
                        <div
                          v-for="image in getImagesFromData(responseData)"
                          :key="image"
                        >
                          <el-image
                            :fit="contain"
                            :src="image.src"
                            :alt="image.alt"
                            :width="image.width"
                            :height="image.height"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div><div class="grid-content ep-bg-purple" /></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import img2 from "@/assets/imgHome/qlyx.jpg";
import img3 from "@/assets/imgHome/xxpt.png";
import img4 from "@/assets/imgHome/wsjd.png";
import img5 from "@/assets/imgHome/index20d.jpg";
import img6 from "@/assets/imgHome/index5.jpg";
import img7 from "@/assets/imgHome/index6.jpg";
import newCenter from "./home/newCenter.vue";
import govenmentOpen from "./home/govenmentOpen.vue";
import documentData from "./home/documentData.vue";
import learningGarden from "./home/learningGarden.vue";
import leadershipSpeech from "./home/leadershipSpeech.vue";
import partyBuildingTrends from "./home/partyBuildingTrends.vue";
import publicInformation from "./home/publicInformation.vue";
import rulesAndRegulations from "./home/rulesAndRegulations.vue";
import rectificationOfWorkStyle from "./home/rectificationOfWorkStyle.vue";
import safeProduction from "./home/safeProduction.vue";
import studyPartyCongress from "./home/studyPartyCongress.vue";
import { articleList } from "@/api/home/home";
import { listColumn, listByColumnId } from "@/api/system/column";
import { ref, nextTick } from "vue";
import { selectArticleByColumnCode } from "@/api/home/home";
import { detailArticle } from "@/api/system/article";

export default {
  name: "YinetoaIndex",
  components: {
    newCenter,
    rulesAndRegulations,
    govenmentOpen,
    documentData,
    learningGarden,
    leadershipSpeech,
    partyBuildingTrends,
    publicInformation,
    rectificationOfWorkStyle,
    safeProduction,
    studyPartyCongress,
  },
  mounted() {
    nextTick(() => {
      this.$nextTick(() => {
        // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
        const target = document.getElementsByClassName("el-tabs__item");
        console.log("target", target);
        const that = this;
        for (let i = 0; i < target.length; i++) {
          target[i].addEventListener("mouseover", () => {
            const tabName = target[i].getAttribute("id");
            console.log("tabName", tabName);
            const tabns = tabName.split("-");
            console.log("tabns", tabns);
            const tabns1 = tabns[1].split(".");
            console.log("tabns1", tabns1);
            that.handleTabClick(tabns1[0], tabns1[1]);
          });
        }
      });
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  data() {
    return {
      images: [],
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      theDirection: this.direction,
      animationDuration: {
        type: Number,
        default: 0, // Set the animation duration in seconds
      },
      newCode: "",
      activeName2: "activeName2.a",
      activeName3: "activeName3.1",
      activeName4: "activeName4.11",
      activeName: "activeName.second",
      activeName1: "activeName1.two",
      newCenterId: "",
      centerDialogVisible: false,
      govenmentOpenId: "",
      rulesRegulationsId: "",
      workDynamicsId: "",
      Ids: [],
      data: [],
      data2: [],
      columnData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 30,
      },
    };
  },

  created() {
    // this.fetchData();
    this.listColumn();
    this.articleList();
    this.selectArticleByColumnCode();
  },
  watch: {},
  methods: {
    imgOpen(image) {
      window.open(image.urlLink, "_blank");
    },
    scroll() {
      var contentBox = document.getElementsByClassName("content-box")[0];
      var scrollBox = document.getElementsByClassName("scroll-box")[0];
      var imgWidth = 300;
      setInterval(() => {
        scrollBox.scrollLeft++;

        //当一张图片恰好滚动至可视区域外
        if (scrollBox.scrollLeft % 310 === 0) {
          var el = contentBox.firstElementChild; //获取处于前面的图片
          contentBox.appendChild(el); //appendChild()具备剪切功能，无需手动删除旧节点
          //获取此时content-box的左内边距，值的形式为'999px'
          var paddingLeftStr = window
            .getComputedStyle(contentBox)
            .getPropertyValue("padding-left");
          var paddingLeft = parseInt(paddingLeftStr); //转化为数值，如： 999
          contentBox.style.paddingLeft = paddingLeft + 300 + "px";
        }
      }, 30);
    },
    setupImageSlider() {
      const imageContainer = this.$refs.imageContainer;
      const imageWidth = imageContainer.children[0].offsetWidth + 10; // Assuming 10px margin

      // Clone the images and append them to the end
      const imagesCount = this.images.length;
      for (let i = 0; i < imagesCount - 1; i++) {
        const clone = imageContainer.children[i].cloneNode(true);
        imageContainer.appendChild(clone);
      }

      // Set the width of the container to accommodate all images
      const containerWidth = imageContainer.children.length * imageWidth;
      imageContainer.style.width = `${containerWidth}px`;

      // Start the animation
      this.startImageSlider(containerWidth);
    },
    startImageSlider(containerWidth) {
      const imageContainer = this.$refs.imageContainer;

      // Set up CSS animation
      imageContainer.style.animation = `scrollImages ${this.animationDuration}s linear infinite`;

      // Reset scroll position to create a loop effect
      let scrollPosition = 0;

      function scroll() {
        scrollPosition = (scrollPosition + 1) % containerWidth;
        imageContainer.style.transform = `translateX(-${scrollPosition}px)`;
        requestAnimationFrame(scroll);
      }

      requestAnimationFrame(scroll);
    },

    getImagesFromData(data) {
      // 在这里解析数据，提取图片信息并返回一个包含图片相关属性的数组
      // 例如，假设数据中的图片信息是以<img>标签的形式呈现的：
      const imagePattern =
        /<img\s*src="([^"]+)"\s*alt="([^"]+)"\s*width="(\d+)"\s*height="(\d+)"\s*\/?>/g;
      const images = [];
      let match;
      while ((match = imagePattern.exec(data)) !== null) {
        const src = match[1];
        const alt = match[2];
        const width = parseInt(match[3], 10);
        const height = parseInt(match[4], 10);
        images.push({ src, alt, width, height });
      }
      return images;
    },
    async detail(id) {
      let { data } = await detailArticle(id);
      // this.dataDetail = data;
      this.$nextTick(() => {
        this.goToDetailPage(data);
      });
    },
    goToDetailPage(row) {
      if (!row.urlLink) {
        this.centerDialogVisible = true;
        this.title1 = row.title;
        this.publishTime = row.publishTime;
        this.createBy = row.createBy;
        this.views = row.views;
        this.responseData = row.content;
      } else if (row.urlLink) {
        window.open(row.urlLink, "_blank");
      }
    },
    async articleList() {
      const { rows } = await articleList({ isCarousel: "1" });
      this.data = rows;
    },
    async selectArticleByColumnCode() {
      const { rows } = await selectArticleByColumnCode({ code: "GDT" });
      const row1 = rows;
      this.data2 = rows.concat(row1);
    },

    handleTabClick(model1, name) {
      console.log(model1, name);
      this[model1] = model1 + "." + name;
    },

    async listColumn() {
      const { rows } = await listColumn(this.queryParams);
      for (let i = 0; i < rows.length; i++) {
        if (rows[i].columnName == "新闻中心") {
          this.newCode = rows[i].columnCode;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.imgList {
  animation: rolling 100s linear infinite;
  position: absolute;
  display: flex;
}

img {
  height: 100px;
  float: left;
  margin-right: 10px;
}

@keyframes rolling {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.scroll-box {
  height: 80px;
  width: 1650px;
  overflow: hidden;
}
.content-box {
  display: flex;
  img {
    height: 150px;
    width: 210px;
  }
}

.image-slider {
  overflow: hidden;
}

.image-container {
  white-space: nowrap;
  display: flex;
  animation: scrollImages 20s linear infinite;
}

.image-container img {
}

// @keyframes scrollImages {
//   from {
//     transform: translateX(0);
//   }
//   to {
//     transform: translateX(-100%);
//   }
// }
::v-deep p img {
  max-width: 790px;
}

.el-tabs-more {
  width: 6.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 14px;
  text-align: right;
  color: #409eff;
  display: block;
  position: absolute;
  top: 0.8rem;
  right: 2rem;
}

::v-deep .el-tabs__item.is-active {
  color: #409eff !important;
  font-weight: 700;
}
::v-deep .el-tabs__item {
  font-weight: 700;
}
::v-deep .el-carousel__indicators--horizontal {
  bottom: 0;
  left: 85%;
  transform: translateX(-50%);
}
::v-deep .el-carousel__indicator--horizontal button {
  width: 8px;
  height: 8px;
  background: #ffffff;
  // border-radius: 50px;
  opacity: 1;
}
::v-deep .el-carousel__indicator.is-active button {
  width: 8px;
  height: 8px;
  background: #34a0f1;
  // border-radius: 50%;
  opacity: 0.8;
}
::v-deep .el-tabs__item {
  font-size: 17px;
  color: #888888;
  padding: 0 10px;
}
::v-deep .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0px;
}
.background-container {
  padding: 25px 30px;
  background-image: url("../assets/img/bj.png"); /* Adjust the path to your local image */
  background-size: cover;
  background-repeat: no-repeat;
}
.demonstration {
  color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
  border-radius: 5px;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  border-radius: 5px;
}
</style>
