<template>
  <div class="page-tabbar">
    <co-header fixed title="Tabbar">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <div class="page-content-main">
        <co-cell class="page-part" title="当前选中" :value="selected"></co-cell>
      </div>

      <co-tab-container class="page-tabbar-container" v-model="selected">
        <co-tab-container-item id="外卖">
          <co-cell v-for="n in 10" :title="'餐厅 ' + n" :key='n'></co-cell>
        </co-tab-container-item>
        <co-tab-container-item id="订单">
          <co-cell v-for="n in 5" :title="'订单 ' + n" :key='n'></co-cell>
        </co-tab-container-item>
        <co-tab-container-item id="发现">
          <co-cell v-for="n in 7" :title="'发现 ' + n" :key='n'></co-cell>
        </co-tab-container-item>
        <co-tab-container-item id="我的">
          <div class="page-part">
            <co-cell v-for="n in 12" :title="'我的 ' + n" :key='n'></co-cell>
          </div>
          <router-link to="/" class="button-wrapper">
            <co-button type="danger" size="large">退出</co-button>
          </router-link>
        </co-tab-container-item>
      </co-tab-container>
    </div>

    <co-tabbar v-model="selected" fixed>
      <co-tab-item id="外卖">
        <i slot="icon" class="coicon" :class="{'coicon-service_fill': selected == '外卖', 'coicon-service': selected !== '外卖'}"></i>
        外卖
      </co-tab-item>
      <co-tab-item id="订单">
        <!-- <img slot="icon" src="../assets/100x100.png"> -->
        <i slot="icon" class="coicon" :class="{'coicon-order_fill': selected == '订单', 'coicon-order': selected !== '订单'}"></i>
        订单
      </co-tab-item>
      <co-tab-item id="发现">
        <!-- <img slot="icon" src="../assets/100x100.png"> -->
        <i slot="icon" class="coicon" :class="{'coicon-manage_fill': selected == '发现', 'coicon-manage': selected !== '发现'}"></i>
        发现
      </co-tab-item>
      <co-tab-item id="我的">
        <!-- <img slot="icon" src="../assets/100x100.png"> -->
        <i slot="icon" class="coicon" :class="{'coicon-people_fill': selected == '我的', 'coicon-people': selected !== '我的'}"></i>
        我的
      </co-tab-item>
    </co-tabbar>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-tabbar',
  data() {
    return {
      selected: '外卖'
    };
  }
};
</script>

<style lang="less">
  .page-tabbar{
    .co-wrapper{
      bottom: 2.25rem!important;
    }
    .button-wrapper{
      display: inline-block;
      width: 100%;
      padding: 20px 10px;
    }
    .co-tabbar > .co-tab-item.is-selected{
      color: @theme-color;
    }
  }
</style>
