<template>
  <div class="title-box flex justify-between mb40">
    <p class="title">{{ category }}</p>
  </div>
  <div class="board-wrap">
    <div class="flex align-center">
      <label for="" class="title2">{{ title }}</label>
    </div>
    <hr />
    <textarea readonly name="" id="">{{ content }}</textarea>
    <hr />
    <div class="flex align-center">
      <label for="" class="title2">첨부파일</label>
      <label for="" class="title2" v-if="file">{{ file.fileNm }}</label>
    </div>
    <hr />
    <div class="flex justify-between">
      <button type="button" class="flex align-center" @click="prevBoard()">
        <svg-icon type="mdi" :path="mdilChevronLeft"></svg-icon>
        <p>이전글</p>
      </button>
      <button type="button" class="flex align-center" @click="nextBoard()">
        <p>다음글</p>
        <svg-icon type="mdi" :path="mdilChevronRight"></svg-icon>
      </button>
    </div>
  </div>
  <div class="flex justify-between mt50">
    <button
      type="button"
      title="글쓰기"
      class="new-btn"
      @click="goToPage('Board')"
    >
      목록
    </button>
    <div class="flex">
      <button
        type="button"
        title="글쓰기"
        class="new-btn mr10"
        @click="goToPage('noticeInsert')"
      >
        수정
      </button>
      <button
        type="button"
        title="글쓰기"
        class="new-btn"
        @click="[deleteBoard(), goToPage('Board')]"
      >
        삭제
      </button>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import { mdilChevronRight, mdilChevronLeft } from "@mdi/light-js";
import axios from "axios";

export default {
  data() {
    return {
      mdiMagnify: mdiMagnify,
      mdilChevronRight: mdilChevronRight,
      mdilChevronLeft: mdilChevronLeft,

      dataList: null,
      sclsId: "",
      bbsId: "",

      title: "",
      content: "",
      category: "",
      file: "",
      time: "",
      user: "",
    };
  },
  methods: {
    goToPage(page) {
      this.$router.push({ name: page });
    },

    findBoard() {
      const vm = this;
      vm.bbsId = JSON.parse(sessionStorage.getItem("bbsId"));
      console.log(vm.bbsId);
      axios({
        url: "/board/find.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          bbsId: vm.bbsId,
        },
      })
        .then(function (res) {
          console.log("boardData - response : ", res.data);
          vm.dataList = res.data.result[0].boardClass[0].board[0];
          vm.title = vm.dataList.bbsTtl;
          vm.content = vm.dataList.bbsCnt;
          vm.category = vm.dataList.bbsCls;
          vm.time = vm.dataList.bbsTm;
          vm.findFile();
        })
        .catch(function (error) {
          console.log("boardData - error : ", error);
        });
    },

    findFile() {
      const vm = this;
      axios({
        url: "/file/find.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          file_mng_id: vm.dataList.fileMngId,
        },
      })
        .then(function (res) {
          console.log("fileInfo - response : ", res.data.list[0]);
          vm.file = res.data.list[0];
          sessionStorage.setItem("file", JSON.stringify(vm.file));
        })
        .catch(function (error) {
          console.log("result - error : ", error);
        });
    },

    prevBoard() {
      const vm = this;
      axios({
        url: "/board/prevBoard.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          sclsId: vm.dataList.sclsId,
          bbsId: vm.dataList.bbsId,
        },
      })
        .then(function (res) {
          console.log("dataList - response : ", res.data);
          vm.dataList = res.data[0].boardClass[0].board[0];
          vm.title = vm.dataList.bbsTtl;
          vm.content = vm.dataList.bbsCnt;
          vm.category = vm.dataList.bbsCls;
          vm.time = vm.dataList.bbsTm;
          vm.findFile();
        })
        .catch(function (error) {
          console.log("result - error : ", error);
          alert("첫번째 글 입니다.");
        });
    },

    nextBoard() {
      const vm = this;
      axios({
        url: "/board/nextBoard.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          sclsId: vm.dataList.sclsId,
          bbsId: vm.dataList.bbsId,
        },
      })
        .then(function (res) {
          console.log("dataList - response : ", res.data);
          vm.dataList = res.data[0].boardClass[0].board[0];
          vm.title = vm.dataList.bbsTtl;
          vm.content = vm.dataList.bbsCnt;
          vm.category = vm.dataList.bbsCls;
          vm.time = vm.dataList.bbsTm;
          vm.findFile();
        })
        .catch(function (error) {
          console.log("result - error : ", error);
          alert("가장 최신 글 입니다.");
        });
    },
    deleteBoard() {
      const vm = this;
      axios({
        url: "/board/delete.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          bbsId: vm.dataList.bbsId,
        },
      })
        .then(function (res) {
          console.log("delete - response : ", res.data);
          alert("삭제 되었습니다.");
        })
        .catch(function (error) {
          console.log("rssult - error : ", error);
        });
    },
  },
  watch: {},
  computed: {},
  components: {
    SvgIcon,
  },
  mounted() {
    console.log("Main2 mounted");
    this.findBoard();
  },
};
</script>
