<template>
  <div>
    <div class="container" style="box-shadow: 3px 1px 5px rgb(157, 156, 156);border-radius:15px 15px 15px 15px">
    <div
      style="
        background-color: rgb(199, 197, 197);
        border-radius: 15px 15px 0px 0px;
      "
    >
      <div style="color: black; padding-left: 30px">
        <b-row style="height: 50px">
          <b-col cols="8">
            <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              style="margin-right: -50px; font-size: 16px; font-weight: bold"
              label="計畫名稱:"
              label-for="input-lg"
            >
            <div style="width: 100%; margin-left:-80px;padding-right:10px;padding-top: 11px">
                {{ project.name }}
              </div>
            </b-form-group>
          </b-col>

          <b-col cols="4">
            <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              style="padding-left: 0px; font-size: 16px; font-weight: bold; margin-left:-60px"
              label="計畫編號:"
              label-for="input-lg"
            >
              <div style="width: 100%; padding-top: 11px">
                {{ project.number }}
              </div>
            </b-form-group>
          </b-col>
        </b-row>
      </div>
    </div>

    <div
      style="
        border-radius: 0px 0px 15px 15px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <div style="color: black">
        <!-- 發文編號|發文日期 -->
        <b-row>
          <b-col class="label_col" style="padding-left:40px;" cols="2">
            <!-- 自動生成編號寫在API -->
            <span>發文編號：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.issue_number }}
            </span>
          </b-col>
          <b-col cols="2" class="label_col" style="padding-left:40px;">
            <span>發文日期：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.issue_date }}
            </span>
          </b-col>
        </b-row>

        <!-- 發文單位|發文字號 -->
        <b-row style="margin-top: 20px">
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>發文字號：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.issue_text_number }}
            </span>
          </b-col>
          <b-col class="label_col"  style="padding-left:40px;" cols="2">
            <span>發文單位：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.issuer }}
            </span>
          </b-col>
        </b-row>

        <!-- 正本 -->
        <b-row style="margin-top: 20px">
          <b-col class="label_col"  style="padding-left:40px;" cols="2">
            <span>正本：</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 95%; margin-left: 1px">
              <span style="padding-left: 0; padding-right: 0">
                {{ this.originalName }}
              </span>
            </div>
          </b-col>
        </b-row>

        <!-- 副本 -->
        <b-row style="margin-top: 20px">
          <b-col class="label_col"  style="padding-left:40px;" cols="2">
            <span>副本：</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 95%; margin-left: 1px">
              <span style="padding-left: 0; padding-right: 0">
                {{ this.copyName }}
              </span>
            </div>
          </b-col>
        </b-row>

        <!-- 依據文號 -->
        <b-row style="margin-top: 20px">
          <b-col class="label_col"  style="padding-left:40px;" cols="2">
            <span>依據文號：</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 95%; margin-left: 1px">
              <span style="padding-left: 0; padding-right: 0">
                {{ referenceNumber }}
              </span>
            </div>
          </b-col>
        </b-row>

        <!-- 公文類型 -->
        <b-row style="margin-top: 20px">
          <b-col class="label_col"  style="padding-left:40px;" cols="2">
            <!-- 自動生成編號寫在API -->
            <span>公文類型：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.document_classification }}
            </span>
          </b-col>
        </b-row>

        <!-- 主旨 -->
        <b-row style="margin-top: 20px">
          <b-col class="label_col"  style="padding-left:40px;" cols="2">
            <span>主旨：</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 95%; margin-left: 1px">
              <span style="padding-left: 0; padding-right: 0">
                {{ officialDoc.subject }}
              </span>
            </div>
          </b-col>
        </b-row>

        <!-- 說明 -->
        <b-row style="margin-top: 20px">
          <b-col class="label_col"  style="padding-left:40px;" cols="2">
            <span>說明：</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 95%; margin-left: 1px">
              <span style="padding-left: 0; padding-right: 0">
                {{ officialDoc.instruction }}
              </span>
            </div>
          </b-col>
        </b-row>

        <!-- 承辦人| 辦理日期-->
        <b-row style="margin-top: 20px">
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>承辦人：</span>
          </b-col>
          <b-col cols="4">
            <div>
              <span
                v-if="officialDoc"

                style="padding-left: 0; padding-right: 0"
              >
                {{ undertakerName }}
              </span>
            </div>
          </b-col>
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>辦理日期：</span>
          </b-col>
          <b-col cols="4">
            <div>
              <span style="padding-left: 0; padding-right: 0">
                {{ officialDoc.handle_period }}
              </span>
            </div>
          </b-col>
        </b-row>

        <!-- 標別 -->
        <b-row style="margin-top: 20px">
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>標別：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.standard }}
            </span>
          </b-col>
        </b-row>

        <!-- 速別| 密等-->
        <b-row style="margin-top: 20px; margin-bottom: 20px">
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>速別：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.urgency_level }}
            </span>
          </b-col>
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>密等：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.confidentiality_class }}
            </span>
          </b-col>
        </b-row>

        <!-- 解密條件| 保密條件-->
        <b-row style="margin-top: 20px; margin-bottom: 30px">
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>解密條件：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.release_condition }}
            </span>
          </b-col>
          <b-col cols="2" class="label_col"  style="padding-left:40px;">
            <span>保密期限：</span>
          </b-col>
          <b-col cols="4">
            <span style="padding-left: 0; padding-right: 0">
              {{ officialDoc.confidentiality_period }}
            </span>
          </b-col>
        </b-row>
      </div>
    </div>
    </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      officialDoc: state => state.officialDocument.officialDoc,
      enums: state => state.enums,
      project: state => state.project.current
    }),
    undertakerName () {
      if (this.officialDoc.undertaker === undefined) return
      return this.officialDoc.undertaker.name
    },
    ...mapGetters('officialDocument', [
      'originalName',
      'copyName',
      'referenceNumber'
    ])
  },
  async created () {
    if (this.$route.query.odid !== undefined) {
      await this.$store.dispatch(
        'officialDocument/lookupOfficialDoc',
        this.$route.query.odid
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content .container-fluid,
.main-content .container-sm,
.main-content .container-md,
.main-content .container-lg,
.main-content .container-xl {
  padding-left: 15px !important;
  padding-right: 39px !important;
}
.container {
  margin-top: 0px;
  width: 90%;
  height: 95%;
  padding: 0;
}
</style>
