<template>
  <b-card-code title="留言板">

    <!-- search input -->
    <div class="custom-search d-flex justify-content-end">
      <b-form-group>
        <div class="d-flex align-items-center">
          <label class="mr-1">Search</label>
          <b-form-input
            v-model="searchTerm"
            placeholder="Search"
            type="text"
            class="d-inline-block" />
        </div>
      </b-form-group>
    </div>

    <!-- table -->恩
    <vue-good-table
      @on-row-click="onRowClick"
      :columns="columns"
      :rows="rows"
      :rtl="direction"
      :search-options="{
        enabled: true,
        externalQuery: searchTerm
      }"

      :pagination-options="{
        enabled: true,
        perPage: pageLength
      }">
      <template
        slot="table-row"
        slot-scope="props">

        <!-- Column: Name -->
        <span
          v-if="props.column.field === 'author_id'"
          class="text-nowrap">
          <b-avatar
            :src="require('@/assets/images/avatars/' + props.row.author_id + '-small.png')"
            class="mx-1" />
          <span class="text-nowrap">{{ formatName(props.row.author_id) }}</span>
        </span>

        <!-- Column: Status -->
        <span class="ellipsis" v-else-if="props.column.field === 'content'">
          {{ props.row.content }}
        </span>

        <!-- Column: Action -->
        <span v-else-if="props.column.field === 'action'">
          <span>
            <b-dropdown
              variant="link"
              toggle-class="text-decoration-none"
              no-caret>
              <template v-slot:button-content>
                <feather-icon
                  icon="MoreVerticalIcon"
                  size="16"
                  class="text-body align-middle mr-25" />
              </template>
              <b-dropdown-item>
                <feather-icon
                  icon="Edit2Icon"
                  class="mr-50" />
                <span>Edit</span>
              </b-dropdown-item>
              <b-dropdown-item>
                <feather-icon
                  icon="TrashIcon"
                  class="mr-50" />
                <span>Delete</span>
              </b-dropdown-item>
            </b-dropdown>
          </span>
        </span>

        <!-- Column: Common -->
        <span v-else>
          {{ props.formattedRow[props.column.field] }}
        </span>
      </template>

      <!-- pagination -->
      <template
        slot="pagination-bottom"
        slot-scope="props">
        <div class="d-flex justify-content-between flex-wrap">
          <div class="d-flex align-items-center mb-0 mt-1">
            <span class="text-nowrap ">
              Showing 1 to
            </span>
            <b-form-select
              v-model="pageLength"
              :options="['5', '10']"
              class="mx-1"
              @input="(value) => props.perPageChanged({ currentPerPage: value })" />
            <span class="text-nowrap"> of {{ props.total }} entries </span>
          </div>
          <div>
            <b-pagination
              :value="1"
              :total-rows="props.total"
              :per-page="pageLength"
              first-number
              last-number
              align="right"
              prev-class="prev-item"
              next-class="next-item"
              class="mt-1 mb-0"
              @input="(value) => props.pageChanged({ currentPage: value })">
              <template #prev-text>
                <feather-icon
                  icon="ChevronLeftIcon"
                  size="18" />
              </template>
              <template #next-text>
                <feather-icon
                  icon="ChevronRightIcon"
                  size="18" />
              </template>
            </b-pagination>
          </div>
        </div>
      </template>
    </vue-good-table>

    <template #code>
      {{ codeBasic }}
    </template>
  </b-card-code>
</template>

<script>
import BCardCode from '@core/components/b-card-code/BCardCode.vue'
import {
  BAvatar, BBadge, BPagination, BFormGroup, BFormInput, BFormSelect, BDropdown, BDropdownItem,
} from 'bootstrap-vue'
import { VueGoodTable } from 'vue-good-table'
import store from '@/store/index'
import { codeBasic } from './code'
import { BTable } from 'bootstrap-vue'
import useJwt from '@/auth/jwt/useJwt'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
import moment from 'moment'

export default {
  components: {
    BCardCode,
    VueGoodTable,
    BAvatar,
    BBadge,
    BPagination,
    BFormGroup,
    BFormInput,
    BFormSelect,
    BDropdown,
    BDropdownItem,
  },
  data() {
    return {
      pageLength: 5,
      dir: false,
      codeBasic,
      columns: [
        {
          label: '標題',
          field: 'title',
          width: '15%',
        },
        {
          label: '內容',
          field: 'content',
          width: '25%',
        },
        {
          label: '作者',
          field: 'author_id',
          formatFn: this.formatName,
          width: '20%',
        },
        {
          label: '發布時間',
          field: 'created_at',
          formatFn: this.formatTime,
          width: '15%',
        },
        {
          label: '更新時間',
          field: 'updated_at',
          formatFn: this.formatTime,
          width: '15%',
        },
        {
          label: '動作',
          field: 'action',
          width: '10%',
        },
      ],
      rows: [],
      searchTerm: '',
      nameList: [],
    }
  },
  computed: {
    statusVariant() {
      const statusColor = {
        /* eslint-disable key-spacing */
        Current: 'light-primary',
        Professional: 'light-success',
        Rejected: 'light-danger',
        Resigned: 'light-warning',
        Applied: 'light-info',
        /* eslint-enable key-spacing */
      }

      return status => statusColor[status]
    },
    direction() {
      if (store.state.appConfig.isRTL) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.dir = true
        return this.dir
      }
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.dir = false
      return this.dir
    },
  },
  created() {
    useJwt.postData('/api/message/index', null).then(response => {
      this.rows = response.data;
    }).catch(error => {
      console.log(error)
    });
    useJwt.postData('/api/message/user', null).then(response => {
      this.nameList = response.data;
    }).catch(error => {
      console.log(error)
    });
  },
  methods: {
    onRowClick(params) {
      console.log(params.row.created_at)
      console.log(moment(params.row.created_at).format('LLLL'))
      this.$toast({
        component: ToastificationContent,
        props: {
          title: `Hello user! You have clicked on row ${params.row.id}`,
          icon: 'UserIcon',
          variant: 'success',
        },
      })
    },
    formatTime(value) {
      return moment(value).format('LLLL');
    },
    formatName(id) {
      return this.nameList[id];
    },
  },
}
</script>
<style>
td:has(.ellipsis){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 1px;
}
</style>