<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" style="width:33.3%" 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'
import { getUrlParam } from '@/scripts/utils'

export default {
  data () {
    return {
      imgList: [],
      recommendList: [],
      moduleSeparateList: [],
      functionList: [], // 全部应用
      messageList: [],
      area: {},
      box1: {},
      box2: {},
      searchInput: '',
      subscribe: false,
    }
  },
  beforeCreate: function () {
  },
  created: function () {
    // debugger;
    // 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.getToken().then(res => {
      this.wxConfig()
      // if (window.localStorage.openId) {
      //   this.getWxUserInfo(window.localStorage.openId);
      // }
      // this.noticeQuery()
      // 注意，此处用户个人信息是写死的user_id  后续项目实施中根据以下代码实时获取企业通讯录个人信息
      var code = getUrlParam('code')
      // code = "111";
      if (code) {
        this.getOpenId(code)
      }
      this.subscribe = window.localStorage.subscribe
    })
  },
  updated: function () {
  },
  methods: {
    // 调用微信接口的基础配置
    wxConfig () {
      let clientUrl = ''
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isAndroid) {
        // 这个是安卓操作系统
        console.log('机型：android')
        clientUrl = location.href
      }
      if (isIOS) {
        // 这个是ios操作系统
        console.log('机型：ios')
        clientUrl = location.href.split('#')[0]
      }
      // let url = $config.rootPath + '/js/sdk/getWxConfig?wxCode=' + $config.wxCode + '&clientUrl=' + clientUrl
      let url = process.env.basePathRl + 'getSignature'
      let param = {
        apiKey: 'handexinxi',
        url: clientUrl,
      }
      hlsHttp.post(url, param).then(function (res) {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.result.appId, // 必填，公众号的唯一标识
          timestamp: res.result.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
          signature: res.result.signature, // 必填，签名，见附录1
          jsApiList: [
            'chooseImage',
            'previewImage',
            'downloadImage',
            'getLocalImgData',
            'uploadImage',
            'hideOptionMenu',
          ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        wx.ready(function () {
          wx.hideOptionMenu()
        })
      })
    },
    // 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,
    //     },
    //   })
    // },
    getToken () {
      let vm = this
      let url = process.env.loginPathRl + 'admin'
      let param = {}
      return vm.hlsHttp.post(url, param).then(function (res) {
        window.localStorage.setItem('access_token_rl', res.access_token)
      })
    },
    goFunctionHome (data) {
      // if (this.subscribe) {
      // this.$router.push({
      //   name: data.functionState
      // });
      // } else {
      //   hlsPopup.showPopup({
      //     title: "提示",
      //     content: "未关注公众号，请先关注后再进入!",
      //     onConfirm() {}
      //   });
      // }
      // if (!this.subscribe) {
      //   hlsPopup.showPopup({
      //     title: '提示',
      //     content: '未关注公众号，请先关注后再进入！',
      //     onConfirm: function () {
      //     },
      //   })
      // } else {

      window.localStorage.authFlag == 'Y' || data.functionState == 'UserRegister' || data.functionState == 'ChinaUnionPay' || data.functionState == 'CmbPolyPay' ? this.$router.push({ name: data.functionState }) : hlsPopup.showPopup({
        title: '提示',
        content: '当前用户未完成注册，请先注册!',
        onConfirm: function () {
        },
      })
      // }
    },
    // moreRecommend () {
    //   console.log('go moreRecommend')
    // },
    getOpenId (code) {
      let vm = this
      let url = process.env.basePathRl + 'getOpenId'
      let param = {
        apiKey: 'handexinxi',
        code: code,
      }
      // window.localStorage.openId = "oBdoRwP0WSbegPOoe9WTEMPkKsWQ";
      // vm.getWxUserInfo(window.localStorage.openId);
      vm.hlsHttp.post(url, param).then(function (res) {
        if (res.resultCode == '00') {
          window.localStorage.openId = res.result
          if (window.localStorage.openId) {
            vm.getWxUserInfo(window.localStorage.openId)
            vm.getUserInfo(window.localStorage.openId)
          }
        }
      })
    },
    getWxUserInfo (id) {
      let vm = this
      let url = process.env.basePathRl + 'getWxUserInfo'
      let params = {
        apiKey: 'handexinxi',
        openid: id,
        // openid: "oBdoRwI9gj9Brbe9iqlDCg5G2dDc"
      }

      // window.localStorage.openId = "1234567"
      vm.hlsHttp.post(url, params).then(function (res) {
        if (res.resultCode == '00') {
          vm.subscribe = window.localStorage.subscribe = res.result.subscribe
          // console.log("vvvv", res.result.subscribe);
        }
      })
    },
    getUserInfo: function (openId) {
      let vm = this,
        url = process.env.rootPath + '/sign/info/hclc/query/by/openid?openId=' + openId
      vm.$post(url).then(function (res) {
        if (res.rows.length > 0) {
          var results = res.rows[0]
          vm.authFlag = window.localStorage.authFlag = results.authFlag
        }
      })
    },
  },
}
</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: 100px;
        font-size: 12px;
        // border: 1px solid rgba(169,169,169,0.1); /*no*/
        /deep/ img {
          height: 40px;
          width: 40px;
          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>
