<template>
  <div>
    <md-card
      style="width: 50%; margin: 4px; marginTop:100px; display: inline-block; vertical-align: top;"
    >
      <md-card-header>
        <md-card-header-text>
          <div class="md-title">
            {{ book.title }}
            <br />
            <br />
          </div>
          <div class="md-subhead" style="text-align:left; font-weight:bold;">
            # 학년: {{ book.grade }}
            <br />
            # 전공: {{ book.major }}
            <br />
            # 세부사항: {{ book.type }}
            <br />
            # 매물: {{ book.stock }}
            <br />
          </div>
        </md-card-header-text>
        <md-card-media md-medium>
          <img v-bind:src="book.src" />
        </md-card-media>
      </md-card-header>
    </md-card>

    <md-card
      style="width: 50%; margin: 4px; marginTop:100px; display: inline-block; vertical-align: top;"
    >
      <md-card-header>
        <div class="md-title">
          이 책을 판매하시겠습니까?
        </div>
      </md-card-header>
      <md-card-actions>
        <md-button class="md-raised md-primary" v-on:click="sellBook"
          >판매</md-button
        >
      </md-card-actions>
    </md-card>
  </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 {
  data() {
    return {
      book: {},
      userId: ""
    };
  },
  created() {
    var id = this.$route.params.id;
    this.$http.get(`/api/books/${id}`).then(response => {
      this.book = response.data;
    });
    // this.$http.get("/api/login/getUserId").then(response => {
    //   console.log("getUserIDstart");
    //   this.userId = response.data;
    // });
  },
  methods: {
    getId() {
      this.$http.get("/api/login/getUserId").then(response => {
        console.log("rd" + response.data);
        this.userId = response.data;
      });
    },
    sellBook() {
      var id = this.$route.params.id;
      this.getId();
      console.log("user:" + this.userId);
      this.$http
        .post(`/api/books/${id}`, {
          userId: this.userId
        })
        .then(
          response => {
            alert("판매 대기열에 등록하였습니다.");
            //this.$router.push("home");
          },
          error => {
            alert(error.response.data.error);
          }
        )
        .catch(error => {
          alert(error);
        });
    }
  }
};
</script>