<template>
  <div class="goods">
    <div class="menu-wrapper">
      <ul>
        <li v-for="item in goods">
          <span class="text">
              <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper"></div>
  </div>
</template>

<script type="text/ecmascript-6">
 import axios from 'axios';

 const ERR_OK = 0;
 export default {
    props: {
      seller: {
        type: Object
      }
    },
 data() {
      return {
        goods: []
      };
 },
 created() {
     this.classMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special'];
 var that = this;
 axios.get('api/goods').then(function(response) {
       response = response.data;
 if (response.errno === ERR_OK) {
         that.goods = response;
 console.log(that.goods);
 }
     }).catch(function (error) {
       console.log(error);
 });
 }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .goods
 display flex
 position absolute
 top 174px
 bottom 46px
 width: 100%
    overflow hidden
 .menu-wrapper
 flex 0 0 80px
 width 80px
 background #f3f5f7
 .goods-wrapper
 flex 1
</style>