<template>
  <div>
    <div>
      <functionBar class="F_bar" />
    </div>
    <div>
      <div class="container" fluid></div>
      <div
        style="
          margin-left: 20px;
          margin-top: 15px;
          float: left;
          margin-right: 20px;
        "
      >
        <b-row style="margin-top: 11px; margin-left: 200px">
          <!-- 篩選條件 -->
          <b-col cols="2">
            <div style="margin-top: 9px; text-align: right; color: black">
              篩選條件:
            </div>
          </b-col>
          <!-- 下拉式選擇 結案/未結案 -->
          <b-col cols="2">
            <b-form-select v-model="searchCondition" :options="conditions" />
          </b-col>
          <!-- 關鍵字 -->
          <b-col cols="2">
            <b-form-group style="width: 500px">
              <b-input-group size="1px">
                <b-form-input
                  id="filter-input"
                  v-model="filter"
                  type="search"
                  placeholder="請輸入關鍵字"
                ></b-form-input>
              </b-input-group>
            </b-form-group>
          </b-col>
        </b-row>
        <b-row>
          <b-col>
            <!-- table -->
            <b-table
              :items="issueList"
              :fields="fields"
              :filter="filter"
              class="text-center"
              thead-class="thClass"
              small
              responsive="sm"
              ref="selectableTable"
              striped
              bordered
              style="padding-left: 20px; padding-right: 20px"
              fixed
              sticky-header="500px"
              :per-page="perPage"
              :current-page="currentPage"
            >
              <!-- HEAD -->
              <template #head()="{ label }">
                <span
                  style="font-weight: normal; color: white; font-size: 15px"
                  >{{ label }}</span
                >
              </template>
              <!-- BODY -->
              <!-- 作業期限 -->
              <template #cell(limit_date)="data">
                <span
                  style="font-weight: normal; color: black; font-size: 15px"
                >
                  {{
                    new Date(data.value).toLocaleString("zh-TW", {
                      dateStyle: "long",
                      hour12: false,
                    })
                  }}
                </span>
              </template>
              <!-- 工作事項 -->
              <template #cell(description)="data">
                <router-link
                  :to="{
                    name:
                      (data.item.issue_status == '列管中' && 'AgendaView') ||
                      (data.item.issue_status == '解除列管' && 'ConsultAgenda'),
                    query: { fid: data.id },
                  }"
                  @click.native="View(data.item)"
                >
                  <span
                    style="font-weight: normal; color: blue; font-size: 15px"
                  >
                    {{ data.value | ellipsis }}
                  </span>
                </router-link>
              </template>
              <!-- 承辦人 -->
              <template #cell(undertaker)="data">
                <span
                  style="font-weight: normal; color: black; font-size: 15px"
                >
                  {{ data.value }}
                </span>
              </template>
              <!-- 狀態 -->
              <template #cell(status)="data">
                <span
                  style="font-weight: normal; color: red; font-size: 15px"
                  v-if="data.item.resolution.length === 0"
                >
                  {{ data.item.issue_status }}(暫無處理情況)
                </span>
                <span
                  style="font-weight: normal; color: red; font-size: 15px"
                  v-else-if="data.item.issue_status == '列管中'"
                >
                  {{ data.item.issue_status }}
                  ({{
                    data.item.resolution[data.item.resolution.length - 1]
                      .conferenceId.conference_name | ellipsis
                  }})
                </span>
                <span
                  style="font-weight: normal; color: black; font-size: 15px"
                  v-else
                >
                  {{ data.item.issue_status }}
                  ({{
                    data.item.resolution[data.item.resolution.length - 1]
                      .conferenceId.conference_name | ellipsis
                  }})
                </span>
              </template>
            </b-table>
            <!-- 分頁符號 -->
            <b-pagination
              v-model="currentPage"
              pills
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="my-table"
              style="margin-top: -40px"
            >
            </b-pagination>
          </b-col>
        </b-row>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import functionBar from '@/views/ConferenceManagement/MainPage/functionBar.vue'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'
export default {
  data () {
    return {
      searchCondition: null,
      filter: null,
      perPage: 10,
      currentPage: 1,
      selectList: '',
      keywords: [],
      fields: [
        {
          key: 'limit_date',
          label: '作業期限',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff' }
        },
        {
          key: 'description',
          label: '工作事項',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff' }
        },
        {
          key: 'undertaker',
          label: '承辦人',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff' }
        },
        {
          key: 'status',
          label: '狀態',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff' }
        }
      ],
      conditions: [
        { value: null, text: '請選擇條件' },
        { value: '列管中', text: '列管中' },
        { value: '解除列管', text: '解除列管' }
      ]
    }
  },
  components: {
    functionBar,
    Multiselect
  },
  async mounted () {
    try {
      await this.getIssueList()
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('issue', [
      'getIssueList',
      'lookupIssue',
      'deleteIssue',
      'lookupResolution'
    ]),
    async View (data) {
      await this.lookupIssue(data._id)
      await this.lookupResolution(data.id)
      switch (data.issue_status) {
        case '列管中':
          this.$router.push({
            name: 'AgendaView',
            query: { fid: data.id }
          })
          break
        case '解除列管':
          this.$router.push({
            name: 'ConsultAgenda',
            query: { fid: data.id }
          })
          break
      }
    },
    async deleteIssue (id) {
      if (!confirm('確定刪除會議嗎?')) return
      // console.log(id)
      await this.$store.dispatch('issue/deleteIssue', id)
      alert('已刪除')
      await this.getIssueList()
    }
  },
  filters: {
    ellipsis (value) {
      if (value.length > 18) {
        return value.slice(0, 14) + '...'
      }
      return value
    }
  },
  computed: {
    rows () {
      return this.issueList.length
    },
    ...mapState({
      issueList: (state) => state.issue.IssueList
    }),
    ...mapGetters(['getEnumWord'])
  },
  watch: {
    searchCondition: {
      handler (newVal, oldValue) {
        newVal === null && this.getIssueList()
        newVal === '解除列管' && this.getIssueList({ issue_status: newVal })
        newVal === '列管中' && this.getIssueList({ issue_status: newVal })
      },
      immediate: true
    }
  }
}
</script>
<style scoped>
.text-center {
  color: #f7fafc;
  width: 90%;
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -10px;
  margin-left: 85px;
}
.container {
  height: 50px;
  margin-top: 10px;
  margin-left: 5%;
  padding-top: 10px;
  padding-left: 3%;
  padding-right: 3%;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  margin-top: 20px;
  color: #383838;
}
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
}
.del {
  background-color: rgb(245, 19, 19);
  font-size: 16px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
}
.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);
}
.form-control {
  color: black;
}
.custom-select {
  color: black;
}
</style>
