<!--
   * @Descrip: 主页
 * @Author: your name
 * @Date: 2019-10-10 14:25:15
 * @LastEditTime: 2019-11-14 09:56:22
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="homePage" class="public-style" title="徐工租赁">
    <h-header :proportion="[7,10,0]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <!-- <i class="ion-ios-arrow-back" /> -->
        <img class="locations" src="@/assets/homePage/location.png" alt="" @click="location">
        <span class="home-city">{{ city }}</span>
      </div>
      <div slot="center" @click="getLocation">徐工租赁</div>
    </h-header>
    <h-content class="has-footer">
      <div class="top-wrap"/>
      <div class="top-wrap-white"/>
      <swipe :interval="5000" class="hls-swipe">
        <swipe-item class="hls-swipe">
          <img src="@/assets/homePage/banner.jpg" alt="">
        </swipe-item>
        <swipe-item class="hls-swipe">
          <img src="@/assets/homePage/banner2.png" alt="">
        </swipe-item>
      </swipe>
      <div class="functions">
        <function-item
          v-for="item in moduleSeparateList.slice(0,4)" :key="item.moduleId" :functionIcon="item.moduleIcon"
          :functionName="item.moduleName"
          :data="item" @clickFunction="goModuleFunction"/>
      </div>

      <div class="center-pic">
        <div class="left-pic">
          <img src="@/assets/homePage/copy1.png" alt="">
        </div>
        <div class="right-pic">
          <img src="@/assets/homePage/copy2.png" alt="">
          <img src="@/assets/homePage/copy3.png" alt="">
        </div>
      </div>
      <div class="guessing">猜你喜欢<span><img src="@/assets/homePage/intrest.png"></span></div>
      <div v-for="(list,index) in guessingList" :key="index" class="guessing-wrap" @click="goProductDetail(list)" >
        <list-item :item-height="120">
          <item>
            <div slot="name" class="item-pic">
              <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
            </div>
            <div slot="content" class="item-content">
              <div class="top">{{ list.product_name }}</div>
              <img src="@/assets/homePage/hot.png" class="hot">
              <div class="center"><span class="firsts">经销商</span> <span class="seconds">{{ list.bp_name }}</span></div>
              <div class="center"><span class="firsts">设备识别号</span> <span class="seconds">{{ list.product_code }}</span></div>
              <div class="center"><span class="firsts">地址</span> <span class="seconds">{{ list.province_id_n + list.city_id_n + list.district_id_n }}</span></div>
            </div>
          </item>
        </list-item>
      </div>
      <!-- <div class="bank" style="height: 60px;width: 100%"/>-->
    </h-content>
  </h-view>
</template>
<script>
import functionState from './functionState'

export default {
  name: 'HomePage',
  data () {
    return {
      city: '',
      province: '',
      user_bp_status: '',
      user_bp_class: '',
      bp_id: '',
      moduleSeparateList: [],
      guessingList: [],
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getLocation()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // if (from.name === 'Login') {
      vm.moduleSeparateList = [...functionState.moduleSeparateList]
      vm.userQuery()
      //  }
    })
  },
  methods:
      {
        // 定位
        getLocation () {
          let vm = this
          if (vum.Platform.isAndroid()) { // 安卓采用jsapi
            var geolocation = new BMap.Geolocation()
            geolocation.getCurrentPosition(function (res) {
              if (this.getStatus() === 0) {
                // 判断是否是手动选择过定位
                if (window.localStorage.getItem('province')) {
                  vm.city = window.localStorage.getItem('city')
                  vm.province = window.localStorage.getItem('province')
                } else {
                  // 没有就定位当前位置
                  console.log(res)
                  vm.city = res.address.city
                  vm.province = res.address.province
                }
                vm.guessingQuery() // 猜你喜欢查询
              }
            }, {enableHighAccuracy: true})
          } else { // ios使用插件定位
            console.log('&&&&&&&&&&&&___ios')
            baidumap_location.getCurrentPosition(function (result) {
              if (window.localStorage.getItem('province')) {
                vm.city = window.localStorage.getItem('city')
                vm.province = window.localStorage.getItem('province')
              } else {
                vm.city = result.city
                vm.province = result.province
              }
              vm.guessingQuery() // 猜你喜欢查询
            }, function (error) {
            })
          }
        },
        goFunctionHome (data) {
          this.$router.push({
            name: data.functionState,
          })
        },
        goModuleFunction (data) {
          this.$router.push({
            name: data.moduleState,
          })
        },
        location () {
          this.$router.push({
            name: 'Location',
            params: {
              province: this.province,
              city: this.city,
            },
          })
        },
        // 用户信息查询
        userQuery () {
          let vm = this
          let url = $config.basePath + 'user_query'
          let param = {
            'phone': window.localStorage.getItem('user_phone'),
          }
          vm.hlsPopup.showLoading('数据加载中')
          vm.$post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading()
            if (res.result === 'S') {
              vm.user_bp_status = res.info.user_bp_status
              vm.user_bp_class = res.info.user_bp_class
              vm.bp_id = res.info.user_bp_id
            } else {
              hlsPopup.showLongCenter(res.message)
            }
          })
        },
        // 猜你喜欢
        guessingQuery () {
          let vm = this
          let url = $config.basePath + 'guess_you_like_query'
          let param = {
            'user_phone': window.localStorage.getItem('user_phone'),
            'city': vm.city,
          }
          vm.$post(url, param).then(function (res) {
            if (res.result === 'S') {
              vm.guessingList = res.lists
            } else {
              hlsPopup.showLongCenter(res.message)
            }
          })
        },
        // 进入产品明细
        goProductDetail (list) {
          this.$router.push({
            name: 'ProDetailed',
            params: {
              product_id: list.product_id,
              bp_id: list.bp_id,
            },
          })
        },
      },
}
</script>
<style lang='less'>
  @import "../../styles/vue-1px";

  #homePage {
    .content{
      background-color: #EFEFEF;
    }
    .top-wrap {
      width: 100%;
      height: 100px;
      background-color: @headerColor;
      border-bottom-right-radius: 30%;
      border-bottom-left-radius: 30%;
      position: absolute;
      top: 0;
    }

    .top-wrap-white {
      width: 100%;
      height: 100px;
      position: absolute;
      top: 100px;
    }

    .home-city {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .h-header .h-header-left .h-header-btn:first-of-type {
      padding-left: 0.2rem;
    }

    .functions {
      height: 108px;
      width: 96%;
      margin: -6px auto 10px;
      border-radius: 10px;
      background: #fff;
      padding-top: 10px;
      display: flex;
      justify-content: space-between;

      &:before {
        content: ''
      }

      &:after {
        content: ''
      }

      .function-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        img{
         margin: 0;
        }
        div{
          margin-bottom: 14px;
          ont-family: PingFangSC-Regular;
          font-size: 13px;
          color: #3C3D48;
          letter-spacing: 0;
        }
      }

    }

    .h-header .h-header-center div {
      text-align: left !important;
    }

    .locations {
      height: 24px;
      width: 24px;
    }

    .hls-swipe {
      width: 100vw;
      img {
        width: 100vw;
        // height: 100%;
      }
      .hls-swipe-indicators{
        left: 54%;
        bottom: 20px;
        .hls-swipe-indicators-item{
          width: 10px;
          height: 2px;
          border-radius: 0;
        }
        .hls-swipe-indicators-item--active{
          background-color: #FFF;
        }
      }
    }

    .center-pic {
      margin-top: 10px;
      width: 100%;
      display: flex;
      flex-direction: row;
      padding: 0 1% 0 1%;
      .left-pic {
        width: 41.6%;
        margin-left: 4px;

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

      .right-pic {
        width: 55.2%;
        display: flex;
        flex-direction: column;
        margin-left: 4px;

        img {
          max-width: 100%;
          height: auto;
        }

        img:nth-of-type(2) {
          margin-top: 4px;
        }
      }
    }

    .guessing {
      display: flex;
      align-items: center;
      height: 22px;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #00469C;
      font-weight: 600;
      letter-spacing: 0.57px;
      height: 40px;
      padding-left: 2%;
      span{
      padding-top: 2px;
      margin-left: 4px;
      }
      img{
        width: 14px;
        height: 14px;
      }
    }
    .guessing-wrap{
      position: relative;
      width: 96%;
      margin: 0 auto;
      .hls-list-item{
        border-radius: 10px;
        .contents{
          padding: 8px 6px 8px 0;
          .add-content{
            justify-content: flex-start;
          }
        }
      }
    }
    .item-pic {
      width: 110px;
      height: 110px;

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

    .item-content {
      .top {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #3B3B3B;
        letter-spacing: 0.54px;
        margin-top: 10px;
        font-weight: 600;
      }
      .hot {
        position: absolute;
        top: 0;
        right: 0;
        width: 45px;
      }
      .center {
        margin-top: 6px;
        display: flex;
        .firsts {
          width: 66px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(56,63,69,0.60);
          letter-spacing: 0.5px;
        }

        .seconds {
          flex: 1;
          text-align: left;
          font-weight: 600;
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #4B4A4B;
          letter-spacing: 0.5px;
        }
      }
    }
  }
</style>
