<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
            v-if="isEdit"
            style="width: 95%; font-size: 16px"
            placeholder="請填寫事項名稱"
            v-model="todo.title"
          />
          <div v-else style="margin-top: 10px">
            <span style="font-weight: normal; color: black">
              {{ todo.title }}
            </span>
          </div>
        </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
            v-if="isEdit"
            style="width: 95%; font-size: 16px"
            placeholder="請選擇提醒時間"
            v-model="todo.endingTime"
          />
          <div v-else style="margin-top: 10px">
            <span style="font-weight: normal; color: black">
              {{ getFormattedDate(todo.endingTime) }}
            </span>
          </div>
        </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-if="isEdit"
            v-model="todo.description"
            placeholder="請輸入說明"
            rows="6"
            no-resize
            style="
                width: 95%;
                height: 50%;
                padding: 8px 12px 10px;
                font-size: 16px;
            "
          />
          <div v-else style="margin-top: 10px">
            <span style="font-weight: normal; color: black">
              {{ todo.description }}
            </span>
          </div>
        </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
            v-if="isEdit"
            style="width: 95%; font-size: 16px"
            placeholder="可填寫參考網址"
            v-model="todo.src"
          />
          <div v-else style="margin-top: 10px">
            <a
              style="
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: blue;
              "
              :href="todo.src"
              target="_blank"
            >
              <span style="cursor: pointer"> {{ todo.src }} </span>
            </a>
          </div>
        </div>
      </b-col>
    </b-row>
    <b-row style="margin-top: 14px; float: right; padding-right: 37px">
      <b-button v-if="isEdit" class="btn" @click="saved(getContent)">
        儲存
      </b-button>
      <b-button v-else class="btn" @click="isEdit = true">編輯</b-button>
      <b-button v-show="!isEdit" class="btn_delete" @click="deleted(getContent)">
        刪除
      </b-button>
    </b-row>
  </div>
</template>

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

export default {
  props: ['getContent'],
  data () {
    return {
      isEdit: false
    }
  },
  methods: {
    ...mapActions('staff', ['patchStaffTodo', 'deleteTodo']),
    async saved (id) {
      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 {
        await this.patchStaffTodo(id)
        this.isEdit = false
      }
    },
    async deleted (id) {
      if (!confirm('確定刪除?')) return
      await this.deleteTodo(id)
      this.$emit('closeEvent')
    },
    getFormattedDate (date) {
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    }
  },
  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);
}
.btn_delete {
  background-color: rgb(255, 0, 0);
  font-size: 16px;
  padding: 5px 7px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn_delete:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(199, 0, 0);
}
.container {
  width: 600px;
  height: 200px;
}
.form-control {
  color: black;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
</style>
