<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"
              label="新增提送文件"
            >
            </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>
        <!-- 工程名稱-->
        <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"
                placeholder="請選擇文件類別"
                :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"
              v-model="NewDoc.version"
            />
          </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-select
              id="input-lg"
              style="width: 98%;margin-top: 25px"
              v-model="NewDoc.authority"
              :options="
                  staffs.map((staff) => {
                    return { text: staff.name, value: staff.name };
              })"
            />
          </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 {
      staffs: []
      // external_units: [],\
      // isFix: false,
      // selected: null,
      // undertaker: null,
      // levelEnum: null,
      // aaa: [],
    }
  },
  async mounted () {
    try {
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['name', '_id']
      })
      if (this.NewDoc._id === undefined) {
        this.$store.dispatch(
          'newDocument/initDoc', this.$route.name
        )
      }
      console.log(this.NewDoc)
      // this.document_type = await this.lookupParam(
      //   'document_type'
      // )
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    ...mapState({
      NewDoc: (state) => state.newDocument.NewDoc,
      enums: (state) => state.enums
    }),
    ...mapGetters(['getEnumWord'])
  }
}
</script>

<style lang="scss" scoped>
.form-control {
  color: black;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.label_col {
  margin-top: 35px;
  padding-left: 30px;
}
.container {
  margin-top: 0px;
  width: 75%;
  height: 95%;
}
.register {
  padding-top:10px;
}
.register1 {
  padding-top:0px;
}

</style>
