<template>
  <div>
    <div class="p0-100">
      <div style="width:100%;display: flex;justify-content: center;">
        <div class="banner">
          <!-- 轮播图 -->
          <el-carousel height="345px" trigger="click">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.pic" alt="" @click="handlePage(item.url)" />
            </el-carousel-item>
          </el-carousel>
          <!-- 政策解读 -->
          <div class="unscramble">
            <div class="title">
              <div class="title_top_l">
                <img src="@/assets/image/icon4.png" alt="" />
                <img src="@/assets/image/icon5.png" alt="" />
              </div>
              <router-link
                target="_blank"
                :to="{
                  path: '/portrait',
                  query: { key: 'policyRead', val: '归口' }
                }"
              >
                <div class="title_top_r pointer">
                  更多<i class="el-icon-arrow-right"></i>
                </div>
              </router-link>
            </div>
            <div class="tab_list">
              <!-- @tab-click="handleClick2" -->
              <el-tabs v-model="queryParams2.attributeId">
                <!-- <el-tab-pane label="科技" name="KJJ">
                  <span
                    slot="label"
                    @mouseover="
                      (queryParams2.attributeId = 'KJJ'), handleClick2()
                    "
                    >科技</span
                  >
                </el-tab-pane>
                <el-tab-pane label="经信" name="JXJ">
                  <span
                    slot="label"
                    @mouseover="
                      (queryParams2.attributeId = 'JXJ'), handleClick2()
                    "
                    >经信</span
                  >
                </el-tab-pane>
                <el-tab-pane label="发改" name="FGW">
                  <span
                    slot="label"
                    @mouseover="
                      (queryParams2.attributeId = 'FGW'), handleClick2()
                    "
                    >发改</span
                  >
                </el-tab-pane>
                <el-tab-pane label="其他" name="OTHER">
                  <span
                    slot="label"
                    @mouseover="
                      (queryParams2.attributeId = 'OTHER'), handleClick2()
                    "
                    >其他</span
                  >
                </el-tab-pane> -->
                <div
                  class="tab_item"
                  style="position: relative;padding-right:50px"
                  v-for="(item, index) in list2"
                  :key="item.id"
                >
                  <span :class="index < 3 ? 'color' : ''"></span>

                  <span class="text_hidden_one text_18_333 pointer">
                    <router-link
                      target="_blank"
                      :to="{
                        path: '/result',
                        query: { key: 'policyRead', id: item.id }
                      }"
                    >
                      {{ item.title }}
                    </router-link>
                  </span>
                  <i v-if="index < 3">
                    <img src="@/assets/image/new.png" alt="" />
                  </i>
                  <span style="position: absolute;right: 0;top: 0;">{{
                    parseTime(item.listDate, '{m}-{d}')
                  }}</span>
                </div>
              </el-tabs>
            </div>
          </div>
        </div>
        <div class="banner_r">
          <!-- 政策列表 -->
          <div class="title">
            <div class="title_top_l">
              <img src="@/assets/image/icon4l.png" alt="" />
              <img src="@/assets/image/notice.png" alt="" />
            </div>
            <router-link
              target="_blank"
              :to="{
                path: '/portrait',
                query: { key: 'policyNotice', val: '公示公告' }
              }"
            >
              <div class="title_top_r pointer">
                更多<i class="el-icon-arrow-right"></i>
              </div>
            </router-link>
          </div>
          <div class="tab_list">
            <!-- @tab-click="handleClick" -->
            <el-tabs v-model="queryParams.labelId">
              <el-tab-pane name="1415156808053559296">
                <span
                  slot="label"
                  @mouseover="
                    (queryParams.labelId = '1415156808053559296'), handleClick()
                  "
                  >政策转发</span
                >
              </el-tab-pane>
              <el-tab-pane name="1415156963146338304">
                <span
                  slot="label"
                  @mouseover="
                    (queryParams.labelId = '1415156963146338304'), handleClick()
                  "
                  >申报通知</span
                >
              </el-tab-pane>
              <el-tab-pane label="政府公示" name="1415157002090450944">
                <span
                  slot="label"
                  @mouseover="
                    (queryParams.labelId = '1415157002090450944'), handleClick()
                  "
                  >公示转发</span
                >
              </el-tab-pane>
              <el-tab-pane label="公告" name="1415157026115424256">
                <span
                  slot="label"
                  @mouseover="
                    (queryParams.labelId = '1415157026115424256'), handleClick()
                  "
                  >公告转发</span
                >
              </el-tab-pane>
              <!-- <el-tab-pane label="其他" name="1415157049267982336">
                <span
                  slot="label"
                  @mouseover="
                    (queryParams.labelId = '1415157049267982336'), handleClick()
                  "
                  >其他</span
                >
              </el-tab-pane> -->
              <div style="min-height: 281px">
                <div class="banner_r_list" v-for="item in list" :key="item.id">
                  <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
                  <div class="text_18_333 pointer">
                    <router-link
                      target="_blank"
                      :to="{
                        path: '/result',
                        query: { key: 'policy', id: item.id }
                      }"
                    >
                      {{ item.title }}
                    </router-link>
                  </div>
                  <span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
                </div>
              </div>
            </el-tabs>
          </div>
          <!-- 资讯快报 -->
          <div class="bulletin">
            <div class="title">
              <div>
                <img src="@/assets/image/icon4r.png" alt="" />
                <img src="@/assets/image/icon6.png" alt="" />
              </div>
              <router-link
                target="_blank"
                :to="{
                  path: '/portrait',
                  query: { key: 'information', val: '' }
                }"
              >
                <div class="title_top_r pointer">
                  更多<i class="el-icon-arrow-right"></i>
                </div>
              </router-link>
            </div>
            <div class="tab_list" style="padding-top:8px">
              <div class="banner_r_list" v-for="item in list3" :key="item.id">
                <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
                <div class="text_18_333 pointer">
                  <router-link
                    target="_blank"
                    :to="{
                      path: '/result',
                      query: { key: 'information', id: item.id }
                    }"
                  >
                    {{ item.title }}
                  </router-link>
                </div>
                <span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 城市列表 -->
      <div style="padding:15px">
        <p class="">
          <img
            src="@/assets/image/icon_l.png"
            alt=""
            style="margin-right: 3px;"
          />
          <img src="@/assets/image/icon_r.png" alt="" />
        </p>
        <div class="city_list">
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: 'AH', val: '安徽' } }"
            >
              <img src="@/assets/image/city/01.png" alt="" />
              <span>安徽</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '合肥' } }"
            >
              <img src="@/assets/image/city/02.png" alt="" />
              <span>合肥</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '芜湖' } }"
            >
              <img src="@/assets/image/city/03.png" alt="" />
              <span>芜湖</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '蚌埠' } }"
            >
              <img src="@/assets/image/city/04.png" alt="" />
              <span>蚌埠</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '淮南' } }"
            >
              <img src="@/assets/image/city/05.png" alt="" />
              <span>淮南</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '马鞍山' } }"
            >
              <img src="@/assets/image/city/06.png" alt="" />
              <span>马鞍山</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '淮北' } }"
            >
              <img src="@/assets/image/city/07.png" alt="" />
              <span>淮北</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '铜陵' } }"
            >
              <img src="@/assets/image/city/08.png" alt="" />
              <span>铜陵</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '安庆' } }"
            >
              <img src="@/assets/image/city/09.png" alt="" />
              <span>安庆</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '滁州' } }"
            >
              <img src="@/assets/image/city/10.png" alt="" />
              <span>滁州</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '阜阳' } }"
            >
              <img src="@/assets/image/city/11.png" alt="" />
              <span>阜阳</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '宿州' } }"
            >
              <img src="@/assets/image/city/12.png" alt="" />
              <span>宿州</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '六安' } }"
            >
              <img src="@/assets/image/city/13.png" alt="" />
              <span>六安</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '亳州' } }"
            >
              <img src="@/assets/image/city/14.png" alt="" />
              <span>亳州</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '池州' } }"
            >
              <img src="@/assets/image/city/15.png" alt="" />
              <span>池州</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '宣城' } }"
            >
              <img src="@/assets/image/city/16.png" alt="" />
              <span>宣城</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '2', val: '黄山' } }"
            >
              <img src="@/assets/image/city/17.png" alt="" />
              <span>黄山</span>
            </router-link>
          </div>
          <div>
            <router-link
              target="_blank"
              :to="{ path: '/notice', query: { key: '3', val: '合肥区县' } }"
            >
              <img src="@/assets/image/city/18.png" alt="" />
              <span>合肥区县</span>
            </router-link>
          </div>
        </div>
      </div>
      <div style="padding:0 15px">
        <p style="margin-bottom:0">
          <img
            src="@/assets/image/icon_cx.png"
            alt=""
            style="margin-right: 3px;"
          />
          <img src="@/assets/image/icon_cx2.png" alt="" />
        </p>
        <div class="advert">
          <div class="item" v-for="item in innovateList" :key="item.id">
            <router-link
              target="_blank"
              :to="{ path: '/about', query: { id: item.id } }"
            >
              <img :src="item.pic" alt="" />
              <div class="card">
                <div class="title text_hidden_one">{{ item.title }}</div>
                <div class="text text_hidden_one" v-html="item.details"></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="about">
      <div class="p0-100">
        <p class="about_tit">
          <img src="@/assets/image/icon7.png" alt="" />
          <img src="@/assets/image/about.png" alt="" />
        </p>
        <div class="about_box">
          <div class="banner about_l">
            <img :src="aboutInfo.pic" alt="" />
          </div>
          <div class="about_r">
            <div>
              <h3>{{ aboutInfo.title }}</h3>
              <p>{{ aboutInfo.textWord }}</p>
            </div>
            <!-- <div style="margin-top: 53px">
              <h3>嘉策互联网科技创新服务平台</h3>
              <p>
                合肥嘉策信息技术服务有限公司于成立。法定代表人时加红，公司经营范围包括：信息系统集成咨询...
              </p>
            </div> -->
            <router-link
              target="_blank"
              :to="{
                path: '/about'
              }"
            >
              <el-button type="warning">更多</el-button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="p0-100" style="padding-bottom:40px">
      <div class="cooperation">
        <img src="@/assets/image/icon8.png" alt="" />
      </div>
      <div @mouseover="classOption.step = 0" @mouseleave="classOption.step = 1">
        <vue-seamless-scroll
          :data="listData"
          :class-option="classOption"
          class="warp"
        >
          <ul class="ul-item">
            <li class="li-item" v-for="(item, index) in listData" :key="index">
              <img :src="item.img" alt="" />
            </li>
          </ul>
        </vue-seamless-scroll>
        <vue-seamless-scroll
          :data="listData2"
          :class-option="classOption"
          class="warp"
        >
          <ul class="ul-item">
            <li class="li-item" v-for="(item, index) in listData2" :key="index">
              <img :src="item.img" alt="" />
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getRotationList,
  getPolicy,
  getPolicyRead,
  getInformation,
  getAboutUs,
  getPartner,
  getScienceInnovate
} from '@/api/home/home';
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      listData: [],
      listData2: [],
      innovateList: [], // 创新服务列表
      classOption: {
        step: 1,
        limitMoveNum: 8,
        direction: 2
      },
      bannerList: [],
      queryParams: {
        labelId: '1415156808053559296',
        pageSize: 7
      },
      queryParams2: {
        attributeId: 'OTHER',
        pageSize: 8
      },
      queryParams3: {
        pageNum: 1,
        pageSize: 8
      },
      // date: this.parseTime(new Date(), '{y}-{m}-{d}'),
      list: [],
      list2: [],
      list3: [],
      aboutInfo: {}
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  methods: {
    // 政策列表
    handleClick(tab, event) {
      getPolicy(this.queryParams).then(({ data }) => {
        this.list = data.list;
      });
    },
    // 政策解读
    handleClick2(tab, event) {
      getPolicyRead(this.queryParams2).then(({ data }) => {
        this.list2 = data.list;
      });
    },
    handlePage(url) {
      window.open(url, '_blank');
    }
  },
  created() {
    getRotationList({ pageNum: 1, pageSize: 50 }).then(({ data }) => {
      this.bannerList = data.list;
    });
    this.handleClick();
    this.handleClick2();
    getInformation(this.queryParams3).then(({ data }) => {
      this.list3 = data.list;
    });
    getScienceInnovate().then(({ data }) => {
      this.innovateList = data;
    });
    getAboutUs().then(res => {
      this.aboutInfo = res.data;
    });
    getPartner().then(({ data }) => {
      data = data.filter(item => {
        return item.status == 1;
      });
      if (data.length < 16)
        return this.msgError('请至后台添加并且显示至少16个合作伙伴');
      if (data.length % 2 != 0) {
        data.pop();
      }
      const middleIndex = Math.ceil(data.length / 2);
      this.listData = data.slice().splice(0, middleIndex);
      this.listData2 = data.slice().splice(-middleIndex);
      console.log(this.listData);
      console.log(this.listData2);
      console.log(data);
    });
  }
};
</script>
<style lang="scss" scoped>
.warp {
  width: 144px * 8;
  height: 70px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    &.ul-item {
      display: flex;
      .li-item {
        width: 144px;
        color: #fff;
        text-align: center;
        font-size: 30px;
      }
    }
  }
}
// /deep/.el-carousel__button {
//   width: 8px;
//   height: 8px;
//   border-radius: 50%;
// }
// /deep/.is-active {
//   .el-carousel__button {
//     width: 20px;
//     background-color: #ffa32c;
//     border-radius: 4px;
//   }
// }
/deep/.el-tabs__item {
  padding: 0 25px;
  font-size: 20px;
}
/deep/.el-tabs__item.is-active {
  font-weight: bold;
  color: #3394ff;
}
/deep/.el-tabs__active-bar {
  height: 4px;
  border-radius: 2px;
  background-color: #3394ff;
}
/deep/.el-tabs__nav-wrap::after {
  height: 0;
}
.banner {
  // width: 614px;
  width: 50%;
  margin-right: 20px;
  .el-carousel {
    .el-carousel__item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  /deep/.el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  /deep/.is-active {
    .el-carousel__button {
      width: 20px;
      background-color: #ffa32c;
      border-radius: 4px;
    }
  }

  .unscramble {
    margin-top: 30px;
    .title {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      text-align: right;
      background-color: #3394ff;
      border-radius: 6px 6px 0px 0px;
      img {
        vertical-align: middle;
        margin-right: 10px;
      }
      .title_top_r {
        font-size: 16px;
        color: #fff;
      }
      span {
        font-size: 16px;
        color: #666;
      }
    }
    .tab_list {
      padding: 0 18px;
      .tab_item {
        height: 37px;
        line-height: 37px;
        display: flex;
        // justify-content: center;
        align-items: center;
        span:nth-child(1) {
          width: 17px;
          font-size: 30px;
          font-family: DIN;
          font-weight: bold;
          font-style: italic;
          color: #999999;
          line-height: 9px;
        }
        span.color {
          color: #ffa32c;
        }
        span:nth-child(2) {
          padding: 0 10px 0 0px;
        }
      }
    }
  }
}
.banner_r {
  // width: 566px;
  width: 48%;
  .title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    text-align: right;
    background-color: #3394ff;
    border-radius: 6px 6px 0px 0px;
    img {
      vertical-align: middle;
      margin-right: 10px;
    }
    .title_top_r {
      font-size: 16px;
      color: #fff;
    }
    span {
      font-size: 16px;
      color: #666;
    }
  }
  .tab_list {
    padding: 0 18px;
  }
  // /deep/.el-tabs__item {
  //   padding: 0 30px;
  //   font-size: 20px;
  // }
  // /deep/.el-tabs__item.is-active {
  //   font-weight: bold;
  //   color: #3394ff;
  // }
  // /deep/.el-tabs__active-bar {
  //   height: 4px;
  //   border-radius: 2px;
  //   background-color: #3394ff;
  // }
  // /deep/ .el-tabs__nav-wrap::after {
  //   height: 0;
  // }

  .banner_r_list {
    padding: 0 18px;
    position: relative;
    height: 37px;
    line-height: 37px;
    div {
      padding-right: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .bulletin {
    // margin-top: 30px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 40px;
      background-color: #3394ff;
      border-radius: 6px 6px 0px 0px;
      img {
        vertical-align: middle;
        margin-right: 10px;
      }
      .title_top_r {
        font-size: 16px;
        color: #fff;
      }
    }
    .tab_list {
      padding: 0 18px;
      .tab_item {
        height: 56px;
      }
    }
  }
}
.advert {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 24%;
    margin-top: 12px;
    position: relative;
    &:nth-child(n + 5) {
      margin-bottom: 0;
    }
    img {
      width: 100%;
      max-height: 165px;
    }
    .card {
      padding: 0 15px;
      width: 80%;
      height: 70px;
      text-align: center;
      position: absolute;
      bottom: 15px;
      right: 10%;
      // background: linear-gradient(to right, #8d9cff 0%, #7679ff 100%);
      background-color: #3394ff;
      opacity: 0.9;
      font-size: 15px;
      color: #fff;
      cursor: pointer;
      transition: bottom 0.5s;
      &:hover {
        bottom: 30px;
        transition: bottom 0.5s;
      }
      .title {
        width: 100%;
        margin: 10px 0;
      }
      /deep/.text > p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        margin: 0;
        font-size: 12px;
        color: #fff;
      }
    }
  }
}
.city_list {
  margin-top: 10px;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    // cursor: pointer;
    // padding: 16px;
    border-radius: 6px;
    overflow: hidden;
    width: 16%;
    height: 80px;
    // margin: 0 0.5% 10px;
    margin-bottom: 10px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 80px;
      color: #fff;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
}
.city_list.partner {
  div {
    width: 12%;
    height: 70px;
  }
}
.about {
  background-color: #f8f8f8;
  .p0-100 {
    // padding-top: 37px;
    // padding-bottom: 26px;
    padding: 30px;
    .about_tit {
      margin-top: 0;
      img {
        vertical-align: middle;
        margin-right: 3px;
      }
    }
    .about_box {
      display: flex;
      .about_l {
        overflow: hidden;
        max-height: 345px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .about_r {
        flex: 1;
        h3 {
          color: #333;
          font-size: 20px;
        }
        p {
          text-indent: 2em;
          color: #666;
          font-size: 18px;
          line-height: 30px;
        }
      }
    }
  }
}
.p0-100 {
  .cooperation {
    padding-top: 40px;
    // padding-bottom: 19px;
    text-align: center;
    // font-size: 26px;
    // font-weight: 700;
    // color: #3394ff;
  }
}
</style>
