<template>
  <div class="business">
    <div v-if="show" class="st">
      <div class="swiper-father">
        <div class="swiper-container swiper-list" style="width: 100%">
          <div class="swiper-wrapper">
            <div v-for="(item,index) in service" :key="index" class="swiper-slide">
              <div style="width: 100%;">
                <img :src="item.serviceImageUrl" width="100%" />
                <div>
                  <h4>{{item.serviceName}}</h4>
                  <p class="text-left business-text" v-for="(items,index) in item.serviceLabelList" :key="index">{{items.labelName}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <div v-if="!show" class="row st">
      <div class="col-xs-6 col-md-3 sw" v-for="(item,index) in service" :key="index">
        <img :src="item.serviceImageUrl" width="100%" height="100%" alt="..." />
        <div class>
          <h4>{{item.serviceName}}</h4>
          <p class="text-left business-text" v-for="(items,index) in item.serviceLabelList" :key="index">{{items.labelName}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import "swiper/dist/css/swiper.min.css";
import request from '../../utils/request'
import apis from '../config/api';

export default {
  name: "business",
  data () {
    return {
      show: false,
      service: []
    };
  },
  components: {},

  mounted () {
    // this.initSwiper()
  },
  methods: {
    initSwiper () {

      if (!this.swiper) {

        this.swiper = new Swiper('.swiper-list', {

          // loop: true,

          slidesPerView: 4,
          // slidesPerGroup: 1,
          spaceBetween: 40,


          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },



        })
      } else {
        this.swiper.update(true)
      }


    }
  },







  created () {





    //http://localhost:8080/pc/service/list
    request({
      ...apis.service.list,


    }).then(con => {
      // console.log(con, "124")
      this.service = con;

      this.show = this.service.length > 4 ? true : false;
      if (this.show) {
        window.setTimeout(() => this.initSwiper(), 0)
      }
      // console.log(this.service.length, "111111111")
      // window.console.log(this.service, "543");
    })


  }




};
</script>


<style scoped>
.col-xs-6 {
  padding: 0px;
}
@media (max-width: 992px) {
  .business-text {
    display: none;
  }

  h4 {
    font-family: 'Microsoft Yahei Light';
    font-size: 1.4rem;
    /* padding: 5px; */
    background-color: #e03723;
    color: #fff;
    margin: 0;
    height: 30px;
    letter-spacing: 6px;
    line-height: 30px;
  }
  .st {
    margin-bottom: 20px !important;
    padding: 0 1% !important;
  }
  .sw {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
}

@media (min-width: 992px) {
  .swiper-button-prev {
    width: 36px;
    height: 96px;
    top: 25%;
    background-image: url(../assets/image/home/service_arrow_normal.png);
    background-size: 36px, 96px;
    left: -5vw;
    right: auto;
    outline: none;
  }
  .swiper-button-next {
    width: 36px;
    height: 96px;

    top: 25%;
    background-image: url(../assets/image/home/service_arrow_normal.png);
    background-size: 36px, 96px;
    right: -5vw;
    transform: rotate(180deg);
    outline: none;
  }
  .swiper-button-prev:hover {
    width: 36px;
    height: 96px;
    top: 25%;
    background-image: url(../assets/image/home/service_arrow_trigger.png);
    background-size: 36px, 96px;
    left: -5vw;
    right: auto;
    outline: none;
  }
  .swiper-button-next:hover {
    width: 36px;
    height: 96px;

    top: 25%;
    background-image: url(../assets/image/home/service_arrow_trigger.png);
    background-size: 36px, 96px;
    right: -5vw;
    transform: rotate(180deg);
    outline: none;
  }

  /* trigger */
  .swiper-father {
    position: relative;
  }

  p {
    line-height: 1.6em;
    font-size: 2.2rem;
    padding-bottom: 0;
    margin: 0px;
    padding: 0px 5px 0 5px;
    font-size: 2.4rem;
    color: #595757;
  }

  h4 {
    font-family: 'Microsoft Yahei Light';
    font-size: 2.4rem;
    padding: 0px;
    background-color: #e03723;
    color: #fff;
    margin: 0 0 18px;
    line-height: 43px;
    letter-spacing: 3px;
  }
  .sw {
    padding-left: 2%;
    padding-right: 2%;
  }
}
.st {
  padding-left: 9%;
  padding-right: 9%;
  margin: 0;
}
</style>


<style lang="less" scoped>
@media (max-width: 992px) {
  .st {
    padding: 0 20px;

    .sw {
      padding: 2vw;
    }
  }
}
@media (min-width: 992px) and (max-width: 1550px) {
  h4 {
    font-size: 1.7rem;
    line-height: 30px;
    margin: 0 0 10px;
  }
  p {
    line-height: 1.3em !important;

    font-size: 1.7rem;
  }
}
</style>
