<template>
  <div class="page-demo">
    <co-header fixed title="CoUI 首页">
    </co-header>
    <div class="co-wrapper co-scroller">
      <div v-for="group in navs" v-show="['APP 开发', 'JS SDK'].indexOf(group.title) === -1" :key="group.title">
        <div class="page-title page-title-style" v-text="group.title"></div>
        <co-cell v-for="(item, i) in group.list"
          :key="i"
          :to="item.path"
          is-link>
          <div slot="title">
            <i :class="['indexicon', 'icon-' + item.icon]"></i>
            <span>{{ item.name }}</span>
          </div>
        </co-cell>
      </div>
    </div>
  </div>
</template>

<script type="es6">
  import navs from '../route.json';

  export default {
    name: 'index-alive',
    data() {
      return {
        navs: []
      };
    },
    methods: {
      goNative() {
        if (window['xSimple']) {
          window['xSimple'].cor_backNative();
        } else {
          this.$toast('xSimple对象不存在!\n\r请在Coracle移动应用门户APP上预览!');
        }
      }
    },
    created() {
      this.navs = navs;
    }
  };
</script>

<style lang="less">
  ::-webkit-scrollbar {
    display: none;
  }

  .co-wrapper {
    padding: 0.5rem 0;
  }

  .page-swipe-desc {
    text-align: center;
    color: #666;
    margin: 5px;
  }

  .page-demo {
    padding-bottom: 50px;

    .page-title {
      font-size: 20px;
      margin: 20px auto;
      text-align: center;
      display: block;
      line-height: 1;
    }

    .page-title-style {
      color: #6d6d72;
      font-size: 14px;
      margin: 10px 0px 10px 10px;
      text-align: left;
    }

    .indexicon {
      font-size: 22px;
      color: #26a2ff;
      display: inline-block;
      width: 10px;
      vertical-align: middle;

      &.icon-swipe {
        font-size: 26px;
      }

      &.icon-checklist {
        font-size: 18px;
      }
    }
  }
</style>
