<template>
<!-- 議題基本資料 -->
  <div>
    <b-row>
      <b-col cols="10">
      <span style="font-size:30px; font-weight:bold">議題基本資料:</span>
      <b-button
        v-if="isedit"
        size="sm"
        @click="InformationSave"
        class="btn1"
        v-show="$route.name === 'AgendaView'"
      >
        <b-icon-cursor />儲存
      </b-button>
      <b-button
        v-else
        size="sm"
        @click="InformationEdit"
        class="btn1"
        v-show="$route.name === 'AgendaView' && conferenceManagement.permission === 2"
      >
        <b-icon-pencil />編輯
      </b-button>
      </b-col>
    </b-row>
    <!-- 議題列表 -->
        <!-- 議題序號 -->
         <b-list-group horizontal>
            <b-list-group-item class="word" style="background-color:#9393FF">
              <span>議題序號</span>
            </b-list-group-item>
            <b-list-group-item class="grclass">
            <b-form-input
            type="text"
            v-model="issue.item_number"
            style="width: 500px; height:40px"
            v-if="isedit"
            ></b-form-input>
            <span v-else>{{ issue.item_number }}</span>
            </b-list-group-item>
          </b-list-group>
          <!-- 工作事項 -->
          <b-list-group horizontal>
            <b-list-group-item  class="word" style="background-color:#9393FF">
              <span>工作事項</span>
            </b-list-group-item>
            <b-list-group-item class="grclass2">
              <b-row>
                <b-col cols="12">
                <b-form-textarea
                v-model="issue.description"
                v-if="isedit"
                style="width: 500px; height:120px"
                ></b-form-textarea>
                <div style="word-wrap: break-word" v-else>
                  {{ issue.description }}
                </div>
              </b-col></b-row>
            </b-list-group-item>
          </b-list-group>
          <!-- 作業需求 -->
          <b-list-group horizontal>
            <b-list-group-item class="word" style="background-color:#9393FF">
              <span>作業需求</span>
            </b-list-group-item>
            <b-list-group-item class="grclass2">
                <b-form-textarea
                v-model="issue.action_required"
                v-if="isedit"
                style="width: 500px; height:120px"
                ></b-form-textarea>
                <div style="word-wrap: break-word" v-else>
                  {{ issue.action_required }}
                </div>
            </b-list-group-item>
          </b-list-group>
          <!-- 建案日期 -->
          <b-list-group horizontal>
            <b-list-group-item class="word" style="background-color:#9393FF">
              <span>建案日期</span>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <b-form-datepicker
              type="text"
              v-model="issue.initial_date"
              style="width: 500px; height:40px"
              v-if="isedit"
              ></b-form-datepicker>
              <span v-else>{{ getFormattedDate(issue.initial_date) }}</span>
            </b-list-group-item>
          </b-list-group>
          <!-- 作業期限 -->
          <b-list-group horizontal>
            <b-list-group-item class="word" style="background-color:#9393FF">
              <span>作業期限</span>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <b-form-datepicker
              type="text"
              v-model="issue.limit_date"
              style="width: 500px; height:40px"
              v-if="isedit"
              ></b-form-datepicker>
              <span v-else>{{ getFormattedDate(issue.limit_date) }}</span>
            </b-list-group-item>
          </b-list-group>
          <!-- 負責人 -->
          <b-list-group horizontal>
            <b-list-group-item class="word" style="background-color:#9393FF; width: 98px">
              <span>承辦人</span>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <b-form-select
              type="text"
              v-model="issue.undertaker"
              style="width: 500px; height:40px"
              v-if="isedit"
              :options="
                  staffs.map((staff) => {
                    return { text: staff.name, value: staff.name };
              })"
              ></b-form-select>
              <span v-else>{{ issue.undertaker }}</span>
            </b-list-group-item>
          </b-list-group>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import moment from 'moment'

export default {
  data () {
    return {
      staffs: [],
      isedit: false,
      conferenceManagement: {}
    }
  },
  async mounted () {
    try {
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['name', '_id']
      })
      this.usePermission()
    } catch (err) {
      console.log(err)
    }
  },
  async created () {
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch(
        'issue/lookupIssue',
        this.$route.query.fid
      )
    }
  },
  methods: {
    ...mapActions('issue', ['lookupIssue', 'patch']),
    InformationEdit () {
      this.$emit('isedit')
      this.isedit = true
    },
    async InformationSave () {
      let yes = confirm('確定儲存?')
      if (yes) {
        this.$emit('ispatch')
        this.isedit = false
        await this.patch()
        alert('修改成功！')
      }
    },
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    usePermission () { // 確認權限
      Object.values(this.currentUser.tenderPermissions).forEach(obj => {
        if (obj.tenderId === this.currentUser.defaultTender) {
          let permission = obj.permission
            .filter(name => name.title === '工作協同')
            .map(val => { return val.functionItem })
          for (const element of permission) {
            for (const a of element) {
              if (a.name === '會議管理') this.conferenceManagement = a
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState({
      issue: state => state.issue.Issue,
      currentUser: (state) => state.user.current
    })
  }
}
</script>
<style scoped>
.form-control {
  color: black;
}
.active-tab-class{
    background-color: #000000;

}
.grclass {
  background-color: #DDDDFF;
  width: 600px;
  height: auto;
}
.grclass1 {
  background-color: #DDDDFF;
  width: 600px;
  height: auto;
}
.grclass2 {
  background-color: #DDDDFF;
  width: 600px;
  height: auto;
}
.grclass3 {
  width: 600px;
  height: auto;
}
.btn1 {
  background-color: rgb(75, 102, 255);
  margin-top: -11px;
  margin-left: 10px;
  font-size: 14px;
  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;
}
.word{
  text-align:center;
  color:white;
  position: relative;
  display:flex;
  align-items: center;
}
</style>
