<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="buyBook">구매</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 {
      buyer: {},
      seller: {},
      book: {},
      userId: "",
      sellerId: ""
    };
  },
  created() {
    var id = this.$route.params.id;
    this.$http.get(`/api/books/${id}`).then(response => {
      this.book = response.data;
    });
  },
  methods: {
    buyBook() {
      this.$http
        .post("/api/transaction/buy", {
          bookTitle: this.book.title
        })
        .then(response => {
          alert("구매에 성공하였습니다. 판매자에게 메일을 보냅니다.");
          this.buyerId = response.data.buyerId;
          this.sellerId = response.data.sellerId;
          this.sendEmail();
        })
        .catch(error => {
          alert(error);
        });
    },
    sendEmail() {
      console.log("sendEmail start");
      this.$http
        .post("/api/login/getUserInfo", {
          buyerId: this.buyerId, // buyer
          sellerId: this.sellerId
        })
        .then(response => {
          this.buyer = response.data.buyer;
          this.seller = response.data.seller;
          this.$http
            .post("/api/emails", {
              sellerEmail: this.seller.email,
              bookTitle: this.book.title,
              buyerPhoneNumber: this.buyer.phonenumber
            })
            .then(response => {
              alert("이메일 전송 완료");
              this.$router.push("/home");
            }),
            error => {
              alert(error.response.data.error);
            };
        });
    }
  }
};
</script>