<template>
<!-- 沒在用啦 哭喔 -->
  <!-- 查詢條件 -->
  <div>
    <div style="padding: 15px">
      <b-card
        body-class="text-left"
        header-class="card_header"
        header-tag="nav"
        style="
          color: black;
          font-size: 20px;
          border: 2px rgb(184, 182, 182) solid;
        "
      >
        <template #header> 查詢條件 </template>
        <!-- 查詢條件內容 -->
        <b-card-text style="color: black; font-size: 17px">
          <b-row>
            <!-- 左邊 -->
            <b-col cols="6">
              <!-- 來(發)文日期 -->
              <b-form-group
                label-cols-sm="2"
                label-align-sm="left"
                style="padding-left: 20px;padding-right:20px;"
                label="來(發)文日期"
                label-for="input-lg"
              >
                <b-row>
                  <b-col>
                    <b-form-datepicker
                      class="mb-2"
                      style="width: 100%"
                      placeholder="請選擇日期"
                      v-model="condition.issueDateStart"
                    ></b-form-datepicker>
                  </b-col>
                  <div style="padding-top:9px;">~</div>
                  <b-col>
                    <b-form-datepicker
                      class="mb-2"
                      style="width: 100%"
                      placeholder="請選擇日期"
                      v-model="condition.issueDateEnd"
                    ></b-form-datepicker>
                  </b-col>
                </b-row>
              </b-form-group>
              <!-- 辦 理 期 限 -->
              <b-form-group
                label-cols-sm="2"
                label-align-sm="left"
                style="padding-left: 20px;padding-right:20px;"
                label="辦理期限"
                label-for="input-lg"
              >
                <b-row>
                  <b-col>
                    <b-form-datepicker
                      class="mb-2"
                      style="width: 100%"
                      placeholder="請選擇日期"
                      v-model="condition.handlePeriodStart"
                    ></b-form-datepicker>
                  </b-col>
                  <div style="padding-top:9px;">~</div>
                  <b-col>
                    <b-form-datepicker
                      class="mb-2"
                      style="width: 100%"
                      placeholder="請選擇日期"
                      v-model="condition.handlePeriodEnd"
                    ></b-form-datepicker>
                  </b-col>
                </b-row>
              </b-form-group>
              <!-- 主旨、說明 -->
              <b-row>
                <b-col>
                  <b-form-group
                    label-cols-sm="2"
                    label-align-sm="left"
                    style="padding-left: 20px;padding-right:20px;"
                    label="主旨"
                    label-for="input-lg"
                  >
                    <b-form-textarea
                      id="input-lg"
                      v-model="condition.subject"
                    />
                  </b-form-group>
                </b-col>
              </b-row>
              <b-row>
                <b-col>
                  <b-form-group
                    label-cols-sm="2"
                    label-align-sm="left"
                    style="padding-left: 20px;padding-right:20px;"
                    label="說明"
                    label-for="input-lg"
                  >
                    <b-form-textarea
                      id="input-lg"
                      v-model="condition.instruction"
                    />
                  </b-form-group>
                </b-col>
              </b-row>
            </b-col>
            <!-- 右邊 -->
            <b-col cols="6">
              <!-- 正副本 -->
              <b-form-group
                label-cols-sm="2"
                label-align-sm="left"
                style="padding-left: 5px;padding-right:20px;"
                label="正本"
                label-for="input-lg"
              >
                <multiselect
                  v-model="condition.original"
                  caret="openselect"
                  placeholder="請選擇正本單位"
                  deselect-label="已選擇"
                  :options="external_units.paramsValue"
                  :multiple="true"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                >
                </multiselect>
              </b-form-group>
              <b-form-group
                label-cols-sm="2"
                label-align-sm="left"
                style="padding-left: 5px;padding-right:20px;"
                label="副本"
                label-for="input-lg"
              >
                <multiselect
                  v-model="condition.copy"
                  caret="openselect"
                  placeholder="請選擇副本單位"
                  deselect-label="已選擇"
                  :options="external_units.paramsValue"
                  :multiple="true"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                >
                </multiselect>
              </b-form-group>
              <!-- 公文類型 -->
              <b-form-group
                label-cols-sm="2"
                label-align-sm="left"
                style="padding-left: 5px;padding-right:20px;"
                label="公文類型"
                label-for="input-lg"
              >
                <multiselect
                  v-model="condition.document_classification"
                  caret="openselect"
                  placeholder="請選擇公文類型"
                  deselect-label="已選擇"
                  :options="document_classifications.paramsValue"
                  :multiple="false"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                >
                </multiselect>
              </b-form-group>
              <!-- 承辦人 -->
              <b-form-group
                label-cols-sm="2"
                label-align-sm="left"
                style="padding-left: 5px;padding-right:20px;"
                label="承辦人"
                label-for="input-lg"
              >
                <multiselect
                  v-model="condition.undertaker"
                  caret="openselect"
                  placeholder="請選擇承辦人"
                  deselect-label="已選擇"
                  track-by="text"
                  label="text"
                  :options="staffs.map((staff) => {
                    return { text: staff.name, value: staff._id };
                  })"
                  :multiple="false"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                >
                </multiselect>
              </b-form-group>
              <!-- 標別，辦理狀態 -->
              <b-row>
                <b-col>
                  <b-form-group
                    label-cols-sm="4"
                    label-align-sm="left"
                    style="padding-left: 5px;padding-right:20px;"
                    label="標別"
                    label-for="input-lg"
                  >
                    <b-form-input
                      id="input-lg"
                      style="width: 100%"
                      v-model="condition.standard"
                    />
                  </b-form-group>
                </b-col>
                <b-col>
                  <b-form-group
                    label-cols-sm="4"
                    label-align-sm="left"
                    style="padding-left: 5px;padding-right:20px;"
                    label="辦理狀態"
                    label-for="input-lg"
                  >
                    <b-form-select
                      v-model="condition.status"
                      style="width: 100%; box-shadow: none"
                      :options="$store.getters['getEnumWord']('statusEnum', condition.status)"
                    >
                    </b-form-select>
                  </b-form-group>
                </b-col>
              </b-row>
              <!-- 收發文單位 -->
              <b-row>
                <b-col>
                  <b-form-group
                    label-cols-sm="4"
                    label-align-sm="left"
                    style="padding-left: 5px;padding-right:20px;"
                    label="來文單位"
                    label-for="input-lg"
                  >
                    <b-form-input id="input-lg" v-model="condition.issuer" />
                  </b-form-group>
                </b-col>
                <b-col>
                  <b-form-group
                    label-cols-sm="4"
                    label-align-sm="left"
                    style="padding-left: 5px;padding-right:20px;"
                    label="來(發)文字號"
                    label-for="input-lg"
                  >
                    <b-form-input
                      id="input-lg"
                      v-model="condition.issue_text_number" />
                  </b-form-group>
                </b-col>
              </b-row>
              <!-- <b-row>
                <b-col>
                  <b-form-group
                    label-cols-sm="4"
                    label-align-sm="left"
                    style="padding-left: 5px;padding-right:20px;"
                    label="來文單位"
                    label-for="input-lg"
                  >
                    <b-form-input
                      id="input-lg"
                      v-model="condition.issuer"
                    />
                  </b-form-group>
                </b-col>
              </b-row> -->
            </b-col>
          </b-row>
        </b-card-text>
        <!-- 下方查詢按鈕 -->
        <div style="text-align: center">
          <b-button variant="outline-primary" @click="clear()">清除</b-button>
          <b-button variant="primary" @click="lookUp()">查詢</b-button>
        </div>
      </b-card>
    </div>
    <div>
      <!-- 查詢結果 -->
      <div>
        <div fluid></div>
        <b-table
          id="my-table"
          class="text-center"
          thead-class="thClass"
          small
          responsive="sm"
          ref="selectableTable"
          striped
          bordered
          :fields="fields"
          :items="searchList"
          :per-page="perPage"
          :current-page="currentPage"
          fixed
        >
          <!-- TITLE -->
          <template #head(issue_date)="row">
            <span style="font-weight: normal; color: white; font-size: 14px">{{
              row.label
            }}</span>
          </template>
          <template #head(issue_text_number)="row">
            <span style="font-weight: normal; color: white; font-size: 14px">{{
              row.label
            }}</span>
          </template>
          <template #head(subject)="row">
            <span style="font-weight: normal; color: white; font-size: 14px">{{
              row.label
            }}</span>
          </template>
          <template #head(undertaker.name)="row">
            <span style="font-weight: normal; color: white; font-size: 14px">{{
              row.label
            }}</span>
          </template>
          <template #head(status)="row">
            <span style="font-weight: normal; color: white; font-size: 14px">{{
              row.label
            }}</span>
          </template>

          <!-- 內文 -->
          <template #cell(issue_date)="data">
            <span style="font-weight: normal; color: black; font-size: 14px">{{
              data.value
            }}</span>
          </template>
          <template #cell(issue_text_number)="data">
            <span style="font-weight: normal; color: black; font-size: 14px">{{
              data.value
            }}</span>
          </template>
          <template #cell(subject)="data">
            <router-link
              :to="{}"
              @click.native="pushTo(data.item)"
              style="font-weight: normal; color: blue; font-size: 14px"
              ><span v-b-tooltip.hover.left :title="data.value">{{
                data.value
              }}</span></router-link
            >
          </template>
          <template #cell(undertaker.name)="data">
            <span style="font-weight: normal; color: black; font-size: 14px">{{
              data.value
            }}</span>
          </template>
          <template #cell(status)="data">
            <span style="font-weight: normal; color: black; font-size: 14px">{{
              data.value
            }}</span>
          </template>
        </b-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

export default {
  data () {
    return {
      staffs: [],
      external_units: {
        _id: '',
        paramsValue: []
      },
      document_classifications: {
        _id: '',
        paramsValue: []
      },
      perPage: 16,
      currentPage: 1,
      fields: [
        {
          key: 'issue_date',
          label: '來(發)文日期',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'issue_text_number',
          label: '來(發)文字號',
          sortable: true,
          tdClass: 'align-middle'
        },
        { key: 'subject', label: '主旨', tdClass: 'truncate' },
        {
          key: 'undertaker.name',
          label: '承辦人',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'status',
          label: '辦理狀態',
          sortable: true,
          tdClass: 'align-middle'
        }
      ],
      aaa: [] // 帶抓資料的options
    }
  },
  methods: {
    ...mapActions('paramsSetting', ['updateParam', 'lookupParam']),
    ...mapActions('officialDocument', ['lookupSearchList', 'lookupOfficialDoc', 'getOfficialDocument']),
    ...mapMutations('officialDocument', ['resetCondition', 'setSearchList']),
    async lookUp () {
      await this.lookupSearchList()
    },
    async pushTo (data) {
      switch (data.distinguish) {
        case '發文' :
          switch (data.status) {
            case '辦理中' :
              this.getOfficialDocument(data._id)
              this.$router.push({ name: 'PaperReceiveCreate' })
              break
            case '已完成' :
              this.lookupOfficialDoc(data._id)
              this.$router.push({ name: 'ArchivesPostView' })
              break
          }
          break
        case '來文' :
          switch (data.status) {
            case '辦理中' :
              this.getOfficialDocument(data._id)
              this.$router.push({ name: 'PaperReceiveCreate' })
              break
            case '已完成' :
              this.lookupOfficialDoc(data._id)
              this.$router.push({ name: 'ArchivesReceiveView' })
              break
          }
          break
      }
    },
    clear () {
      this.resetCondition()
    }
  },
  computed: {
    ...mapState({
      condition: (state) => state.officialDocument.condition,
      enums: (state) => state.enums,
      searchList: state => state.officialDocument.searchList
    }),
    rows () {
      return this.searchList.length
    }
  },
  async mounted () {
    try {
      // await this.$store.dispatch('getEnums')
      this.external_units = await this.lookupParam('external_unit')
      this.document_classifications = await this.lookupParam('document_classification')
      this.staffs = await this.$store.dispatch('project/lookupStaffs')
    } catch (err) {
      console.log(err)
    }
  },
  components: {
    Multiselect
  }
}
</script>

<style>
.tooltip > .tooltip-inner {
  border: 1px solid;
  padding: 10px;
  max-width: 450px;
  color: black;
  text-align: left;
  background-color: white;
  background: white;
  opacity: 1;
  filter: alpha(opacity=100);
}
.tooltip > .tooltip-arrow {
  border-bottom-color: black;
}
.tooltip.in {
  opacity: 0 !important;
}
.thClass {
  background-color: #1d325f;
  color: white;
}
</style>
<style lang="scss" scoped>
/deep/ .align-middle {
  max-width: 200px;
  white-space: normal !important;
}
/deep/ .truncate {
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-padding [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.card-header {
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 1px solid rgb(184, 182, 182);
}
.container {
  height: 50px;
  margin-top: 10px;
  margin-left: 5%;
  padding-top: 10px;
  padding-left: 1%;
  padding-right: 1%;
}
.text-center {
  width: 100%;
  height: 100%;
  padding-left: 5%;
  padding-right: 5%;
  margin-top: 10px;
}
.table thead th {
  font-size: 15px;
}
.btns2 {
  float: right;
  margin-right: 5%;
}
.btn_refresh {
  background-color: #f7fafc;
  font-size: 14px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  color: #1d325f;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn_refresh:hover {
  color: black;
  background-color: rgb(228, 228, 228);
  transform: scale(1.1);
}
.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: scale(1.1);
}
.card_header {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>
