<template>
  <div class="viewport" style="overflow: auto;">
    <md-toolbar :md-elevation="1" style="height : 30px" class="md-title">
      <span>Sellist</span>
    </md-toolbar>
    <md-list class="md-double-line" style="height : 230px">
      <md-list-item  v-for="user in users" :key="user.title">
        <md-button class="md-icon-button md-raised" style="color:#1DDB16;backgroundColor:#1DDB16">
          <img src="../../assets/book-open-flat.png" />
        </md-button>
        <div class="md-list-item-text">
          <span>&nbsp;&nbsp; {{user.title}}</span>
          <span>&nbsp;&nbsp;판매 대기</span>
        </div>
        <md-button class="md-icon-button md-raised md-accent">
          <img src="../../assets/x-512.png" />
        </md-button>
        <md-button class="md-icon-button md-raised md-primary">
          <img src="../../assets/check-icon.png" />
        </md-button>
      </md-list-item>
    </md-list>

  </div>
</template>

<script>
import Vue from 'vue'
import VueMaterial from 'vue-material'
import Multiselect from 'vue-multiselect'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)
  export default {
  name: 'SubheaderExample',

  data: () => ({
    users: [],
  }),
  methods: {

  },
 
  mounted: function () {
       this.$http.get("/api/books").then(response => {
      this.users = response.data;
      console.log("success");
      console.log(this.users);
    })
  }
  }
  

  
</script>

<style lang="scss" scoped>
  .viewport {
    width: 100%;
    display: inline-block;
    vertical-align: top;
  }
</style>