<template>
  <div class="container">
      <b-row>
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>事項名稱：</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-left: -40px;">
            <b-form-input
              style="width: 95%; font-size: 16px"
              placeholder="請填寫事項名稱"
              v-model="todo.title"
            />
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 12px">
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>結束時間：</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-left: -40px;">
            <b-form-datepicker
              style="width: 95%; font-size: 16px"
              placeholder="請選擇提醒時間"
              v-model="todo.endingTime"
            />
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 12px">
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>事項說明：</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-left: -40px;">
            <b-form-textarea
              v-model="todo.description"
              placeholder="請輸入說明"
              rows="6"
              no-resize
              style="
                width: 95%;
                height: 220px;
                padding: 8px 12px 10px;
                font-size: 16px;
              "
            />
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 12px">
        <b-col class="label_col" style="padding: 10px 15px 0 30px" cols="3">
          <span>相關連結：</span>
        </b-col>
        <b-col cols="9">
          <div style="margin-left: -40px;">
            <b-form-input
              style="width: 95%; font-size: 16px"
              placeholder="可填寫參考網址"
              v-model="todo.src"
            />
          </div>
        </b-col>
      </b-row>
      <b-row style="margin-top: 14px; float: right; padding-right: 37px">
        <b-button class="btn" @click="confirmSave">新增</b-button>
      </b-row>
    </div>
</template>

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

export default {
  data () {
    return {}
  },
  methods: {
    ...mapActions('staff', ['addTodo', 'getTodoList']),
    confirmSave () {
      const h = this.$createElement
      let value = this.todo.title.trim()
      if (!value) {
        this.$message({
          message: h('span', { style: 'color: red' }, '事項名稱有誤！'),
          type: 'error',
          duration: '1500'
        })
      } else {
        let yes = confirm('確定新增待辦事項?')
        if (yes) {
          this.postTodo()
        } else {
          this.$message({
            message: h('span', { style: 'color: black' }, '取消新增'),
            type: 'warning',
            duration: '1500'
          })
        }
      }
    },
    async postTodo () {
      await this.addTodo()
      this.$emit('closeEvent')
      await this.getTodoList()
    }
  },
  computed: {
    ...mapState({
      todo: (state) => state.staff.todo
    })
  }
}
</script>

<style scoped>
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(1);
}
.container {
  width: 600px;
  height: 400px;
}
.form-control {
  color: black;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
</style>
