/**
* @Author Sean
* @Date 2019/4/1
*/
<template>
  <h-view class="public-style" style="height: 100%" title="应用">
    <h-content class="content scroll-content">
      <div v-for="(list,index) in moduleFunctionList" :key="index" class="function-item" @click="goFunction(list)">
        <div class="function-item-icon">
          <img :src="list.functionIcon">
        </div>
        <div class="function-item-content">
          <div class="function-item-content-text">\{{ list.functionName }}</div>
          <div class="function-item-content-icon">
            <img src="../../assets/home-manager/right_arrow@2x.png">
          </div>
        </div>
      </div>
    </h-content>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      moduleFunctionList: [],
    }
  },
  created: function () {

  },
  mounted: function () {

  },
  updated: function () {
  },
  destroyed: function () {
  },
  beforeRouteEnter: function (to, form, next) {
    next(vm => {
      if (form.name === 'Home') {
        //let res = vm.$route.params.moduleFunctionList
        //console.log(res)
       vm.moduleFunctionList = vm.$route.params.moduleFunctionList.functions
      }
    })
  },
  methods: {
    /**
       * 根据功能类型调用不同的方法进行跳转
       * @param url
       * @param functionType
       * @param target
       */
    goFunction: function (list) {
      let vm = this
      let url = ''
      if (vum.Platform.isAndroid()) {
        url = list.functionState.replace('{platform}', 'android')
      } else {
        url = list.functionState.replace('{platform}', 'ios')
      }
      if (list.functionType && list.functionType == 'local') {
        vm.$router.push({
          name: url,
        })
      } else if (list.functionType && target) {
        hlsUtil.windowOpenUrl(url, target)
      } else {
        hlsPopup.showLongCenter('功能配置有误!')
      }
    },
  },
}
</script>

<style scoped lang="less" rel="stylesheet">
  .public-style {
    .content {
      background-color: #f7f7f8;
      padding-top: 0px;
      .function-item {
        width: 100%;
        height: 60px;
        background-color: #FFFFFF;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        align-items: center;
        -webkit-align-items: center;
        &.activated {
          opacity: 0.8;
          //-webkit-transform: scale(0.95);
          //transform: scale(0.95)
        }
        .function-item-icon {
          width: 20%;
          height: 100%;
          display: flex;
          display: -webkit-flex;
          justify-content: center;
          -webkit-justify-content: center;
          align-items: center;
          -webkit-align-items: center;
          img {
            width: 40%;
          }
        }
        .function-item-content {
          width: 80%;
          height: 100%;
          border-bottom: 1px solid rgba(169,169,169,0.1);
          display: flex;
          display: -webkit-flex;
          justify-content: center;
          -webkit-justify-content: center;
          align-items: center;
          -webkit-align-items: center;
          .function-item-content-text {
            width: 90%;
            height: 100%;
            font-size: 15px;
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
            align-items: center;
            -webkit-align-items: center;
          }
          .function-item-content-icon {
            width: 10%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            img {
              width: 24%;
            }
          }
        }
      }
    }
  }
</style>
