<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 0 0
      "
    >
      <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">
                {{ currentProject.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">
                {{ currentProject.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">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;">
              <span>{{officialDoc.received_number}}</span>
            </div>
            <div v-else>
            <b-form-input
              id="input-lg"
              style="width: 95%;font-size:16px"
              v-model="officialDoc.received_number"
            ></b-form-input>
            </div>
          </b-col>
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>收文日期：</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.received_date}}</span>
            </div>
            <div v-else>
            <b-form-datepicker
              id="inspectionFilter"
              name="checkdate"
              style="width: 95%;font-size:16px"
              v-model="officialDoc.received_date"
            >
            </b-form-datepicker>
            </div>
          </b-col>
        </b-row>

        <!-- 來文字號 | 來文日期 -->
        <b-row style="margin-top: 12px">
          <b-col class="label_col" cols="2">
            <!-- 自動生成編號寫在API -->
            <span style="color: red">*</span>
            <span>來文字號：</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;">
              <span>{{officialDoc.issue_text_number}}</span>
            </div>
            <div v-else>
            <b-form-input
              id="input-lg"
              style="width: 95%;font-size:16px"
              v-model="officialDoc.issue_text_number"
            ></b-form-input>
            </div>
          </b-col>
          <b-col cols="2" class="label_col">
            <span style="color: red">*</span>
            <span>來文日期：</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.issue_date}}</span>
            </div>
            <div v-else>
            <b-form-datepicker
              v-model="officialDoc.issue_date"
              style="font-size:16px;width: 95%"
              placeholder="請選擇日期"
              @input="checkLimitedDate"
            ></b-form-datepicker>
            </div>
          </b-col>
        </b-row>

        <!-- 來文單位 -->
        <b-row style="margin-top: 12px">
          <b-col class="label_col" style="padding-left:40px;" cols="2">
            <span>來文單位：</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;">
              <span>{{officialDoc.issuer}}</span>
            </div>
            <div v-else>
            <b-form-input
              v-model="officialDoc.issuer"
              style="width: 95%;font-size:16px"
              id="input-lg"
            >
            </b-form-input>
            </div>
          </b-col>
           <b-col cols="2" class="label_col">
            <span style="color: red">*</span>
            <span>歸檔編號：</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.archive_number}}</span>
            </div>
            <div v-else>
            <b-form-input
              id="input-lg"
              style="width: 95%;font-size:16px"
              v-model="officialDoc.archive_number"
            ></b-form-input>
            </div>
          </b-col>
        </b-row>

        <!-- 正本 -->
        <b-row style="margin-top: 20px">
          <b-col class="label_col" cols="2">
            <span style="color: red">*</span>
            <span>正本:</span>
          </b-col>
          <b-col cols="10">
               <div v-if="isFix" style="width: 97%;padding:10px 12px 10px;">
              <span>{{originalName}}</span>
            </div>
            <div v-else style="width: 98%;">
              <multiselect
                v-model="officialDoc.original"
                tag-placeholder="加入欄位"
                caret="openselect"
                placeholder="請選擇正本單位"
                deselect-label="已選擇"
                :options="external_units.paramsValue"
                :multiple="true"
                :taggable="true"
                @tag="addTagOriginal"
                selectLabel="請選擇"
                selectedLabel="已選擇"
                deselectLabel="取消選擇"
              >
              </multiselect>
            </div>
          </b-col>
        </b-row>

        <!-- 副本 -->
        <b-row style="margin-top: 12px">
          <b-col class="label_col" style="padding-left:40px;" cols="2">
            <span>副本:</span>
          </b-col>
          <b-col cols="10">
            <div v-if="isFix" style="width: 98%;padding:8px 12px 10px;">
              <span>{{copyName}}</span>
            </div>
            <div v-else style="width: 98%;">
              <multiselect
                v-model="officialDoc.copy"
                tag-placeholder="加入欄位"
                caret="openselect"
                placeholder="請選擇副本單位"
                deselect-label="已選擇"
                :options="external_units.paramsValue"
                :multiple="true"
                :taggable="true"
                @tag="addTagCopy"
                selectLabel="請選擇"
                selectedLabel="已選擇"
                deselectLabel="取消選擇"
              >
              </multiselect>
            </div>
          </b-col>
        </b-row>

        <!-- 依據文號 -->
        <b-row style="margin-top: 12px">
          <b-col class="label_col" style="padding-left:40px;" cols="2">
            <span>依據文號:</span>
          </b-col>
          <b-col cols="8">
              <div v-if="isFix" style="width: 98%;padding:8px 12px 10px;">
              <span>{{referenceNumber}}</span>
            </div>
            <div v-else style="width: 98%;">
            <multiselect
              v-model="officialDoc.reference_number"
              placeholder="請輸入依據文號"
              :options="reference_numbers"
              :multiple="true"
              :showNoOptions="false"
              :taggable="false"
              deselect-label="已選擇"
              selectLabel="請選擇"
              selectedLabel="已選擇"
              deselectLabel="取消選擇"
            >
              <span slot="noResult">查無此公文文號</span>
            </multiselect>
            </div>
          </b-col>
          <b-col cols="2">
            <b-button
              style="
                background-color: rgb(75, 102, 255);
                font-size: 16px;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 7px;
                padding-bottom: 6px;
                margin-left: 9px;
                color: white;
                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
              "
              @click="lookupReferenceList"
            >
              查詢
            </b-button>
          </b-col>
        </b-row>

        <!-- 公文類型 -->
        <b-row style="margin-top: 15px">
          <b-col class="label_col" style="padding-left:40px;" cols="2">
            <span>公文類型:</span>
          </b-col>
          <b-col cols="10">
             <div v-if="isFix" style="width: 98%;padding:8px 12px 10px;">
              <span>{{officialDoc.document_classification}}</span>
            </div>
            <div v-else style="width: 98%;">
              <multiselect
                v-model="officialDoc.document_classification"
                tag-placeholder="加入欄位"
                caret="openselect"
                placeholder="請選擇公文類型"
                deselect-label="已選擇"
                :options="document_classifications.paramsValue"
                :multiple="false"
                :taggable="true"
                @tag="addTagClassification"
                selectLabel="請選擇"
                selectedLabel="已選擇"
                deselectLabel="取消選擇"
              >
              </multiselect>
            </div>
          </b-col>
        </b-row>

        <!-- 主旨 -->
        <b-row style="margin-top: 15px">
          <b-col class="label_col" cols="2">
            <span style="color: red">*</span>
            <span>主旨:</span>
          </b-col>
          <b-col cols="10">
            <b-form-textarea
              id="textarea"
              v-model="officialDoc.subject"
              placeholder="請輸入主旨"
              rows="3"
              no-resize
              :disabled="isFix"
              style="width: 98%;padding:8px 12px 10px;font-size:16px"
            ></b-form-textarea>
          </b-col>
        </b-row>

        <!-- 說明 -->
        <b-row style="margin-top: 18px">
          <b-col class="label_col" style="padding-left:40px;" cols="2">
            <span>說明:</span>
          </b-col>
          <b-col cols="10">
          <div v-if="isFix" style="width: 97%; padding: 8px 12px 10px">
                <span>{{ officialDoc.instruction }}</span>
              </div>
              <div v-else>
              <b-form-textarea
                name="ed1"
                id="ed1"
                v-model="officialDoc.instruction"
                placeholder="請輸入說明"
                rows="6"
                no-resize
                style="width: 98%; padding: 8px 12px 10px; font-size: 16px"
                :disabled="isFix"
              /></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">
            <b-form-textarea
              id="textarea"
              v-model="officialDoc.appendix"
              placeholder="請輸入附件說明"
              rows="1"
              no-resize
              style="width: 98%;padding:8px 12px 10px;font-size:16px"
              :disabled="isFix"
            ></b-form-textarea>
          </b-col>
        </b-row>

        <!-- 承辦人| 限辦日期-->
        <b-row style="margin-top: 15px">
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>承辦人:</span>
          </b-col>
          <b-col cols="4">
            <div style="width: 95%">
              <b-form-select
                v-model="officialDoc.undertaker"
                :disabled="isFix"
                style="font-size:16px;"
                :options="
                  staffs.map(staff => {
                    return {text: staff.name, value: staff._id}
                  })
                "
              >
              </b-form-select>
            </div>
          </b-col>
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>限辦日期:</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.limited_date}}</span>
            </div>
            <div v-else>
            <b-form-datepicker
              v-model="officialDoc.limited_date"
              style="font-size:16px;width: 95%"
              placeholder="請選擇日期"
            ></b-form-datepicker>
            </div>
          </b-col>
        </b-row>

        <!-- 標別 -->
        <b-row style="margin-top: 12px">
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>標別:</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.standard}}</span>
            </div>
            <div v-else>
            <b-form-input
              id="input-lg"
              style="width: 95%;font-size:16px"
              v-model="officialDoc.standard"
            ></b-form-input>
            </div>
          </b-col>
        </b-row>

        <!-- 速別| 密等-->
        <b-row style="margin-top: 22px;">
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>速別:</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.urgency_level}}</span>
            </div>
            <div v-else>
            <b-form-select
              v-model="officialDoc.urgency_level"
              style="width: 95%;font-size:16px"
              :options="
                getEnumWord('urgency_levelEnum', officialDoc.urgency_level)
              "
            >
            </b-form-select>
            </div>
          </b-col>
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>密等:</span>
          </b-col>
          <b-col cols="4">
            <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.confidentiality_class}}</span>
            </div>
            <div v-else>
            <b-form-select
              v-model="officialDoc.confidentiality_class"
              style="width: 95%;font-size:16px"
              :options="
                getEnumWord(
                  'confidentiality_classEnum',
                  officialDoc.confidentiality_class
                )
              "
            >
            </b-form-select>
            </div>
          </b-col>
        </b-row>

        <!-- 解密條件| 保密期限-->
        <b-row style="margin-top: 12px">
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>解密條件:</span>
          </b-col>
          <b-col cols="4">
             <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.release_condition}}</span>
            </div>
            <div v-else>
            <b-form-select
              v-model="officialDoc.release_condition"
              style="width: 95%;font-size:16px"
              :options="
                getEnumWord(
                  'release_conditionEnum',
                  officialDoc.release_condition
                )
              "
            >
            </b-form-select>
            </div>
          </b-col>
          <b-col cols="2" style="padding-left:40px;" class="label_col">
            <span>保密期限:</span>
          </b-col>
          <b-col cols="4">
             <div v-if="isFix" style="width: 97%;padding:8px 12px 10px;font-size:16px">
              <span>{{officialDoc.confidentiality_period}}</span>
            </div>
            <div v-else>
            <b-form-datepicker
              v-model="officialDoc.confidentiality_period"
              class="mb-2"
              style="width: 95%;font-size:16px"
              placeholder="請選擇日期"
              :disabled="isFix"
            ></b-form-datepicker>
            </div>
          </b-col>
        </b-row>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'
import { mapActions, mapState, mapGetters } from 'vuex'

export default {
  data () {
    return {
      staffs: [],
      reference_numbers: [],
      external_units: {
        _id: '',
        paramsValue: []
      },
      document_classifications: {
        _id: '',
        paramsValue: []
      },
      isFix: true
    }
  },
  components: {
    Multiselect
  },
  filters: {
    ellipsis (value) {
      if (value.length > 18) {
        return value.slice(0, 18) + '...'
      }
      return value
    }
  },
  computed: {
    ...mapState({
      officialDoc: state => state.officialDocument.officialDoc,
      relatedList: state => state.officialDocument.relatedList,
      currentProject: state => state.project.current,
      enums: state => state.enums,
      currentUser: state => state.user.current,
      paramSetting: state => state.project.selectedProjectRole
    }),
    ...mapGetters(['getEnumWord']),
    ...mapGetters('officialDocument', [
      'originalName',
      'copyName',
      'referenceNumber'
    ])
  },
  async created () {
    if (this.$route.query.odid !== undefined) {
      this.$store.dispatch(
        'officialDocument/getOfficialDocument',
        this.$route.query.odid
      )
    }
  },
  async mounted () {
    try {
      this.external_units = await this.lookupParam('external_unit')
      this.document_classifications = await this.lookupParam(
        'document_classification'
      )
      if (this.officialDoc._id === undefined) {
        this.$store.dispatch(
          'officialDocument/initOfficialDoc',
          this.$route.name
        )
      }
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['_id', 'name']
      })
      await this.referenceNumberList()
      await this.lookupProjectRoleParamSetting(this.currentUser.projectRole)
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('paramsSetting', ['lookupParam', 'updateParam']),
    ...mapActions('project', ['lookupProjectRoleParamSetting']),
    isSaved () {
      this.isFix = true
    },
    isEdited () {
      this.isFix = false
    },
    addTagOriginal (newTag) {
      this.officialDoc.original.push(newTag)
      this.checkAndAddExternalUnitsParamsValue(newTag)
    },
    addTagCopy (newTag) {
      this.officialDoc.copy.push(newTag)
      this.checkAndAddExternalUnitsParamsValue(newTag)
    },
    addTagReferenceNumber (newTag) {
      this.officialDoc.reference_number.push(newTag)
    },
    async addTagClassification (newTag) {
      if (!this.document_classifications.paramsValue.includes(newTag)) {
        this.document_classifications.paramsValue.push(newTag)
        await this.updateParam({
          id: this.document_classifications._id,
          paramsValue: this.document_classifications.paramsValue
        })
        this.document_classifications = await this.lookupParam(
          'document_classification'
        )
      }
      this.officialDoc.document_classification = newTag
    },
    async checkAndAddExternalUnitsParamsValue (newTag) {
      if (!this.external_units.paramsValue.includes(newTag)) {
        this.external_units.paramsValue.push(newTag)
        await this.updateParam({
          id: this.external_units._id,
          paramsValue: this.external_units.paramsValue
        })
        this.external_units = await this.lookupParam('external_unit')
      }
    },
    async lookupReferenceList () {
      this.$store.commit('officialDocument/resetList')
      await this.$store.dispatch(
        'officialDocument/lookupReferenceList',
        this.officialDoc.reference_number
      )
    },
    async referenceNumberList () {
      await this.$store.dispatch('officialDocument/getDocToRelate')
      for (let i = 0; i < this.relatedList.length; i++) {
        const element = this.relatedList[i].issue_text_number
        if (element !== undefined) {
          this.reference_numbers.push(element)
        }
      }
    },
    checkLimitedDate () {
      let afterProcessing = new Date()
      afterProcessing.setDate(new Date(this.officialDoc.issue_date).getDate() + Number(this.paramSetting.receiveHandlingDay))
      this.officialDoc.limited_date = afterProcessing
    }
  },
  watch: {
    officialDoc: {
      handler (newName, oldName) {
        if (newName._id === undefined) {
          this.isFix = false
        } else {
          this.isFix = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-group.required .control-label:after {
  content: "*";
  color: red;
}
.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;
}
.label_col {
  margin-top: 8px;
  padding-left: 30px;
}
.form-control {
  color: black;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.custom-select:disabled {
  color: black !important;
  opacity: 1;
  background-color: #ffffff;
  background-image: none !important;
  border: 0;
}
.form-control:disabled {
  background-color: #ffffff;
  border: 0;
  color: black;
}
.form-control:disabled::-webkit-input-placeholder {
  color: #fff;
}
.b-form-btn-label-control.form-control[aria-disabled="true"],
.b-form-btn-label-control.form-control[aria-readonly="true"] {
  background-color: #ffffff;
  border: 0;
  color: black;
}
.container {
  margin-top: 0px;
  width: 90%;
  height: 95%;
  padding: 0;
}
</style>
