<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"
            style="width:33.3%"
            :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";
  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 {
          "Y" == window.localStorage.authFlag || "UserRegister" == data.functionState ? 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: 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>
