<template>
  <div class="wrapper" v-if="bgData">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <!-- 内容ONE -->
      <div class="container">
        <!-- 轮播图 -->
        <div class="swiperone">
          <div class="swiper-container swiper-one">
            <div class="swiper-wrapper">
              <template v-for="(banner,index) in bgData.banner">
                <div class="swiper-slide" :key="index">
                  <img :src="banner.cover" alt />
                  <div class="box">{{banner.title}}</div>
                </div>
              </template>
            </div>
          </div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div>
        </div>
        <!-- 通知公告的box -->
        <div class="right">
          <!-- 通知公告 -->
          <div class="top">
            <div class="b">
              <span>通知公告</span>
              <span>更多>></span>
            </div>
          </div>
          <!-- 列表显示 -->
          <ul>
            <template v-for="(notice,index) in bgData.notice">
              <li :key="index" v-if="index < 8">
                <a href="javascript:void(0);">
                  <span>{{notice.title}}</span>
                  <time>[{{notice.created_at}}]</time>
                </a>
              </li>
            </template>
          </ul>
        </div>
      </div>
      <!-- TWO -->
      <div class="container-two">
        <p class="title">新闻动态</p>
        <div id="boxs">
          <!-- 党组织信息 -->
          <div class="box-child">
            <div class="top-p">
              <div>
                <img class="o" :src="imgUrl.dh" alt />
                <span>区域化党建</span>
              </div>
              <span @click="$jump('newsList')">更多>></span>
            </div>
            <ul class="ult">
              <template v-for="(item,index) in mmData">
                <li :key="index" v-if="index < 3" @click="$jump('newsDetails')">
                  <a href="javascript:void(0);">{{item.text}}</a>
                </li>
              </template>
            </ul>
            <div class="top-p">
              <div>
                <img class="o" :src="imgUrl.gq" alt />
                <span>党组织信息</span>
              </div>
              <span @click="$jump('informationQuery')">更多>></span>
            </div>
            <div class="p">
              <div class="text">
                <p>
                  党的建设即马克思主义建党理论同党的建设实践的统一，马克思主义党的学说的应用。
                  党的建设包括三个方面的含义：
                  <br />一是研究党的建设的理论科学；
                  <br />二是在马克思主义党的学说指导下所进行的党的建设的实践活动；
                  <br />三是作为理论原则与实际行动两者中介的约法规章。
                </p>
              </div>
              <div class="img" @click="$jump('applyFor')">
                <div class="img-box">
                  <img :src="imgUrl.wjx" alt />
                  <span>申请成为党组织</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 统一战线 -->
          <div class="box-child">
            <div class="top-p">
              <div>
                <img class="n" :src="imgUrl.ws" alt />
                <span>统一战线</span>
              </div>
              <span @click="$jump('newsList')">更多>></span>
            </div>
            <ul class="ulo">
              <template v-for="(battle,index) in bgData.battle">
                <li :key="index" v-if="index<9" @click="$jump('newsDetails')">
                  <a href="javascript:void(0);">{{battle.title}}</a>
                </li>
              </template>
            </ul>
          </div>
          <!-- 组织生活 -->
          <div class="box-child">
            <div class="top-p">
              <div>
                <img class="e" :src="imgUrl.zz" alt />
                <span>组织生活</span>
              </div>
              <span @click="$jump('newsList')">更多>></span>
            </div>
            <ul class="ult">
              <template v-for="(organization,index) in bgData.organization">
                <li :key="index" v-if="index < 9" @click="$jump('newsDetails')">
                  <a href="javascript:void(0);">{{organization.title}}</a>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
      <!-- THREE -->
      <div class="container-three">
        <p class="title">@书记</p>
        <div class="box-list">
          <template v-for="(item,index) in sData">
            <div class="list" :key="index" v-if="index<3">
              <img :src="item.img" alt />
              <div class="wen-ben">
                <h3>{{item.title}}</h3>
                <p>{{item.text}}</p>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- FOUR -->
      <div class="container-four">
        <p class="title">党建矩阵</p>
        <div class="swiper-box-list">
          <div id="img-box" class="f-row">
            <template v-for="(links,index) in bgData.links">
              <div class="img-box" :key="index" v-if="index < 8">
                <img :src="links.url" alt />
                <p>{{links.name}}</p>
              </div>
            </template>
            <img
              v-if="leftPos != 0"
              @click="scrollFeeds('left')"
              class="mv-btn left-side"
              :src="imgUrl.left"
              alt
            />
            <img @click="scrollFeeds('right')" class="mv-btn right-side" :src="imgUrl.right" alt />
          </div>
        </div>
        <!-- <div class="swiper-container swiper-two">
            <div class="swiper-wrapper">
              <template v-for="(item,index) in list">
                <div class="swiper-slide" :key="index" v-if="index < 8">
                  <img :src="imgUrl.img3" alt />
                  <span>中国政府网站{{index+1}}</span>
                </div>
              </template>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>-->
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
/* eslint-disable */
import HeaderNav from '../../components/HeaderNav';
/* eslint-disable */
import FooterNav from "../../components/FooterNav";
import Swiper from "swiper";

export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data() {
    return {
      index_num: 0,
      leftPos: 0,
      imgUrl: {
        lb: require("../../../static/img/lb.png"),
        gq: require("../../../static/img/gq.png"),
        ws: require("../../../static/img/ws.png"),
        dh: require("../../../static/img/dh.png"),
        zz: require("../../../static/img/zz.png"),
        wjx: require("../../../static/img/wjx.png"),
        img3: require("../../../static/img/img3.png"),
        right: require("../../../static/img/right.png"),
        left: require("../../../static/img/left.png")
      },
      mmData: [
        { text: "贵安新区拟对部分社会组织进行注销登记", time: "2019-3-14" },
        { text: "四平市民政局以服务平台促社会组织发展", time: "2019-3-14" },
        {
          text:
            "淮北市开展2019年度市级社会组织评淮北市开展2019年度市级社会组织评",
          time: "2019-3-14"
        },
        {
          text:
            "佛山市民政局通报2018年度市级社会佛山市民政局通报2018年度市级社会",
          time: "2019-3-14"
        },
        {
          text:
            "社会组织唱响《我和我的祖国》献礼新社会组织唱响《我和我的祖国》献礼新",
          time: "2019-3-14"
        },
        {
          text:
            "市民政局与市体育总会召开协调会专项市民政局与市体育总会召开协调会专项",
          time: "2019-3-14"
        },
        {
          text:
            '民政部立项中央财政支持"促进肝健康民政部立项中央财政支持"促进肝健康',
          time: "2019-3-14"
        },
        {
          text:
            "静海区召开社会组织参与扶贫帮困活动静海区召开社会组织参与扶贫帮困活动",
          time: "2019-3-14"
        }
      ],
      sData: [
        {
          img: require("../../../static/img/img0.png"),
          title: "信访人对信访事项处理意见不服的,怎么办?",
          text:
            "活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
        },
        {
          img: require("../../../static/img/img1.png"),
          title: "信访人对信访事项处理意见不服的,怎么办?",
          text:
            "活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
        },
        {
          img: require("../../../static/img/img2.png"),
          title: "信访人对信访事项处理意见不服的,怎么办?",
          text:
            "活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
        },
        {
          img: require("../../../static/img/img0.png"),
          title: "信访人对信访事项处理意见不服的,怎么办?",
          text:
            "活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
        }
      ],
      bgData: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    initSwiper() {
      var mySwiper = new Swiper(".swiper-one", {
        loop: true,
        autoplay: {
          delay: 1500
        },

        /** 如果需要前进后退按钮 */
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      });
    },
    scrollFeeds: function (btn) {
      let feeds = document.querySelector(".f-row");
      if (btn === "left") {
        this.leftPos += 460;
        let scrollAmount = 0;
        var slideTimer = setInterval(function () {
          feeds.scrollLeft -= 10;
          scrollAmount += 10;
          if (scrollAmount >= 460) {
            window.clearInterval(slideTimer);
          }
        }, 25);
      } else {
        this.leftPos -= 460;
        let scrollAmount = 0;
        // eslint-disable-next-line no-redeclare
        var slideTimer = setInterval(function () {
          feeds.scrollLeft += 10;
          scrollAmount += 10;
          if (scrollAmount >= 460) {
            window.clearInterval(slideTimer);
          }
        }, 25);
      }
    },
    getData() {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/index',
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          _this.bgData = res.data.data
        } else {
          _this.$Message.error('请求数据有问题！')
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    }
    /*
    initialSwiper() {
      var swiper = new Swiper(".swiper-two", {
        spaceBetween: 20,
        slidesPerView: 18 / 4,
        slidesPerGroup: 7 / 4,
        loopFillGroupWithBlank: true,

        // 如果需要前进后退按钮 
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },

      });
    }
    */
  },
  created() {
    this.getData()
  },
  mounted() {
    this.initSwiper();
    /*this.initialSwiper();*/
  }
};
</script>

<style lang='scss' scoped>
.swiper-wrapper {
  height: auto !important;
}

.wrapper {
  min-width: 1280px;
  // width: 100%;
  box-sizing: border-box;
  position: relative;

  #box {
    width: 1200px;
    padding-top: 40px;
    margin: 0 auto 80px;
    box-sizing: border-box;
    /** FOUR */
    .container-four {
      width: 100%;
      height: 260px;
      padding: 0 40px;
      box-sizing: border-box;
      margin-top: 59px;

      .swiper-box-list {
        width: 100%;
        height: 250px;
        box-sizing: border-box;
        padding: 0 42px 0 0px;
        position: relative;

        .mv-btn {
          cursor: pointer;
          height: 60px;
          width: 60px;
          border-radius: 18px;
          z-index: 20;
          position: absolute;
          &.left-side {
            left: 0px;
            top: 60px;
          }
          &.right-side {
            right: 40px;
            top: 60px;
          }
        }

        #img-box {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: flex-start;
          overflow-y: scroll;

          &::-webkit-scrollbar {
            display: none;
          }

          .img-box {
            width: 239px;
            height: 196px;
            background-color: #ffffff;
            box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.5);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-right: 20px;

            img {
              width: 239px;
              height: 130px;
              border-radius: 5px 5px 0px 0px;
            }

            p {
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: bold;
              font-stretch: normal;
              line-height: 60px;
              letter-spacing: 0px;
              color: #333333;
            }
          }
        }

        /*
      .swiper-button-prev.swiper-button-disabled {
        opacity: 0;
        cursor: auto;
        pointer-events: none;
      }

      .swiper-button-next.swiper-button-disabled {
        opacity: 1;
        cursor: auto;
        pointer-events: none;
      }

      .swiper-button-prev {
        outline: none;
        position: absolute;
        top: 50%;
        left: 0%;
        width: 60px;
        height: 60px;
        margin-top: -22px;
        z-index: 10;
        cursor: pointer;
        background-image: url("../../../static//img/left.png");
        background-size: 60px 60px;
        background-position: center;
        background-repeat: no-repeat;
      }

      .swiper-button-next {
        outline: none;
        position: absolute;
        top: 50%;
        right: 0%;
        width: 60px;
        height: 60px;
        margin-top: -22px;
        z-index: 10;
        cursor: pointer;
        background-image: url("../../../static//img/right.png");
        background-size: 60px 60px;
        background-position: center;
        background-repeat: no-repeat;
      }

      .swiper-slide {
        width: 239px !important;
        background-color: #ffffff;
        box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.12);
        border-radius: 5px;
        text-align: center;
        margin-right: 20px;
        display: flex;
        flex-direction: column;

        img {
          width: 239px;
          height: 130px;
          background-color: #ffffff;
          border-radius: 5px 5px 0px 0px;
        }

        span {
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 60px;
          letter-spacing: 0px;
          color: #333333;
        }
      }
      */
      }

      .title {
        font-family: "MicrosoftYaHei";
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-bottom: 30px;
      }
    }

    /** THREE */
    .container-three {
      width: 100%;
      height: 848px;
      padding: 0 40px;
      box-sizing: border-box;
      margin-top: 59px;

      .box-list {
        width: 100%;
        height: 794px;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 0 60px 0 8px;

        .list {
          width: 1132px;
          height: 240px;
          box-sizing: border-box;
          padding: 33px 8px 26px 12px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f8f8f8;
          border-top: 1px solid #f8f8f8;

          &:nth-last-child(1) {
            border-bottom: 0px solid #f8f8f8;
          }

          img {
            width: 300px;
            height: 180px;
            border-radius: 5px;
          }

          .wen-ben {
            width: 763px;

            h3 {
              font-family: "MicrosoftYaHei";
              font-size: 22px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 1px;
              color: #333333;
              margin: 17px 0 36px 0;
            }

            p {
              font-family: MicrosoftYaHei;
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 30px;
              letter-spacing: 1px;
              color: #666666;
            }
          }
        }
      }

      .title {
        font-family: "MicrosoftYaHei";
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-bottom: 30px;
      }
    }

    /** TWO */
    .container-two {
      width: 100%;
      height: 482px;
      padding: 0 40px;
      box-sizing: border-box;
      margin-top: 59px;

      #boxs {
        width: 100%;
        height: 428px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .box-child {
          width: 365px;
          height: 428px;
          background-color: #ffffff;
          box-shadow: 0px 10px 8px 2px rgba(173, 167, 167, 0.08);
          border-radius: 10px;
          box-sizing: border-box;
          padding: 0 14px;

          .ult {
            margin-top: 29px;
            /*
            width: 303px;
            height: 297px;
            */

            li {
              a {
                color: #333333;
              }

              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 33px;
              letter-spacing: 0px;
              overflow: hidden;
              -o-text-overflow: clip;
              text-overflow: clip;
              white-space: nowrap;
            }
          }

          .ulo {
            margin-top: 29px;
            width: 321px;
            height: 297px;

            li {
              a {
                color: #333333;
              }

              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 33px;
              letter-spacing: 0px;
              overflow: hidden;
              -o-text-overflow: clip;
              text-overflow: clip;
              white-space: nowrap;
            }
          }

          .p {
            margin-top: 19px;

            .img {
              width: 309px;
              display: flex;
              justify-content: flex-end;
              cursor: pointer;

              .img-box {
                width: 131px;
                height: 27px;
                background-image: linear-gradient(
                  35deg,
                  #f82747 0%,
                  #fe5b2c 100%
                );
                border-radius: 25px;
                text-align: center;
                line-height: 27px;
                position: relative;

                img {
                  width: 15px;
                  height: 15px;
                  position: absolute;
                  left: -5%;
                  top: 24%;
                }

                span {
                  font-family: "MicrosoftYaHei";
                  font-size: 14px;
                  font-weight: bold;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #fbfffb;
                  text-shadow: 2px 4px 7px 0px rgba(175, 14, 39, 0.83);
                }
              }
            }

            .text {
              width: 309px;
              height: 127px;

              p {
                width: 309px;
                height: 92px;
                overflow: hidden;
                font-family: "MicrosoftYaHei";
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 33px;
                letter-spacing: 0px;
                color: #333333;
              }
            }
          }

          .top-p {
            width: 100%;
            height: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ccc;

            span {
              font-family: "MicrosoftYaHei";
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: -1px;
              color: #999999;
            }

            div {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .o {
                width: 27px;
                height: 24px;
              }

              .n {
                width: 35px;
                height: 23px;
              }

              .e {
                width: 27px;
                height: 26px;
              }

              span {
                margin-left: 16px;
                font-family: "MicrosoftYaHei";
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #666666;
              }
            }
          }
        }
      }

      .title {
        margin-bottom: 30px;
        font-family: "MicrosoftYaHei";
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }

    /** ONE */
    .container {
      width: 100%;
      // padding: 0 40px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .right {
        width: 491px;
        height: 400px;

        ul {
          height: 333px;
          margin-top: 28px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          li {
            width: 491px;

            a {
              display: flex;
              justify-content: space-between;
              align-items: center;

              time {
                font-family: "MicrosoftYaHei";
                font-size: 17px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #999999;
              }

              span {
                display: inline-block;
                width: 329px;
                font-family: "MicrosoftYaHei";
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #333333;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .top {
          border-bottom: 1px solid #ccc;
          padding-bottom: 20px;
          box-sizing: border-box;
          width: 491px;
          height: 40px;
          display: flex;
          align-items: flex-start;

          .b {
            width: 100%;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            & > span:first-child {
              font-family: "MicrosoftYaHei";
              font-size: 24px;
              font-weight: bold;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #333333;
            }

            & > span:last-child {
              font-family: "MicrosoftYaHei";
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 10px;
              letter-spacing: -1px;
              color: #999999;
            }
          }
        }
      }

      .swiperone {
        position: relative;

        .swiper-one {
          width: 660px;
          height: 400px;
          box-sizing: border-box;

          .swiper-slide {
            width: 660px;
            height: 400px;
            position: relative;

            .box {
              width: 660px;
              height: 80px;
              background-color: rgba($color: #000000, $alpha: 0.7);
              position: absolute;
              bottom: 0%;
              left: 0%;
              z-index: 5;
              text-align: center;

              font-family: "MicrosoftYaHei";
              font-size: 20px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 80px;
              letter-spacing: -1px;
              color: #ffffff;
            }

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

        .swiper-button-prev {
          position: absolute;
          top: 93%;
          left: 4%;
          width: 13px;
          height: 23px;
          margin-top: -22px;
          z-index: 10;
          cursor: pointer;
          background-size: 13px 23px;
          background-position: center;
          background-repeat: no-repeat;
          outline: none;
        }

        .swiper-button-next {
          position: absolute;
          top: 93%;
          right: 4%;
          width: 13px;
          height: 23px;
          margin-top: -22px;
          z-index: 10;
          cursor: pointer;
          background-size: 13px 23px;
          background-position: center;
          background-repeat: no-repeat;
          outline: none;
        }
      }
    }
  }
}
</style>
