<!--
   * @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">
        <div class="title">资讯动态</div>
        <ul>
          <li v-for="item in newsList" :key="item.index"><img src="@/assets/homePage/inform.png" alt="">{{
          item.new_title }}
          </li>
        </ul>
        <img src="@/assets/functionCenter/in@2x.png" @click="gotoNews()">
        <!-- <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=""> -->
              <img :src="list.url">
            </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">{{ !list.office_id&&!list.agent_id?'-':(list.office_id?'办事处':'经销商') }}</span>
                <span class="seconds">{{ !list.office_id&&!list.agent_id?'-':(list.office_id?list.office_name:list.agent_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.office_id&&!list.agent_id?( list.province_id_n === list.city_id_n?(list.district_id_n?list.city_id_n + list.district_id_n:list.city_id_n):(list.district_id_n?list.province_id_n + list.city_id_n + list.district_id_n:list.province_id_n + list.city_id_n )):(list.office_id? (list.office_province === list.office_city?(list.office_district?list.office_city + list.office_district:list.office_city ):(list.office_district?list.office_province + list.office_city + list.office_district:list.office_province + list.office_city)):(list.agent_province === list.agent_city?(list.agent_district?list.agent_city + list.agent_district:list.agent_city):(list.agent_district?list.agent_province + list.agent_city + list.agent_district:list.agent_province + list.agent_city))) }}</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'
import noImg from '../../assets/productQuery/none.png'

export default {
  name: 'HomePage',
  data () {
    return {
      city: '',
      province: '',
      user_bp_status: '',
      user_bp_class: '',
      bp_id: '',
      isVisitor: false,
      moduleSeparateList: [],
      guessingList: [],
      newsList: [],
    }
  },
  watch: {},
  created () {
    // this.getLocation()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // if (from.name === 'Login') {
      vm.moduleSeparateList = [...functionState.moduleSeparateList]
      if (window.localStorage.getItem('user_phone')) {
        vm.userQuery()
      }
      // vm.guessingQuery() // 猜你喜欢查询
      vm.isVisitor = !window.localStorage.getItem('password')
      // vm.guessingQuery() // 猜你喜欢查询
      vm.getLocation()
      vm.getNews()
      //  }
    })
  },
  methods: {
    // 定位
    getLocation () {
      let vm = this
      // if (vum.Platform.isAndroid()) { // 安卓采用jsapi
      //   var geolocation = new BMap.Geolocation()
      //   vm.hlsPopup.showLoading('数据加载中')
      //   geolocation.getCurrentPosition(function (res) {
      //     vm.hlsPopup.hideLoading()
      //     if (this.getStatus() === 0) {
      //       // 判断是否是手动选择过定位
      //       if (window.localStorage.getItem('province')) {
      //         vm.city = window.localStorage.getItem('city')
      //         vm.province = window.localStorage.getItem('province')
      //         vm.guessingQuery(vm.city)
      //       } else {
      //         // 没有就定位当前位置
      //         console.log(res)
      //         vm.city = res.address.city
      //         vm.province = res.address.province
      //         vm.guessingQuery(res.address.city)
      //       }
      //     }
      //   }, {enableHighAccuracy: true})
      // } else { // ios使用插件定位
      console.log('&&&&&&&&&&&&___ios')
      // if (!$config.isMobilePlatform) {
      // }
      baidumap_location.getCurrentPosition(function (result) {
        if (window.localStorage.getItem('province')) {
          vm.city = window.localStorage.getItem('city')
          vm.province = window.localStorage.getItem('province')
          vm.guessingQuery(vm.city)
        } else {
          vm.city = result.city
          vm.province = result.province
          vm.guessingQuery(result.city)
        }
      }, function (error) {
      })
      // setTimeout(vm.guessingQuery(), 0)
    },
    goFunctionHome (data) {
      this.$router.push({
        name: data.functionState,
      })
    },
    // 新闻资讯
    getNews () {
      let url = $config.basePath + 'news_entrance_list'
      let param = {}
      this.$post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        if (res.result === 'S') {
          this.newsList = res.lists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goModuleFunction (data) {
      let vm = this
      if (this.isVisitor && data.moduleState !== 'FinancingTrial') {
        hlsPopup.showConfirm({
          title: '提示',
          content: `请先登录！`,
          onConfirm: data => {
            if (data) {
              vm.$router.push('/login')
            } else {
            }
          },
        })
      } else {
        this.$router.push({
          name: data.moduleState,
        })
      }
    },
    location () {
      this.$router.push({
        name: 'Location',
        params: {
          province: this.province,
          city: this.city,
        },
      })
    },
    gotoNews () {
      this.$router.push({
        name: 'NewsList',
      })
    },
    // 用户信息查询
    userQuery () {
      // let vm = this
      // let url = $config.basePath + 'user_query'
      // let param = {
      //   'bp_id': window.localStorage.getItem('user_phone'),
      // }
      // vm.hlsPopup.showLoading('数据加载中')
      // vm.$post(url, param).then(function (res) {
      //   vm.hlsPopup.hideLoading()
      //   if (res.result === 'S') {
      //     window.localStorage.setItem('bp_type', res.info.user_bp_type)
      //     // window.localStorage.setItem('user_phone', res.info.user_phone)
      //     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)
      //   }
      // }) 

      this.user_bp_status =  JSON.parse(window.localStorage.getItem("now_user_bp_bind_id")).bp_status; 
      this.user_bp_class =  JSON.parse(window.localStorage.getItem("now_user_bp_bind_id")).bp_class;
      this.bp_id = JSON.parse(window.localStorage.getItem("now_user_bp_bind_id")).bp_id;
    },
    // 猜你喜欢
    guessingQuery (e) {
      console.log(e)
      let vm = this
      let url = $config.basePath + 'guess_you_like_query'
      let param = {
        'user_phone': window.localStorage.getItem('user_phone'),
        'city': e,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.guessingList = res.lists
          vm.guessingList.forEach(item => {
            item['url'] = item.product_attachment_id ? process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 进入产品明细
    goProductDetail (list) {
      let vm = this
      if (!window.localStorage.getItem('password')) {
        hlsPopup.showConfirm({
          title: '提示',
          content: `请先登录！`,
          onConfirm: data => {
            if (data) {
              vm.$router.push('/login')
            } else {
            }
          },
        })
      } else {
        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: 80px;
      width: 96%;
      margin: 0 auto 10px;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        height: 15px;
      }

      .title {
        flex-grow: 0;
        flex-basis: 70px;
        padding: 0 15px;
        color: #1D3FFF;
        font-weight: 600;
        line-height: 30px;
        text-align: center;
        border-right: 1px solid #F1F0F5;
      }

      ul {
        flex-grow: 2;
        flex-basis: 2;

        li {
          height: 30px;
          line-height: 30px;
          vertical-align: middle;
          text-align: left;
          text-indent: 15px;
          font-size: 14px;

          img {
            vertical-align: middle;
            margin-right: 15px;
            width: 15px;
          }
        }
      }

      &: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;
      display: flex;
      justify-content: center;
      align-items: center;

      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: 76px;
          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>
