<template>
  <div class="mainContent">
    <b-row style="margin-top: 11px">
      <b-col class="label_col" cols="2">
        <span>日期:</span>
      </b-col>
      <b-col cols="3">
        <b-form-datepicker
          class="mb-2"
          name="checkdate"
          style="width: 100%"
          placeholder="請選擇日期"
          v-model="DateStart"
        ></b-form-datepicker>
        <!-- v-model="searchCondition.issueDateStart" -->
      </b-col>
      <b-col cols="1">
      <span style="margin-right: 75px; margin-top: 7px">至</span>
      </b-col>
      <b-col cols="3">
        <b-form-datepicker
          class="mb-2"
          name="checkdate"
          style="width: 100%"
          placeholder="請選擇日期"
          v-model="DateEnd"
        ></b-form-datepicker>
        <!-- v-model="searchCondition.issueDateEnd" -->
      </b-col>
      <b-col cols="2">
        <b-button
          class="btn_search"
          style="float: right; margin-top: 4px; margin-left: 5px"
          @click="filterList"
          >篩選</b-button
        >
      </b-col>
    </b-row>
    <b-row style="margin-top: 11px">
      <b-col class="label_col" cols="2">
        <span>議題名稱:</span>
      </b-col>
      <b-col cols="8">
        <b-input-group size="1px">
          <b-form-input
            id="filter-input"
            v-model="filter"
            type="search"
            placeholder="請輸入關鍵字"
          ></b-form-input>
        </b-input-group>
      </b-col>
      <!-- <b-col style="padding-top: 2px" cols="6">
        <multiselect
          v-model="searchCondition.keyword"
          tag-placeholder="加入欄位"
          placeholder="請輸入關鍵字"
          :options="keywords"
          :multiple="true"
          :showNoOptions="false"
          :taggable="true"
          @tag="addTagKeyword"
        >
          <span
            slot="caret"
            v-if="!searchCondition.keyword.length"
          ></span>
        </multiselect>
      </b-col> -->
    </b-row>
    <b-button size="sm" @click="selectAllRows">全選</b-button>
    <b-button size="sm" @click="clearSelected">取消全選</b-button>
    <div style="width: 100%; height: 75%">
      <b-table
        class="text-center"
        thead-class="thClass"
        style="max-height: 100%"
        sticky-header
        no-border-collapse
        small
        responsive="sm"
        striped
        bordered
        :fields="fields"
        :items="newList"
        fixed
        ref="postSelectableTable"
        :select-mode="selectMode"
        selectable
        @row-selected="onRowSelected"
        :filter="filter"
      >
        <!-- HEAD -->
        <template #head()="{ label, field: { key, sortable } }">
          <span style="font-weight: normal; color: white; font-size: 15px">{{
            label
          }}</span>
        </template>
        <!-- 勾選 -->
        <template #cell(select)="{ rowSelected }">
          <template v-if="rowSelected">
            <span aria-hidden="true">&check;</span>
            <span class="sr-only"></span>
          </template>
          <template v-else>
            <span aria-hidden="true">&nbsp;</span>
            <span class="sr-only">Not selected</span>
          </template>
        </template>
        <!-- 依據 -->
        <template #cell(according)="data">
          <div class="word">
            <span style="font-weight: normal; color: black; font-size: 15px">
              {{ data.value }}
            </span>
          </div>
        </template>
        <!-- 工作事項 -->
        <template #cell(description)="data">
          <div class="word">
            <span style="font-weight: normal; color: black; font-size: 15px">
              {{ data.value }}
            </span>
          </div>
        </template>
        <!-- 建案日期 -->
        <template #cell(initial_date)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ getFormattedDate(data.value) }}
          </span>
        </template>
        <!-- 作業需求 -->
        <template #cell(action_required)="data">
          <div class="word">
            <span style="font-weight: normal; color: black; font-size: 15px">
              {{ data.value }}
            </span>
          </div>
        </template>
        <!-- 承辦人 -->
        <template #cell(undertaker)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ data.value }}
          </span>
        </template>
        <!-- 作業期限 -->
        <template #cell(limit_date)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ getFormattedDate(data.value) }}
          </span>
        </template>
        <!-- 處理情況 -->
        <template #cell(resolution)="data">
          <div class="word">
            <span
              v-if="data.item.resolution != 0"
              style="font-weight: normal; color: black; font-size: 15px"
            >
              {{ data.value }}
            </span>
            <span v-else> </span>
            <!-- <div v-for="(i, x) in data.item.resolution" :key="x">
              <span style="font-weight: normal; color: black; font-size: 15px">
              {{ i.detail }}
            </span>
            </div> -->
          </div>
        </template>
        <!-- 備註 -->
        <template #cell(issue_status)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ data.value }}
          </span>
        </template>
      </b-table>
    </div>
    <div class="float-right mr-4" style="padding-top: 15px">
      <b-row>
        <b-button
          class="btn_search"
          style="margin-top: 4px"
          @click="handleExport()"
          >匯出</b-button
        >
      </b-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import moment from 'moment'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'
export default {
  data () {
    return {
      DateStart: null,
      DateEnd: null,
      filter: null,
      selectMode: 'multi',
      exportList: [],
      newList: [], // 新陣列
      detailName: '', // 表格顯示用
      searchCondition: {
        issueDateStart: '',
        issueDateEnd: '',
        operator: 'and',
        keyword: []
      },
      selectedRows: [],
      fields: [
        {
          key: 'select',
          label: '勾選',
          tdClass: 'align-middle'
        },
        {
          key: 'according',
          label: '依據',
          sortable: false,
          tdClass: 'align-middle'
        },
        {
          key: 'description',
          label: '工作事項',
          sortable: false,
          tdClass: 'align-middle'
        },
        {
          key: 'initial_date',
          label: '建案日期',
          sortable: false,
          tdClass: 'align-middle'
        },
        {
          key: 'action_required',
          label: '作業需求',
          sortable: false,
          tdClass: 'align-middle'
        },
        {
          key: 'undertaker',
          label: '承辦人',
          sortable: false,
          tdClass: 'align-middle'
        },
        {
          key: 'limit_date',
          label: '作業期限',
          sortable: false,
          tdClass: 'align-middle'
        },
        {
          key: 'resolution',
          label: '處理情況',
          sortable: false,
          tdClass: 'align-middle'
        },
        {
          key: 'issue_status',
          label: '備註',
          sortable: false,
          tdClass: 'align-middle'
        }
      ],
      file: [
        {
          According: '第99次工地施工會報',
          Description: '檢討施工計價進度與實際進度差異',
          Start_Date: '110.01.13',
          Action: '提送估驗差異表',
          Undertaker: '潤弘',
          Limit_Date: '110.01.30',
          Resolution: ' 1100113~110331 請參閱第 110 次工地施工會報會議紀錄。',
          Remark: '0'
        }
      ]
    }
  },
  components: { Multiselect },
  methods: {
    ...mapActions('issue', ['getIssueList', 'lookupSearchList']),
    onRowSelected (items) {
      this.selectedRows = items
    },
    getFormattedDate (date) {
      // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    // async Filter () {
    //   if (this.searchCondition.keyword.length !== 0) {
    //     alert('請輸入關鍵字！')
    //   } else {
    //     this.exportList = await this.lookupSearchList({
    //       issueDateStart: this.searchCondition.issueDateStart,
    //       issueDateEnd: this.searchCondition.issueDateEnd,
    //       operator: this.searchCondition.operator,
    //       keyword:
    //         this.searchCondition.keyword.length === 0
    //           ? []
    //           : this.searchCondition.keyword
    //     })
    //   }
    // },
    async filterList () {
      const start = new Date(this.DateStart)
      const end = new Date(this.DateEnd)
      await this.getIssueList()
      this.exportList = this.issueList
      this.newList = []
      for (let index of this.exportList) {
        const limitDate = new Date(index.limit_date)
        if (start <= limitDate && limitDate <= end) {
          if (index.resolution.length === 0) {
            this.newList.push(index)
          } else {
            for (let name of index.resolution) {
              this.detailName = name.detail
              let lookup = {
                according: name.conferenceId.conference_name,
                description: index.description,
                initial_date: index.initial_date,
                action_required: index.action_required,
                undertaker: index.undertaker,
                limit_date: index.limit_date,
                resolution: this.detailName,
                issue_status: index.issue_status
              }
              this.newList.push(lookup)
            }
          }
        }
      }
      const union = (arr) => {
        arr = arr || []
        let tmp = {}
        for (let obj of arr) {
          if (obj.description in tmp) {
            if (obj.resolution !== '') {
              tmp[obj.description].resolution += ' • ' + obj.resolution
            } else tmp[obj.description].resolution += obj.resolution
          } else {
            tmp[obj.description] = obj
          }
        }
        let result = []
        for (let key in tmp) {
          result.push(tmp[key])
        }
        return result
      }
      this.newList = union(this.newList)
    },
    handleExport () {
      require.ensure([], () => {
        // eslint-disable-next-line camelcase
        const { export_json_to_excel } = require('@/util/Export2Excel')
        const tHeader = [
          '依據',
          '工作事項',
          '建案日期',
          '作業需求',
          '承辦人',
          '作業期限',
          '處理情況',
          '備註'
        ]
        const filterVal = [
          'according',
          'description',
          'initial_date',
          'action_required',
          'undertaker',
          'limit_date',
          'resolution',
          'issue_status'
        ]
        const list = this.selectedRows
        const data = this.formatJson(filterVal, list)
        console.log(data)
        export_json_to_excel(tHeader, data, '議題事項')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]))
    },
    selectAllRows () {
      this.$refs.postSelectableTable.selectAllRows()
    },
    clearSelected () {
      this.$refs.postSelectableTable.clearSelected()
    }
  },
  computed: {
    ...mapState({
      issueList: (state) => state.issue.IssueList
    })
  }
}
</script>

<style>
.thClass {
  font-size: 16px;
  background-color: #1d325f;
  color: white;
}
.table.b-table > thead > tr > th,
.table.b-table > tfoot > tr > td {
  background-image: none !important;
}
</style>
<style lang="scss" scoped>
/deep/ .table.b-table > thead > tr > th {
  background-color: #1d325f;
  color: white;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 2;
}
.text-center {
  color: #f7fafc;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}
.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);
}
.word {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mainContent {
  height: 700px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  padding: 0;
}
.label_col {
  margin-top: 8px;
  padding: 0 15px 0 40px;
  display: flex;
  align-items: center;
  color: black !important;
}
.col-2 {
  padding-right: 0px;
}
.col-3 {
  padding-right: 0px;
  padding-left: 0px;
}
.col-8 {
  padding-left: 0px;
}
.col-1 {
  padding: 0;
  color: black !important;
  margin-top: 10px;
  padding-left: 40px;
}
</style>
