<template>
  <div class="container">
    <!-- 作業選項 -->
    <b-row style="margin-top:5px;">
       <b-col
            class="label_col"
            cols="3"
          >
            <span>作業選項:</span>
          </b-col>
          <b-col cols="9">
            <div style="width: 98%; margin-left: -50px; padding-right: 10px">
              <b-form-select
                v-model="NewControl.item"
                style="width: 95%"
                :options="getEnumWord('document_controlEnum', NewControl.item)"
              ></b-form-select>
            </div>
          </b-col>
    </b-row>
    <!-- 預定辦理日期 -->
    <b-row style="margin-top:5px;">
       <b-col
            cols="4"
            class="label_col"
          >
            <span>預定辦理日期：</span>
          </b-col>
          <b-col cols="8" style="margin-left: -70px;">
            <b-form-datepicker
              name="scheduledDate"
              style="width: 95%"
              placeholder="請選擇日期"
              v-model="NewControl.scheduledDate"
            >
            </b-form-datepicker>
          </b-col>
    </b-row>
    <!-- 實際辦理日期 -->
    <b-row style="margin-top:5px;">
       <b-col
            cols="4"
            class="label_col"
          >
            <span>實際辦理日期：</span>
          </b-col>
          <b-col cols="8" style="margin-left: -70px;">
            <b-form-datepicker
              name="actualDate"
              style="width: 95%"
              placeholder="請選擇日期"
              v-model="NewControl.actualDate"
            >
            </b-form-datepicker>
          </b-col>
    </b-row>
    <!-- 辦理單位 -->
    <b-row style="margin-top:5px;">
       <b-col
            class="label_col"
            cols="3"
          >
            <span>辦理單位:</span>
          </b-col>
          <b-col cols="9">
            <div style="width: 98%; margin-left: -50px; padding-right: 10px">
              <b-form-input
                v-model="NewControl.unit"
                style="width: 95%"
              />
            </div>
          </b-col>
    </b-row>
    <!-- 辦理人員 -->
    <b-row style="margin-top:5px;">
       <b-col
            class="label_col"
            cols="3"
          >
            <span>辦理人員:</span>
          </b-col>
          <b-col cols="9">
            <div style="width: 98%; margin-left: -50px; padding-right: 10px">
              <b-form-select
                v-model="NewControl.manager"
                style="width: 95%"
                :options="
                    staffs.map((staff) => {
                      return { text: staff.name, value: staff.name };
                })"
              >
              </b-form-select>
            </div>
          </b-col>
    </b-row>
    <!-- 版次 -->
    <b-row style="margin-top:5px;">
       <b-col
            class="label_col"
            cols="2"
          >
            <span>版次:</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 98%; margin-left: 1px; padding-right: 60px">
            <b-form-input
              id=""
              style="width: 95%"
              v-model="NewControl.version"
            />
            </div>
          </b-col>
    </b-row>
    <!-- 文號 -->
    <!-- <b-row style="margin-top:5px;">
       <b-col
            class="label_col"
            cols="2"
          >
            <span>文號:</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 98%; margin-left: 1px; padding-right: 60px">
               <b-form-input
              id=""
              style="width: 95%"
            />
            </div>
          </b-col>
    </b-row> -->
    <!-- 備註 -->
    <b-row style="margin-top:5px;">
       <b-col
            class="label_col"
            cols="2"
          >
            <span>備註:</span>
          </b-col>
          <b-col cols="10">
            <div style="width: 98%; margin-left: 1px; padding-right: 60px">
            <b-form-input
              id=""
              style="width: 95%"
              v-model="NewControl.note"
            />
            </div>
          </b-col>
    </b-row>
    <b-row>
      <b-col>
      <b-button
        class="btn_search"
        style="margin-top: 20px; margin-right:90px; float:right"
        @click="controlSave">
        新增
      </b-button>
      </b-col>
    </b-row>
  </div>
</template>

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

export default {
  data () {
    return {
      staffs: []
    }
  },
  async mounted () {
    this.staffs = await this.$store.dispatch('project/lookupStaffs', {
      selects: ['name']
    })
    // console.log(this.staffs)
  },
  methods: {
    ...mapActions('newDocument', ['addControl', 'lookupDoc']),
    // 新增管控按鈕
    async controlSave () {
      let wasNull = false
      if (this.NewControl.item === '' || this.NewControl.version === '') wasNull = true
      if (wasNull) alert('作業選項、版次尚需填寫！')
      else {
        let yes = (window.confirm('確定儲存？'))
        if (yes) {
          this.postControl()
        } else {
          alert('取消儲存')
        }
      }
    },
    async postControl () {
      await this.addControl()
      alert('新增成功')
      this.$emit('closeEvent')
      await this.lookupDoc(this.newDoc._id)
    }
  },
  computed: {
    ...mapState({
      NewControl: (state) => state.newDocument.NewControl,
      newDoc: (state) => state.newDocument.NewDoc,
      enums: (state) => state.enums
    }),
    ...mapGetters(['getEnumWord'])
  }
}
</script>

<style lang="scss" scoped>
.label_col {
  margin-top: 8px;
  padding-left: 30px;
}
.container {
  margin-right: 20px;
  width: 600px;
  height: 420px;
}
.btn_search{
  background-color: rgb(75, 102, 255);
  font-size:15px;
  padding-left:10px;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  color:white;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn_search:hover{
  color: black;
  background-color: rgb(228, 228, 228);
  transform: translateY(1);
}
</style>
