<template>
  <div>
    <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: 410px;
                        "
                      >
                        {{ 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;
              padding-top: 5px;
              position: relative;
            "
          >
            <div>
              <el-tabs
                @tab-click="handleClick"
                v-model="activeName"
                class="demo-tabs"
              >
                <el-tab-pane
                  v-for="item in OneColumn"
                  :label="item.columnName"
                  :name="item.columnCode + '.activeName'"
                  :key="item.columnCode"
                  ref="tabs"
                >
                  <div style="display: flex">
                    <ul style="padding: 0px">
                      <li
                        class="hover-li"
                        v-for="(item, index) in data1.slice(0, 8)"
                        :key="index"
                        style="
                          display: flex;
                          height: 40px;
                          line-height: 40px;
                          padding: 0px;
                          position: relative;
                          border-bottom: 1px dashed #e5e5e5;
                        "
                      >
                        <div
                          id="div_1"
                          ref="div1"
                          style="width: 40vw; cursor: pointer"
                          @click="detail(item.id)"
                        >
                          <span
                            :style="{
                              backgroundColor:
                                item.isRead == 1 ? '#0dd068' : '#d90013',
                            }"
                            style="
                              width: 6px;
                              height: 6px;

                              display: inline-block;
                              border-radius: 50%;
                              margin-bottom: 17px;
                              margin-right: 10px;
                            "
                          ></span>
                          <span
                            :style="{
                              color: item.isRead == 1 ? '#7a7373' : 'black',
                            }"
                            style="
                              display: inline-block;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              font-size: 15px;
                              max-width: 30vw;
                              text-align: left;
                            "
                            :data-tooltip="item.title"
                            class="hover-li-div"
                            >{{ item.title }}</span
                          >
                          <span
                            style="
                              display: inline-block;
                              height: 40px;
                              line-height: 40px;
                              margin-left: 10px;
                            "
                          >
                            <el-icon
                              style="
                                margin-right: 40px;
                                position: absolute;
                                top: 0px;

                                font-size: 17px;
                                color: #409eff;
                                font-weight: 700;
                              "
                              v-if="item.urlLink != null"
                            >
                              <Link
                                style="
                                  width: 20px;
                                  height: 20px;
                                  margin-top: 20px;
                                "
                              />
                            </el-icon>
                          </span>

                          <span
                            style="
                              display: inline-block;
                              float: right;
                              font-size: 15px;
                              text-align: right;
                              margin-right: 2.2vw;
                              color: #9d9d9d;
                              margin-top: 1px;
                            "
                            >{{
                              parseTime(item.publishTime, "{y}-{m}-{d} ")
                            }}</span
                          >
                          <p id="div_2">
                            {{ item.title }}
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- <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-moreOne"
            >
              <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>
      <!-- <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>
    </div> -->
      <el-row :gutter="10">
        <el-col :span="12">
          <div
            style="
              margin-top: 10px;
              width: 100%;
              background-color: white;
              padding: 15px;
              height: 435px;
              display: inline-block;
              border-radius: 5px;
              position: relative;
            "
          >
            <div style="border-bottom: 1px solid #1575cc">
              <div
                style="
                  height: 35px;
                  width: 100px;
                  background-color: #1575cc;
                  color: white;
                  line-height: 35px;
                  text-align: center;
                "
              >
                党建动态
              </div>
            </div>

            <!-- <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> -->
            <div style="margin-top: 3px">
              <el-tabs
                v-model="activeName1"
                @tab-click="handleClick1"
                class="demo-tabs"
              >
                <el-tab-pane
                  v-for="item in TwoColumn"
                  :label="item.columnName"
                  :name="item.columnCode + '.activeName1'"
                  :key="item.columnCode"
                >
                  <div style="display: flex">
                    <ul style="padding: 0px; margin: 5px">
                      <li
                        class="hover-li"
                        v-for="(item, index) in dataTwo.slice(0, 8)"
                        :key="index"
                        style="
                          display: flex;
                          height: 40px;
                          line-height: 40px;
                          padding: 0px;
                          position: relative;
                          border-bottom: 1px dashed #e5e5e5;
                        "
                      >
                        <div
                          style="width: 40vw; cursor: pointer"
                          @click="detail(item.id)"
                        >
                          <span
                            :style="{
                              backgroundColor:
                                item.isRead == 1 ? '#0dd068' : '#d90013',
                            }"
                            style="
                              width: 6px;
                              height: 6px;

                              display: inline-block;
                              border-radius: 50%;
                              margin-bottom: 17px;
                              margin-right: 10px;
                            "
                          ></span>
                          <span
                            :style="{
                              color: item.isRead == 1 ? '#7a7373' : 'black',
                            }"
                            style="
                              display: inline-block;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              font-size: 15px;
                              max-width: 30vw;
                              text-align: left;
                            "
                            class="hover-li-div"
                            >{{ item.title }}</span
                          >
                          <span
                            style="
                              display: inline-block;
                              height: 40px;
                              line-height: 40px;
                              margin-left: 10px;
                            "
                          >
                            <el-icon
                              style="
                                margin-right: 40px;
                                position: absolute;
                                top: 0px;

                                font-size: 17px;
                                color: #409eff;
                                font-weight: 700;
                              "
                              v-if="item.urlLink != null"
                            >
                              <Link
                                style="
                                  width: 20px;
                                  height: 20px;
                                  margin-top: 20px;
                                "
                              />
                            </el-icon>
                          </span>

                          <span
                            style="
                              display: inline-block;
                              float: right;
                              font-size: 15px;
                              text-align: right;
                              margin-right: 2.2vw;
                              color: #9d9d9d;
                              margin-top: 1px;
                            "
                            >{{
                              parseTime(item.publishTime, "{y}-{m}-{d} ")
                            }}</span
                          >
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <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: 435px;
              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> -->
            <div style="border-bottom: 1px solid #1575cc">
              <div
                style="
                  height: 35px;
                  width: 100px;
                  background-color: #1575cc;
                  color: white;
                  line-height: 35px;
                  text-align: center;
                "
              >
                外埠新闻
              </div>
            </div>
            <div style="margin-top: 3px">
              <el-tabs
                v-model="activeName2"
                @tab-click="handleClick2"
                class="demo-tabs"
              >
                <el-tab-pane
                  v-for="item in ThreeColumn"
                  :label="item.columnName"
                  :name="item.columnCode + '.activeName2'"
                  :key="item.columnCode"
                >
                  <div style="display: flex">
                    <ul style="padding: 0px; margin: 5px">
                      <li
                        class="hover-li"
                        v-for="(item, index) in dataThree.slice(0, 8)"
                        :key="index"
                        style="
                          display: flex;
                          height: 40px;
                          line-height: 40px;
                          padding: 0px;
                          position: relative;
                          border-bottom: 1px dashed #e5e5e5;
                        "
                      >
                        <div
                          style="width: 40vw; cursor: pointer"
                          @click="detail(item.id)"
                        >
                          <span
                            :style="{
                              backgroundColor:
                                item.isRead == 1 ? '#0dd068' : '#d90013',
                            }"
                            style="
                              width: 6px;
                              height: 6px;

                              display: inline-block;
                              border-radius: 50%;
                              margin-bottom: 17px;
                              margin-right: 10px;
                            "
                          ></span>
                          <span
                            :style="{
                              color: item.isRead == 1 ? '#7a7373' : 'black',
                            }"
                            style="
                              display: inline-block;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              font-size: 15px;
                              max-width: 30vw;
                              text-align: left;
                            "
                            class="hover-li-div"
                            >{{ item.title }}</span
                          >
                          <span
                            style="
                              display: inline-block;
                              height: 40px;
                              line-height: 40px;
                              margin-left: 10px;
                            "
                          >
                            <el-icon
                              style="
                                margin-right: 40px;
                                position: absolute;
                                top: 0px;

                                font-size: 17px;
                                color: #409eff;
                                font-weight: 700;
                              "
                              v-if="item.urlLink != null"
                            >
                              <Link
                                style="
                                  width: 20px;
                                  height: 20px;
                                  margin-top: 20px;
                                "
                              />
                            </el-icon>
                          </span>

                          <span
                            style="
                              display: inline-block;
                              float: right;
                              font-size: 15px;
                              text-align: right;
                              margin-right: 2.2vw;
                              color: #9d9d9d;
                              margin-top: 1px;
                            "
                            >{{
                              parseTime(item.publishTime, "{y}-{m}-{d} ")
                            }}</span
                          >
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <router-link
              :to="{ path: '/more', query: { columnID: activeName2 } }"
              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: 435px;
              display: inline-block;
              border-radius: 5px;
              position: relative;
            "
          >
            <div style="border-bottom: 1px solid #1575cc">
              <div
                style="
                  height: 35px;
                  width: 100px;
                  background-color: #1575cc;
                  color: white;
                  line-height: 35px;
                  text-align: center;
                "
              >
                党风廉政
              </div>
            </div>
            <div style="margin-top: 3px">
              <tabsAGods></tabsAGods>
              <!-- <el-tabs
              v-model="activeName3"
              @tab-click="handleClick3"
              class="demo-tabs"
            >
              <el-tab-pane
                v-for="item in FourColumn"
                :label="item.columnName"
                :name="item.columnCode + '.activeName3'"
                :key="item.columnCode"
              >
                <div style="display: flex">
                  <ul style="padding: 0px; margin: 5px">
                    <li
                      class="hover-li"
                      v-for="(item, index) in dataFour.slice(0, 8)"
                      :key="index"
                      style="
                        display: flex;
                        height: 40px;
                        line-height: 40px;
                        padding: 0px;
                        position: relative;
                        border-bottom: 1px dashed #e5e5e5;
                      "
                    >
                      <div
                        style="width: 40vw; cursor: pointer"
                        @click="detail(item.id)"
                      >
                        <span
                          :style="{
                            backgroundColor:
                              item.isRead == 1 ? '#0dd068' : '#d90013',
                          }"
                          style="
                            width: 6px;
                            height: 6px;

                            display: inline-block;
                            border-radius: 50%;
                            margin-bottom: 17px;
                            margin-right: 10px;
                          "
                        ></span>
                        <span
                          :style="{
                            color: item.isRead == 1 ? '#7a7373' : 'black',
                          }"
                          style="
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 15px;
                            max-width: 25vw;
                            text-align: left;
                          "
                          class="hover-li-div"
                          >{{ item.title }}</span
                        >
                        <span
                          style="
                            display: inline-block;
                            height: 40px;
                            line-height: 40px;
                            margin-left: 10px;
                          "
                        >
                          <el-icon
                            style="
                              margin-right: 40px;
                              position: absolute;
                              top: 0px;

                              font-size: 17px;
                              color: #409eff;
                              font-weight: 700;
                            "
                            v-if="item.urlLink != null"
                          >
                            <Link
                              style="
                                width: 20px;
                                height: 20px;
                                margin-top: 20px;
                              "
                            />
                          </el-icon>
                        </span>

                        <span
                          style="
                            display: inline-block;
                            float: right;
                            font-size: 15px;
                            text-align: right;
                            margin-right: 2.2vw;
                            color: #9d9d9d;
                            margin-top: 1px;
                          "
                          >{{
                            parseTime(item.publishTime, "{y}-{m}-{d} ")
                          }}</span
                        >
                      </div>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
            </el-tabs> -->
            </div>
          </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: 435px;
                margin-top: 13px;
                display: inline-block;
                border-radius: 5px;
                position: relative;
              "
            >
              <div style="border-bottom: 1px solid #1575cc">
                <div
                  style="
                    height: 35px;
                    width: 100px;
                    background-color: #1575cc;
                    color: white;
                    line-height: 35px;
                    text-align: center;
                  "
                >
                  学习园地
                </div>
              </div>
              <div style="margin-top: 3px">
                <el-tabs
                  v-model="activeName4"
                  @tab-click="handleClick4"
                  class="demo-tabs"
                >
                  <el-tab-pane
                    v-for="item in FiveColumn"
                    :label="item.columnName"
                    :name="item.columnCode + '.activeName4'"
                    :key="item.columnCode"
                  >
                    <div style="display: flex">
                      <ul style="padding: 0px; margin: 5px">
                        <li
                          class="hover-li"
                          v-for="(item, index) in dataFive.slice(0, 8)"
                          :key="index"
                          style="
                            display: flex;
                            height: 40px;
                            line-height: 40px;
                            padding: 0px;
                            position: relative;
                            border-bottom: 1px dashed #e5e5e5;
                          "
                        >
                          <div
                            style="width: 40vw; cursor: pointer"
                            @click="detail(item.id)"
                          >
                            <span
                              :style="{
                                backgroundColor:
                                  item.isRead == 1 ? '#0dd068' : '#d90013',
                              }"
                              style="
                                width: 6px;
                                height: 6px;

                                display: inline-block;
                                border-radius: 50%;
                                margin-bottom: 17px;
                                margin-right: 10px;
                              "
                            ></span>
                            <span
                              :style="{
                                color: item.isRead == 1 ? '#7a7373' : 'black',
                              }"
                              style="
                                display: inline-block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: 15px;
                                max-width: 30vw;
                                text-align: left;
                              "
                              class="hover-li-div"
                              >{{ item.title }}</span
                            >
                            <span
                              style="
                                display: inline-block;
                                height: 40px;
                                line-height: 40px;
                                margin-left: 10px;
                              "
                            >
                              <el-icon
                                style="
                                  margin-right: 40px;
                                  position: absolute;
                                  top: 0px;

                                  font-size: 17px;
                                  color: #409eff;
                                  font-weight: 700;
                                "
                                v-if="item.urlLink != null"
                              >
                                <Link
                                  style="
                                    width: 20px;
                                    height: 20px;
                                    margin-top: 20px;
                                  "
                                />
                              </el-icon>
                            </span>

                            <span
                              style="
                                display: inline-block;
                                float: right;
                                font-size: 15px;
                                text-align: right;
                                margin-right: 2.2vw;
                                color: #9d9d9d;
                                margin-top: 1px;
                              "
                              >{{
                                parseTime(item.publishTime, "{y}-{m}-{d} ")
                              }}</span
                            >
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>

              <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="70%"
        style="height: 100%"
        title="文章详情"
        :fullscreen="fullscreen"
        :append-to-body="true"
      >
        <div
          @click="Enlarge"
          style="float: right; position: relative; top: -60px; right: 30px"
        >
          <el-icon><FullScreen /></el-icon>
        </div>
        <div
          @click="Enlarge1"
          style="float: right; position: relative; top: -60px; right: 50px"
        >
          <el-icon><Minus /></el-icon>
        </div>
        <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: 870px;
                    margin: 0 auto;
                    border: 2px solid #ececec;
                    padding: 15px 10px;
                  "
                >
                  <div
                    style="
                      border: 3px solid #f8f8f8;
                      min-height: 1000px;
                      width: 845px;
                      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: 15px;
                          height: 30px;
                          text-align: center;
                          line-height: 30px;
                          width: 700px;
                          display: inline-block;
                          padding-left: 120px;
                        "
                      >
                        <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="
                          float: right;
                          margin-right: 20px;
                          margin-top: 3px;
                        "
                      >
                        <el-button
                          @click="miniFontSize"
                          size="small"
                          style="padding: 5.5px"
                          >A-</el-button
                        >
                        <el-button
                          @click="addFontSize"
                          size="small"
                          style="padding: 4px"
                          >A+</el-button
                        >
                      </div>
                      <div style="padding: 30px 15px; background-color: white">
                        <div
                          :style="{ fontSize: fontSize + 'px' }"
                          v-html="responseData"
                        ></div>
                        <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 v-for="item in fjFiles" :key="item">
                          <el-icon style="color: #1b6ef3; font-size: 26px">
                            <Paperclip style="padding-top: 15px" /> </el-icon
                          ><a
                            style="color: #1b6ef3; font-size: 16px"
                            target="_blank"
                            :href="item.url"
                            >{{ item.name }}</a
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="grid-content ep-bg-purple" />
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </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 tabsAGods from "./tabsAGods.vue";
import { articleList } from "@/api/home/home";
import { listColumn, listByColumnId } from "@/api/system/column";
import { ref, nextTick } from "vue";
import {
  selectArticleByColumnCode,
  moduleCode,
  moduleList,
} 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,
    tabsAGods,
  },

  watch: {
    defaultTab(newVal) {
      this.activeName = newVal + ".activeName"; // 设置第一个标签页为默认选中
      this.Code = newVal;
      this.selectArticleByColumnCode();
    },
    defaultTab1(newVal) {
      this.activeName1 = newVal + ".activeName1"; // 设置第一个标签页为默认选中
      this.Code1 = newVal;

      this.selectArticleByColumnCode1();
    },
    defaultTab2(newVal) {
      this.activeName2 = newVal + ".activeName2"; // 设置第一个标签页为默认选中
      this.Code2 = newVal;

      this.selectArticleByColumnCode2();
    },
    // defaultTab3(newVal) {
    //   this.activeName3 = newVal + ".activeName3"; // 设置第一个标签页为默认选中
    //   this.Code3 = newVal;
    //   setTimeout(() => {
    //     this.selectArticleByColumnCode3();
    //   }, 500);
    // },
    defaultTab4(newVal) {
      this.activeName4 = newVal + ".activeName4"; // 设置第一个标签页为默认选中
      this.Code4 = newVal;

      this.selectArticleByColumnCode4();
    },
  },
  computed: {
    defaultTab() {
      return this.OneColumn.length > 0 ? this.OneColumn[0].columnCode : "";
    },
    defaultTab1() {
      return this.TwoColumn.length > 0 ? this.TwoColumn[0].columnCode : "";
    },
    defaultTab2() {
      return this.ThreeColumn.length > 0 ? this.ThreeColumn[0].columnCode : "";
    },
    // defaultTab3() {
    //   return this.FourColumn.length > 0 ? this.FourColumn[0].columnCode : "";
    // },
    defaultTab4() {
      return this.FiveColumn.length > 0 ? this.FiveColumn[0].columnCode : "";
    },
  },

  mounted() {
    // setTimeout(() => {
    //   console.log("this.$refs.tabs", this.$refs.tabs);
    //   const tabsElement = this.$refs.tabs[0].$el;
    //   tabsElement.addEventListener("mouseover", this.handleTabsMouseOver);
    // }, 1500);
  },

  beforeDestroy() {
    // clearInterval(this.timer);
    // this.timer = null;
    // const tabsElement = this.$refs.tabs.$el;
    // tabsElement.removeEventListener("mouseover", this.handleTabsMouseOver);
  },
  data() {
    return {
      activeHoverTab: -1,
      fontSize: 18.0,
      data1: [],
      dataTwo: [],
      dataThree: [],
      fjFiles: [],
      // dataFour: [],
      dataFive: [],
      moduleOne: undefined,
      moduleTwo: undefined,
      moduleThree: undefined,
      // moduleFour: undefined,
      moduleFive: undefined,
      images: [],
      OneColumn: [],
      TwoColumn: [],
      ThreeColumn: [],
      FourColumn: [],
      FiveColumn: [],

      moduleLists: [],
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      theDirection: this.direction,
      animationDuration: {
        type: Number,
        default: 0, // Set the animation duration in seconds
      },
      newCode: "",
      activeName2: "",
      // activeName3: "DJDT.activeName3",
      activeName4: "",
      activeName: "",
      activeName1: "",
      newCenterId: "",
      Code: "",
      Code1: "",
      Code2: "",
      Code3: "",
      Code4: "",
      Code5: "GDT",
      centerDialogVisible: false,
      fullscreen: true,
      govenmentOpenId: "",
      rulesRegulationsId: "",
      workDynamicsId: "",
      Ids: [],
      data: [],
      data2: [],
      columnData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 30,
      },
    };
  },

  created() {
    // this.fetchData();
    this.moduleList();
    this.articleList();
    this.selectArticleByColumnCode5();
  },
  methods: {
    Enlarge() {
      this.fullscreen = true;
    },
    Enlarge1() {
      this.fullscreen = false;
    },
    handleTabsMouseOver(event) {
      // 通过 event.target 判断鼠标悬停的元素，然后根据需要修改 activeName
      // 示例中假设 el-tab-pane 的 class 为 'el-tab-pane'
      const tabPaneElement = event.target.closest(".el-tab-pane");
      if (tabPaneElement) {
        const index = Array.from(tabPaneElement.parentNode.children).indexOf(
          tabPaneElement
        );
        this.activeName = this.OneColumn[index].columnCode;
      }
    },

    setActiveHoverTab(index) {
      this.activeHoverTab = index;
      this.activeName = this.OneColumn[index].columnCode;
    },
    clearActiveHoverTab() {
      this.activeHoverTab = -1;
    },
    addFontSize() {
      if (this.fontSize < 25.0) {
        this.fontSize = this.fontSize + 1.0;
      }
    },
    miniFontSize() {
      if (this.fontSize > 14.0) {
        this.fontSize = this.fontSize - 1.0;
      }
    },

    handleClick(tab, event) {
      this.Code = tab.props.name.split(".")[0];
      this.selectArticleByColumnCode();
    },
    handleClick1(tab, event) {
      this.Code1 = tab.props.name.split(".")[0];
      this.selectArticleByColumnCode1();
    },
    handleClick2(tab, event) {
      this.Code2 = tab.props.name.split(".")[0];
      this.selectArticleByColumnCode2();
    },
    // handleClick3(tab, event) {
    //   this.Code3 = tab.props.name;
    //   this.selectArticleByColumnCode3();
    // },
    handleClick4(tab, event) {
      this.Code4 = tab.props.name.split(".")[0];
      this.selectArticleByColumnCode4();
    },
    //编码
    async selectArticleByColumnCode() {
      const { rows } = await selectArticleByColumnCode({
        code: this.Code,
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      this.data1 = rows;
    },
    async selectArticleByColumnCode1() {
      const { rows } = await selectArticleByColumnCode({
        code: this.Code1,
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      this.dataTwo = rows;
    },
    async selectArticleByColumnCode2() {
      const { rows } = await selectArticleByColumnCode({
        code: this.Code2,
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      this.dataThree = rows;
    },
    async selectArticleByColumnCode3() {
      const { rows } = await selectArticleByColumnCode({
        code: this.Code3,
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      this.dataFour = rows;
    },
    async selectArticleByColumnCode4() {
      const { rows } = await selectArticleByColumnCode({
        code: this.Code4,
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      this.dataFive = rows;
    },
    async selectArticleByColumnCode5() {
      const { rows } = await selectArticleByColumnCode({
        code: this.Code5,
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      const row1 = rows;
      this.data2 = rows.concat(row1);
    },
    // 模块栏目
    async moduleCode1() {
      let res = await moduleCode(this.moduleOne);
      this.OneColumn = res.data.columns;
    },
    async moduleCode2() {
      let res = await moduleCode(this.moduleTwo);
      this.TwoColumn = res.data.columns;
    },
    async moduleCode3() {
      let res = await moduleCode(this.moduleThree);
      this.ThreeColumn = res.data.columns;
    },
    // async moduleCode4() {
    //   let res = await moduleCode(this.moduleFour);
    //   this.FourColumn = res.data.columns;
    // },
    async moduleCode5() {
      let res = await moduleCode(this.moduleFive);
      this.FiveColumn = res.data.columns;
    },
    imgOpen(image) {
      window.open(image.urlLink, "_blank");
    },

    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);
      });
    },

    ptToPx(pt) {
      return (pt * 96) / 72;
    },
    goToDetailPage(row) {
      if (!row.urlLink) {
        this.centerDialogVisible = true;
        this.title1 = row.title;
        this.fjFiles = row.fjFiles;
        this.publishTime = row.publishTime;
        this.createBy = row.createBy;
        this.views = row.views;
        this.responseData = row.content;

        // console.log(this.responseData);
      } else if (row.urlLink) {
        window.open(row.urlLink, "_blank");
      }

      this.selectArticleByColumnCode();
      this.selectArticleByColumnCode1();
      this.selectArticleByColumnCode2();
      // this.selectArticleByColumnCode3();
      this.selectArticleByColumnCode4();
    },
    async moduleList() {
      let res = await moduleList();
      this.moduleLists = res;
      this.moduleOne = res[0].code;

      this.moduleTwo = res[1].code;
      this.moduleThree = res[2].code;
      // this.moduleFour = res[3].code;
      this.moduleFive = res[3].code;
      this.moduleCode1();
      this.moduleCode2();
      this.moduleCode3();
      // this.moduleCode4();
      this.moduleCode5();
    },
    async articleList() {
      const { rows } = await articleList({ isCarousel: "1" });
      this.data = rows;
      nextTick(() => {
        this.$nextTick(() => {
          // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
          const target = document.getElementsByClassName("el-tabs__item");
          const that = this;
          for (let i = 0; i < target.length; i++) {
            target[i].addEventListener("mouseover", () => {
              const tabName = target[i].getAttribute("id");
              const tabns = tabName.split("-");
              const tabns1 = tabns[1].split(".");
              that.handleTabClick(tabns1[1], tabns1[0]);
            });
          }
        });
      });
    },

    // handleTabMouseOver(event) {
    //   const targetTab = event.target.closest(".el-tabs__item");
    //   console.log(targetTab);
    //   console.log(targetTab.getAttribute("aria-controls").slice(5, 10));
    //   // this.activeName = targetTab.getAttribute("aria-controls").slice(5, 8);
    //   // this.Code = this.activeName;
    //   // this.selectArticleByColumnCode();
    //   if (targetTab) {
    //     const tabIndex =
    //       parseInt(targetTab.getAttribute("aria-controls"), 10) - 1;
    //     console.log(targetTab.getAttribute("aria-controls"));
    //     console.log(tabIndex);
    //     if (tabIndex >= 0 && tabIndex < this.OneColumn.length) {
    //       this.activeName = this.OneColumn[tabIndex].columnCode;
    //       console.log(this.activeName);
    //     }
    //   }
    // },
    changeTabOnMouseOver(index) {
      this.activeName = this.OneColumn[index].columnCode;
    },
    // changeTabOnMouseOver(index) {
    //   // 鼠标滑过时切换标签页
    //   this.activeName = this.OneColumn[index].columnCode;
    //   console.log(this.activeName);
    //   // this.Code = columnCode;
    //   // this.selectArticleByColumnCode();
    // },
    handleTabClick(model1, name) {
      this[model1] = name + "." + model1;
      if (model1 == "activeName") {
        this.Code = name;
        this.selectArticleByColumnCode();
      } else if (model1 == "activeName1") {
        this.Code1 = name;
        this.selectArticleByColumnCode1();
      } else if (model1 == "activeName2") {
        this.Code2 = name;
        this.selectArticleByColumnCode2();
      } else if (model1 == "activeName4") {
        this.Code4 = name;
        this.selectArticleByColumnCode4();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#div_1 {
  position: relative;
}
p {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid black;
  font-size: 13px;
  padding: 0;
  margin: 0;
  height: 25px;
  line-height: 25px;
  background-color: white;
  display: none; /* 隐藏 */
  pointer-events: none; /* 不对鼠标事件作出反应 */
}
.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: #1575cc;
  display: block;
  position: absolute;
  top: 3.5rem;
  right: 2rem;
}
.el-tabs-moreOne {
  width: 6.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 14px;
  text-align: right;
  color: #1575cc;
  display: block;
  position: absolute;
  top: 0.5rem;
  right: 2rem;
}

::v-deep .el-tabs__item.is-active {
  color: #1575cc !important;
  // font-weight: 700;
  font-size: 15px;
}

::v-deep .el-tabs__item {
  // font-weight: 700;
  font-size: 15px !important;
}

::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: #1575cc;
  // border-radius: 50%;
  opacity: 0.8;
}

::v-deep .el-tabs__item {
  font-size: 17px;
  color: #888888;
  padding: 0 10px;
  width: 100px;
  text-align: center;
}

::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;
}
::v-deep.hover-li-div:hover {
  color: #34a0f1 !important;
}
.hover-li-div {
  position: relative;
}

.hover-li-div::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
::v-deep .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #1575cc;
  z-index: 1;
  transition: width var(--el-transition-duration)
      var(--el-transition-function-ease-in-out-bezier),
    transform var(--el-transition-duration)
      var(--el-transition-function-ease-in-out-bezier);
  list-style: none;
}
::v-deep .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px !important;
  background-color: var(--el-border-color-light);
  z-index: var(--el-index-normal);
}
.hover-li-div:hover::before {
  opacity: 1;
}
::v-deep .el-tabs__item.is-disabled {
  color: var(--el-disabled-text-color);
  cursor: default;
}
</style>
