<template>
  <h-view id="home" class="public-style" title="车租易">
    <h-content class="content scroll-content">
      <div class="top-box">
        <header class="header">
          <input v-model="searchInput" placeholder="请输入功能名">
          <img src="../assets/image/home/functionList@2x.png" @click="search">
        </header>
        <swipe :interval="5000" :showIndicators="false" class="swipe">
          <swipe-item v-for="img in imgList" :key="img.pictureUrl">
            <img :src="img.pictureUrl">
          </swipe-item>
        </swipe>
        <div class="function">
          <function-item
            v-for="item in moduleSeparateList.slice(0,4)" :key="item.moduleId" :functionIcon="item.moduleIcon"
            :functionName="item.moduleName"
            :data="item" @clickFunction="goModuleFunction"/>
            <!--<function-item :functionIcon="require('../assets/image/home/allFunction@2x.png')" :functionName="'全部'" @clickFunction="goAllFunction"/>-->
        </div>
      </div>
      <div class="middle-box">
        <header>常用应用</header>
        <div class="function">
          <function-item
            v-for="item in functionList" :key="item.functionId" :functionIcon="item.functionIcon"
            :functionName="item.functionName"
            :data="item" class="function-item vue-1px" @clickFunction="goFunctionHome"/>
            <!-- <div class="function-item" @click="goAllFunction">
          <img src="../assets/image/home/functionMore@2x.png">
        </div>-->
        </div>
      </div>
      <div class="important-message">
        <div class="important-message-title">重要消息</div>
        <div class="important-message-title-icon">
          <img src="../assets/image/home/messageIcon@2x.png">
        </div>
        <div id="scroll">
          <ul id="p1">
            <li v-for="item in messageList">\{{ item.msg_body }}</li>
          </ul>
          <ul id="p2"/>
        </div>
      </div>
      <div class="middle-box bottom-box">
        <header>为您推荐<span @click="moreRecommend">更多</span></header>
        <div class="function">
          <div v-for="item in recommendList" class="recommend">
            <img :src="item.recommendUrl">
          </div>
        </div>
      </div>
    </h-content>
  </h-view>
</template>

<script>
import functionState from './functionState'

export default {
  data () {
    return {
      imgList: [],
      recommendList: [],
      moduleSeparateList: [],
      functionList: [], // 全部应用
      messageList: [],
      area: {},
      box1: {},
      box2: {},
      searchInput: '',
    }
  },
  beforeCreate: function () {
  },
  created: function () {
    window.localStorage.setItem('user_id', 2009)
    this.imgList = [...functionState.bannerList]
    this.recommendList = [...functionState.recommendList]
    this.moduleSeparateList = [...functionState.moduleSeparateList]
    this.moduleSeparateList.forEach(item => {
      this.functionList = this.functionList.concat(item.functions)
    })
    this.hlsSupportToken().then(res => {
      this.noticeQuery()
      // 注意，此处用户个人信息是写死的user_id  后续项目实施中根据以下代码实时获取企业通讯录个人信息
      /* var code = ''
      var Request = new this.UrlSearch() // 实例化
      code = Request.code
      this.getWxUserId(code) */
      this.wxConfig()
    })
  },
  updated: function () {
    /* 广告上下滚动 */
    // 重要通知滚动
    var area = document.getElementById('scroll')
    var p1 = document.getElementById('p1')
    var p2 = document.getElementById('p2')
    if (area.offsetHeight <= p1.offsetHeight) {
      p2.innerHTML = p1.innerHTML
    }

    function goUp () {
      area.scrollTop++
      if (area.scrollTop % 42 === 0) {
        setTimeout(function () {
          goUp()
        }, 20000) // 每翻滚一次当前内容停留1.5s
      } else {
        setTimeout(function () {
          goUp()
        }, 30) // 控制翻滚的速度
      }
      if (area.offsetHeight <= p1.offsetHeight) {
        p2.innerHTML = p1.innerHTML
      }
      if (area.scrollTop >= p1.offsetHeight) {
        area.scrollTop = 0
      }
    }

    goUp()
  },
  methods: {
    // 获取中台token
    hlsSupportToken () {
      let vm = this
      let url = process.env.loginPath + 'appadmin'
      let param = {}
      return vm.hlsHttp.post(url, param).then(function (res) {
        window.localStorage.setItem('access_token', res.access_token)
      })
    },
    noticeQuery () {
      let vm = this
      let url = process.env.basePath + 'home_msg_query'
      let param = {
        'offsize': 1,
      }
      vm.$post(url, param).then(function (res) {
        vm.messageList = res.notice_msg_list
      })
    },
    search () {
      let vm = this
      let flag = 'N'
      if (vm.searchInput) {
        for (let i of vm.allFunctionList) {
          if (vm.searchInput === i.functionName) {
            vm.$router.push({
              name: i.functionState,
            })
            flag = 'Y'
            break
          }
        }
      } else {
        vm.hlsPopup.showLongCenter('请输入功能名称')
      }
      if (flag === 'N') {
        vm.hlsPopup.showLongCenter('没有此功能')
      }
    },
    goModuleFunction (data) {
      this.$router.push({
        name: 'ModuleFunction',
        params: {
          moduleFunctionList: data,
        },
      })
    },
    goAllFunction () {
      let vm = this
      this.$router.push({
        name: 'HomeManager',
        params: {
          moduleSeparateList: vm.moduleSeparateList,
        },
      })
    },
    goFunctionHome (data) {
      this.$router.push({
        name: data.functionState,
      })
    },
    moreRecommend () {
      console.log('go moreRecommend')
    },

    wxConfig () {
      let clientUrl = encodeURIComponent(location.href.split('#')[0])
      let url = $config.rootPath + '/js/sdk/getWxConfig?wxCode=' + $config.wxCode + '&clientUrl=' + clientUrl
      let param = {}
      hlsHttp.post(url, param).then(function (res) {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId, // 必填，公众号的唯一标识
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature, // 必填，签名，见附录1
          jsApiList: ['chooseImage', 'previewImage', 'downloadImage', 'getLocalImgData', 'uploadImage'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
      })
    },
    UrlSearch () {
      var name, value
      var str = window.location.href // 取得整个地址栏
      alert(str)
      var num = str.indexOf('?')
      str = str.substr(num + 1) // 取得所有参数   stringvar.substr(start [, length ]

      var arr = str.split('&') // 各个参数放到数组里
      for (var i = 0; i < arr.length; i++) {
        num = arr[i].indexOf('=')
        if (num > 0) {
          name = arr[i].substring(0, num)
          value = arr[i].substr(num + 1)
          this[name] = value
        }
      }
    },
    getWxUserId (code) {
      let vm = this
      let url = process.env.rootPath + '/wechat/user/get?code=' + code + '&wxCode=' + $config.wxCode
      vm.hlsHttp.get(url).then(function (res) {
        // vm.employee_code = res.userId;
        // alert('res ' + JSON.stringify(res))
      })
    },
  },
}
</script>
<style lang="less" scoped type="text/less">
  @import "../styles/vue-1px";

  #home {
    .top-box {
      height: 264px;
      width: 100%;
      overflow: hidden;
      position: relative;

      .header {
        width: 100%;
        height: 40px;
        position: absolute;
        top: 0;
        z-index: 100;

        input {
          width: calc(~"100% - 53px");
          height: 26px;
          margin: 10px 0 0 10px;
          background: white;
          // border: 1px solid white;
          border-radius: 15px;
          text-align: center;
          color: #B6B6B6;
          font-size: 12px;
        }

        img {
          width: 21px;
          height: 21px;
          position: absolute;
          top: 12px;
          right: 10px;
        }
      }

      .hls-swipe {
        height: 175px;
        width: 100%;
        overflow: hidden;
      }

      .function {
        height: 117px;
        width: 100%;
        position: absolute;
        bottom: 0;
        background: url("../assets/image/home/moduleBg@2x.png");
        Background-size: 100%;
        padding-top: 43px;
        display: flex;
        justify-content: space-between;

        &:before {
          content: ''
        }

        &:after {
          content: ''
        }

        .function-item {
          text-align: center;
        }

      }
    }

    .middle-box {
      margin-top: 8px;
      background: white;

      header {
        height: 33px;
        display: flex;
        align-items: center;
        line-height: 100%;
        color: #5D98F6;
        position: relative;

        &:before {
          content: '';
          width: 4px;
          height: 15px;
          margin-right: 9px;
          margin-left: 10px;
          background-image: linear-gradient(-180deg, #5D98F6 0%, #76BCEE 100%);
          border-radius: 2px;
        }

        &:after {
          .setBottomLine()
        }

        span {
          font-size: 12px;
          color: #878A8D;
          position: absolute;
          right: 15px;
        }
      }
      .function{
        display: flex;
        flex-wrap: wrap;

        .function-item {
          width: 25%;
          height: 89px;
          font-size: 12px;
          // border: 1px solid rgba(169,169,169,0.1); /*no*/
          /deep/ img {
            height: 30px;
            width: 30px;
            margin: 23px 28px 9px 33px;
          }

          &:before {
            .setBottomLine();
          }

          &:after {
            .setRightLine();
          }
        }

        /*.function-item:last-child{
          /deep/ img{
            height: 27px;
            width: 27px;
            margin: 31px 34px;
          }
        }*/
      }
    }

    .important-message {
      width: 100%;
      height: 42px;
      margin-top: 8px;
      background-color: #FFFFFF;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .important-message-title {
        -webkit-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
        color: #E84A55;
        font-size: 14px;
        //margin-left: 3.2%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .important-message-title-icon {
        height: 100%;
        margin-left: 1%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 13px;
          height: 12px;
        }
      }

      #scroll {
        height: 42px;
        overflow: hidden;
        margin-left: 5%;
      }

      #scroll li {
        height: 42px;
        color: #565656;
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /*word-wrap: break-word;
        word-break: break-all;
        white-space: normal;*/
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
    }

    /*.message-box{
      margin-top: 16px;
      height: 42px;
      line-height: 42px;
      display: -webkit-flex;
      display: flex;
      background: white;
      .title{
        font-size: @font-size-small;
        margin-left: 12px;
        color: #E84A55;
      }
      img{
        height: 13px;
        width: auto;
        margin: 15px 20px 15px 3px;
      }
      #scrollBox{
        height: 100%;
        overflow: hidden;
        font-size: 13px;
        color: #E84A55;
      }
    }*/

    .bottom-box {
      .recommend {
        flex: 1;
        border: 1px solid rgba(169, 169, 169, 0.1); /*no*/
        border-top: none;

        img {
          height: 100%;
          width: 100%;
          margin: 0;
        }
      }
    }
  }
</style>
