<template>
  <form>
    <div
      class="modal-card"
      style="width: 1000px"
    >
      <header class="modal-card-head">
        <p class="modal-card-title">
          공지사항 상세보기
        </p>
      </header>
      <section class="modal-card-body">
        <b-field
          label="제목"
          expanded
        >
          <b-input
            v-model="this.modal.title"
            disabled
          />
        </b-field>
        <b-field grouped>
          <b-field
            label="작성자"
            expanded
          >
            <b-input
              v-model="this.modal.createUser"
              disabled
            />
          </b-field>
          <b-field
            label="작성시간"
            expanded
          >
            <b-input
              v-model="this.modal.createTime"
              disabled
            />
          </b-field>
        </b-field>
        <b-field
          label="내용"
          expanded
        >
          <b-input
            v-model="this.modal.contents"
            disabled
            type="textarea"
            rows="17"
          />
        </b-field>
        <!-- 공지사항일때만 보여주기 -->
        <b-field
          v-if="serviceName == 'notice'"
          label="파일링크"
          expanded
        >
          <b-input
            v-model="this.modal.fileLink"
            readonly
          />
        </b-field>
      </section>
      <footer class="modal-card-foot">
        <p class="modal-card-title" />
        <b-button
          icon="magnify"
          class="button"
          type="button"
          @click="$parent.close()"
        >
          <span>닫기</span>
        </b-button>
      </footer>
    </div>
  </form>
</template>

<script>
export default {
  props: {
    modal: {
      type: Object,
    },
    serviceName: String,
  },
  mounted() {},
  methods: {},
};
</script>
