<template>
  <div>
    <div
      class="container"
      style="background-color: #b4b4b4 ;
       border-radius: 10px 10px 0px 0px;
       box-shadow: 3px 0px 5px rgb(112, 112, 112);"
    >
      <div
        class="register"
        style="color: black; padding-left: 28px"
      >
        <b-row style="height: 50px">
          <b-col cols="6">
            <b-form-group
              label-cols-sm="10"
              label-align-sm="left"
              style="padding-left: 0px; font-size: 18px; font-weight: bold"
            >
            <div style="width: 100%; padding-top: 11px; margin-left: -450px">
                  {{ NewDoc.document_distinguish }}
                </div>
            </b-form-group>
          </b-col>
        </b-row>
      </div>
    </div>
    <!-- 表單填值的部分 -->
    <div
      class="container"
      style="border-radius: 0px 0px 15px 15px;
        padding: 20px;
        margin-top: 0px;
        margin-bottom: 0px;
        box-shadow: 3px 1px 5px rgb(112, 112, 112);
      "
    >
      <div
        class="register1"
        style="color: black"
      >
      <b-row>
          <!-- 文件編號 -->
          <b-col
            class="label_col"
            cols="2"
          >
            <!-- 必填米字號範例
            <span style="color: red">*</span>
            <span style="margin-left: 10px">??</span> -->
            <span>文件編號：</span>
          </b-col>
          <b-col cols="4">
            <b-form-input
              id="input-lg"
              style="width: 95%;margin-top: 25px"
              v-model="NewDoc.document_number"
            />
          </b-col>
           <!-- 歸檔編號 -->
          <b-col
            class="label_col"
            cols="3"
          >
            <span>歸檔編號：</span>
          </b-col>
          <b-col cols="3">
            <b-form-input
              id="input-lg"
              style="width: 93%;margin-top: 25px"
              v-model="NewDoc.file_number"
            />
          </b-col>
        </b-row>
        <!-- 工程名稱 |  取專案名稱(E801重建工程)? -->
        <b-row style="margin-top: 13px">
          <b-col
            cols="2"
            class="label_col"
          >
            <span>工程名稱：</span>
          </b-col>
          <b-col cols="10">
            <!-- b-form-input默認為text輸入 -->
            <b-form-input
              id="input-lg"
              style="width: 98%;margin-top: 25px"
              v-model="NewDoc.project_name"
            />
          </b-col>
        </b-row>
        <!-- 文件名稱 -->
        <b-row style="margin-top: 13px">
          <b-col
            cols="2"
            class="label_col"
          >
            <span>文件名稱：</span>
          </b-col>
          <b-col cols="10">
            <b-form-input
              id="input-lg"
              style="width: 98%;margin-top: 25px"
              v-model="NewDoc.document_name"
            />
          </b-col>
        </b-row>
        <!-- 文件描述 -->
        <b-row style="margin-top: 13px">
          <b-col
            cols="2"
            class="label_col"
          >
            <span>文件描述：</span>
          </b-col>
          <b-col cols="10">
            <b-form-textarea
              rows="4"
              no-resize
              style="width: 98%; margin-left: 0px;;margin-top: 25px"
              v-model="NewDoc.description"
            />
          </b-col>
        </b-row>
        <!-- 文件類別 -->
        <b-row style="margin-top: 13px">
          <b-col
            cols="2"
            class="label_col"
          >
            <span>文件類別：</span>
          </b-col>
          <b-col cols="10">
           <div style="width: 98%; margin-left: 1px">
              <b-form-select
                style="width: 100%; margin-top: 25px"
                v-model="NewDoc.document_type"
                tag-placeholder="加入欄位"
                caret="openselect"
                placeholder="請選擇文件類別"
                deselect-label="已選擇"
                :multiple="false"
                :taggable="true"
                selectLabel="請選擇"
                selectedLabel="已選擇"
                deselectLabel="取消選擇"
                @tag="addTagType"
                :options="getEnumWord('document_typeEnum', NewDoc.document_type)"
              >
              </b-form-select>
            </div>
          </b-col>
        </b-row>
        <!-- 版次
        <b-row style="margin-top: 13px">
          <b-col
            cols="2"
            class="label_col"
          >
            <span>版次：</span>
          </b-col>
          <b-col cols="10">
           <b-form-input
              id="input-lg"
              style="width: 98%;margin-top: 25px"
            />
          </b-col>
        </b-row> -->
        <!-- 權責 -->
        <b-row style="margin-top: 13px">
          <b-col
            cols="2"
            class="label_col"
          >
            <span>權責：</span>
          </b-col>
          <b-col cols="10">
           <b-form-input
              id="input-lg"
              style="width: 98%;margin-top: 25px"
              v-model="NewDoc.authority"
            />
          </b-col>
        </b-row>
      </div>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {

    }
  },
  async mounted () {
    try {
      if (this.NewDoc._id === undefined) {
        this.$store.dispatch(
          'newDocument/initDoc', this.$route.name
        )
      }
      // this.document_types = await this.lookupParam(
      //   'document_type'
      // )
      // this.document_type = await this.lookupParam(
      //   'document_type'
      // )
    } catch (err) {
      console.log(err)
    }
  },
  components: {
    Multiselect
  },
  computed: {
    ...mapState({
      NewDoc: (state) => state.newDocument.NewDoc,
      enums: (state) => state.enums
    }),
    ...mapGetters(['getEnumWord'])
  }
}
</script>

<style lang="scss" scoped>

.label_col {
  margin-top: 35px;
  padding-left: 30px;
}
.container {
  margin-top: 10px;
  width: 75%;
  height: 95%;
}
.register {
  padding-top:10px;
}
.register1 {
  padding-top:0px;
}
.multiselect--disabled {
  background-color: #ffffff;
  border: 0;
  color: black;
  opacity: 0.9;
}
.multiselect--disabled.multiselect__placeholder {
  color:    #fff;
}
.multiselect--disabled.multiselect__tags {
  border: 0 !important;
}

</style>
