<template>
  <div>
    <div class="select">
      <multiselect
        style="float: left; marginLeft: 15%; width: 20%;"
        v-model="grade"
        :options="option1"
      ></multiselect>
      <multiselect
        style="float: left; marginLeft: 0.5%; width: 20%;"
        v-model="major"
        :options="option2"
      ></multiselect>
      <multiselect
        style="float: left; marginLeft: 0.5%; width: 20%;"
        v-model="type"
        :options="option3"
      ></multiselect>
    </div>
    <md-button
      class="md-raised"
      color="#999"
      style="float: left; marginLeft: 1%; width: 2%; marginTop:0.1%"
      v-on:click="Search"
    >검색</md-button>

    <!-- ==================================================================== -->
    <div v-if="SearchResult === true">
      <div v-for="Book in Books" :key="Book.id">
        <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 }}
              </div>
            </md-card-header-text>
            <md-card-media md-medium>
              <img v-bind:src="Book.src" />
            </md-card-media>
          </md-card-header>
          <md-card-actions>
            <md-button class="md-raised md-accent">Sell</md-button>
            <md-button class="md-raised md-primary">Buy Now</md-button>
          </md-card-actions>
        </md-card>
      </div>
    </div>
    <!-- =============================================   -->
    <div>
      <md-speed-dial :class="bottomPosition" style="marginRight:20%; marginBottom:8%">
        <md-button class="md-fab md-primary" v-on:click="active = true">
          <img src="../assets/icon-add.svg" />
        </md-button>
      </md-speed-dial>
    </div>
    <!-- =============서포터즈 submit 양식 ================== -->
    <div>
      <md-dialog :md-active.sync="active" style="width : 500px; height: 1000px ">
        <md-dialog-title>판매도서 등록</md-dialog-title>
        <md-field class="select">
          <label>책제목</label>
          <md-input v-model="submit.title"></md-input>
        </md-field>
        <md-field class="select">
          <label>학년</label>
          <md-input v-model="submit.grade"></md-input>
        </md-field>
        <md-field class="select">
          <label>학과</label>
          <md-input v-model="submit.major"></md-input>
        </md-field>
        <md-field class="select">
          <label>사진</label>
          <md-input v-model="submit.src"></md-input>
        </md-field>
        <md-dialog-actions>
          <md-button class="md-primary" v-on:click="active = false">Close</md-button>
          <md-button class="md-primary" v-on:click="Register">Submit</md-button>
        </md-dialog-actions>
      </md-dialog>
      <!-- ============================================== -->
    </div>
  </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 {
  components: { Multiselect },
  name: "MaterialIcons",
  data() {
    return {
      bottomPosition: "md-bottom-right",
      active: false,
      SearchResult: false,
      grade: null,
      major: null,
      type: null,
      option1: ["1학년", "2학년", "3학년", "4학년"],
      option2: ["소프트웨어학과", "미디어학과", "경제학과"],
      option3: ["전공 필수", "전공 선택", "교양선택", "기초과목"],
      Books: [],
      submit: {
        title: "",
        grade: "",
        major: "",
        src: ""
      }
    };
  },
  created() {
    this.$http.get("/api/books").then(response => {
      this.Books = response.data;
      console.log("Success");
      console.log(this.Books);
    });
  },
  methods: {
    Search: function() {
      if (this.grade !== null && this.major !== null && this.type !== null) {
        this.SearchResult = true;
        console.log(this.SearchResult);
      } else {
        alert("검색할 카테고리를 전부 입력해주세요");
      }
    },
    Register() {
      this.$http
        .post("/api/books", this.submit)
        .then(res => {
          console.log("Sumit Success");
        })
        .catch(err => {
          console.log("Submit failed");
        });
      this.active = false;
    }
  }
};
</script>

<style lang="css">
html,
body {
  text-align: center;
  margin: 0;
  width: 100%;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  justify-content: center;
}
.search {
  margin-bottom: 0.5%;
}
.select {
  text-align: center;
  margin-top: 2%;
}
.button {
  margin-top: 70px;
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>