<template>
<!-- 建立議題 -->
  <div>
    <!-- 議題序號 -->
    <b-list-group horizontal>
      <b-list-group-item style="background-color:#9393FF">
        <div style="margin-top: 10px;color:white">議題序號</div>
      </b-list-group-item>
      <b-list-group-item class="grclass">
        <b-form-input style="width: 700px" v-model="issue.item_number"></b-form-input>
      </b-list-group-item>
    </b-list-group>
    <!-- 工作事項 -->
    <b-list-group horizontal>
      <b-list-group-item style="background-color:#9393FF">
        <div style="margin-top: 50px;color:white">工作事項</div>
      </b-list-group-item>
      <b-list-group-item class="grclass2">
        <b-row><b-col cols="6">
          <b-form-textarea
          style="height: 120px; width: 700px" v-model="issue.description"
          ></b-form-textarea>
        </b-col></b-row>
      </b-list-group-item>
    </b-list-group>
    <!-- 作業需求 -->
    <b-list-group horizontal>
      <b-list-group-item style="background-color:#9393FF">
        <div style="margin-top: 50px;color:white">作業需求</div>
      </b-list-group-item>
      <b-list-group-item class="grclass2">
        <b-row><b-col cols="6">
          <b-form-textarea
          style="height: 120px; width: 700px"  v-model="issue.action_required"
          ></b-form-textarea>
        </b-col></b-row>
      </b-list-group-item>
    </b-list-group>
    <!-- 提出者 -->
    <!-- <b-list-group horizontal>
      <b-list-group-item style="background-color:#9393FF; width:98px">
        <div style="margin-top: 10px;color:white">提出者</div>
      </b-list-group-item>
      <b-list-group-item class="grclass">
        <b-form-select
        style="width: 700px"
        v-model="issue.proposer"
        :options="
            staffs.map((staff) => {
              return { text: staff.name, value: staff.name };
        })"
        ></b-form-select>
      </b-list-group-item>
    </b-list-group> -->
    <!-- 建案日期 -->
    <b-list-group horizontal>
      <b-list-group-item style="background-color:#9393FF; width:98px">
        <div style="margin-top: 10px;color:white">建案日期</div>
      </b-list-group-item>
      <b-list-group-item class="grclass">
        <b-form-datepicker
        style="width: 700px"
        placeholder="請填寫日期"
        v-model="issue.initial_date"
        ></b-form-datepicker>
      </b-list-group-item>
    </b-list-group>
    <!-- 作業期限 -->
    <b-list-group horizontal>
      <b-list-group-item style="background-color:#9393FF; width:98px">
        <div style="margin-top: 10px;color:white">作業期限</div>
      </b-list-group-item>
      <b-list-group-item class="grclass">
        <b-form-datepicker
        style="width: 700px"
        placeholder="請填寫日期"
        v-model="issue.limit_date"
        ></b-form-datepicker>
      </b-list-group-item>
    </b-list-group>
    <!-- 承辦人 -->
    <b-list-group horizontal>
      <b-list-group-item style="background-color:#9393FF; width:98px">
        <div style="margin-top: 10px;color:white">承辦人</div>
      </b-list-group-item>
      <b-list-group-item class="grclass">
        <b-form-select
        style="width: 700px"
        v-model="issue.undertaker"
        :options="
            staffs.map((staff) => {
              return { text: staff.name, value: staff.name };
        })"
        ></b-form-select>
      </b-list-group-item>
    </b-list-group>
    <div>
      <b-button size="sm" class="btn1" style="margin-top: 10px; margin-left: 840px" @click="issueSave">
        建立
      </b-button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'

export default {
  data () {
    return {
      staffs: []
      // proposer: ''
    }
  },
  async mounted () {
    try {
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['name', '_id']
      })
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('issue', ['post', 'getIssueList']),
    // 建立議題按鈕
    async issueSave () {
      let wasNull = false
      if (this.issue.undertaker === '' || this.issue.description === '') wasNull = true
      if (wasNull) alert('承辦人、工作事項尚須填寫!')
      else {
        let yes = (window.confirm('確定建立?'))
        if (yes) {
          this.addIssue()
        } else {
          alert('取消建立')
        }
      }
    },
    async addIssue () {
      await this.post()
      alert('建立成功')
      this.$emit('closeEvent')
      await this.getIssueList()
    }
  },
  computed: {
    ...mapState({
      issue: (state) => state.issue.Issue
    })
  }
}
</script>

<style>
.form-control {
  color: black;
}
</style>
<style scoped>
.active-tab-class{
    background-color: #000000;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.grclass {
  background-color: #DDDDFF;
  width: 800px;
  height: 80px;
}
.grclass1 {
  background-color: #DDDDFF;
  width: 800px;
  height: 160px;
}
.grclass2 {
  background-color: #DDDDFF;
  width: 800px;
  height: 150px;
}
.grclass3 {
  width: 800px;
  height: 53px;
}
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 18px;
  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;
  float: center;
  text-align: justify;
}
</style>
