<template>
  <div class="lanaya-table-box">
    <div class="lanaya-table-box__loading" v-if="showLoading">
      <div class="lanaya-table-box__loading__icon"></div>
    </div>
    <table class="lanaya-table" cellpadding="0" cellspacing="0" border-collapse="collapse">
      <thead class="lanaya-table__head">
        <tr class="lanaya-table__head__row">
          <th class="lanaya-table__head__row__checkbox" v-if="table.showSelect">
            <l-checkbox v-model="table.allSelected" @change="allSelectedChange"></l-checkbox>
          </th>
          <th class="lanaya-table__head__row__cell" v-for="(column,index) in columns" :key="index">
            <span>{{column.label}}</span>
          </th>
          <th class="lanaya-table__head__row__cell" v-if="hasOperateButton" :style="operateColumnStyle">
            <span>操作</span>
          </th>
        </tr>
      </thead>
      <tbody class="lanaya-table__body">

        <tr class="lanaya-table__body__row" v-if="table.inlineAdd">
          <td class="lanaya-table__body__row__checkbox" v-if="table.showSelect">
          </td>
          <td class="lanaya-table__body__row__cell" v-for="(column, innerIndex) in columns" :key="innerIndex">
            <slot :name="column.key+'_add'" :row="table.inlineAddRow" :column="column">
            <span v-if="column.add && (column.add.type || column.type) === 'date'">
              <l-date v-model="table.inlineAddRow[column.key]" :with-time="false" format="yyyy-MM-dd"></l-date>
            </span>
              <span v-else-if="column.add && (column.add.type || column.type) === 'dateTime'">
              <l-date v-model="table.inlineAddRow[column.key]"></l-date>
            </span>
              <span v-else-if="column.add && column.add.type === 'select'">
              <l-select v-model="table.inlineAddRow[column.key]" v-bind:options="column.add.options"
                        v-bind:format="column.add.format"></l-select>
            </span>
              <span v-else-if="column.add">
              <l-input v-model="table.inlineAddRow[column.key]"></l-input>
            </span>
            </slot>
          </td>
          <td class="lanaya-table__body__row__cell" v-if="hasOperateButton">
            <l-button-group>
              <l-button @click="buttonClickToConfirmInlineAdd()">确定</l-button>
              <l-button @click="buttonClickToCancelInlineAdd()">取消</l-button>
            </l-button-group>
          </td>
        </tr>

        <tr class="lanaya-table__body__row"
            v-for="(row, outerIndex) in rows"
            :key="outerIndex">
          <td class="lanaya-table__body__row__checkbox" v-if="table.showSelect">
            <l-checkbox v-model="row.selected" @change="selectedChange"></l-checkbox>
          </td>
          <td class="lanaya-table__body__row__cell" v-for="(column, innerIndex) in columns" :key="innerIndex">
            <slot :name="column.key" :row="row" :column="column">
              <span v-if="row.edit && column.edit && (column.edit.type || column.type) === 'date'">
                <l-date v-model="row.tempEditData[column.key]" :with-time="false" format="yyyy-MM-dd"></l-date>
              </span>
              <span v-else-if="row.edit && column.edit && (column.edit.type || column.type) === 'dateTime'">
                <l-date v-model="row.tempEditData[column.key]"></l-date>
              </span>
              <span v-else-if="row.edit && column.edit && column.edit.type === 'select'">
                <l-select v-model="row.tempEditData[column.key]"
                          :options="column.edit.options"
                          :format="column.edit.format">
                </l-select>
              </span>
              <span v-else-if="row.edit && column.edit">
                <l-input v-model="row.tempEditData[column.key]"></l-input>
              </span>
              <span v-else-if="column.type === 'status'">
                <l-status :level="cellValue(row,column)[1]">{{cellValue(row,column)[0]}}</l-status>
              </span>
              <span v-else>{{cellValue(row,column)}}</span>
            </slot>
          </td>
          <td class="lanaya-table__body__row__cell" v-if="hasOperateButton">
            <l-button-group>
              <l-button @click="buttonClickToInlineEdit(row)" v-if="table.inlineEdit && !row.edit">编辑</l-button>
              <l-button @click="buttonClickToConfirmInlineEdit(row)" v-if="table.inlineEdit && row.edit">确定</l-button>
              <l-button @click="buttonClickToCancelInlineEdit(row)" v-if="table.inlineEdit && row.edit">取消</l-button>
              <l-button v-for="(button, buttonIndex) in table.operateButtons"
                        :key="buttonIndex"
                        :status="button.status"
                        :outline="button.outline"
                        :size="button.size"
                        @click="buttonClick(row, button)">
                {{button.label}}
              </l-button>
            </l-button-group>
          </td>
        </tr>
      </tbody>
      <tfoot class="lanaya-table__foot" v-if="table.showPage">
        <tr class="lanaya-table__foot__row">
          <td class="lanaya-table__foot__row__cell" :colspan="colspan">
            <div class="lanaya-table__foot__row__cell__pagination">
              <div class="lanaya-table__foot__row__cell__pagination__size">
                <l-select :options="pageSizeOptions" v-model="pageSize" :filter="false"
                          @change="pageSizeChange"></l-select>
              </div>
              <div class="lanaya-table__foot__row__cell__pagination__info">
                {{pageInfo}}
              </div>
              <ul class="lanaya-table__foot__row__cell__pagination__page">
                <li class="lanaya-table__foot__row__cell__pagination__page__item" @click="goToFirstPage">
                  <i class="icon icon-more-left"></i>
                </li>
                <li class="lanaya-table__foot__row__cell__pagination__page__item" @click="prevPage">
                  <i class="icon icon-left"></i>
                </li>
                <li class="lanaya-table__foot__row__cell__pagination__page__item"
                    v-if="showBefore"
                    @click="showBeforePageNumber">
                  <span>...</span>
                </li>
                <li class="lanaya-table__foot__row__cell__pagination__page__item" @click="goToPage(page)"
                    :class="{'is-active':isCurrentPage(page)}"
                    v-for="(page, index) in table.getAllPageNumber()" :key="index">
                  <span>{{page + 1}}</span>
                </li>
                <li class="lanaya-table__foot__row__cell__pagination__page__item"
                    v-if="showAfter"
                    @click="showAfterPageNumber">
                  <span>...</span>
                </li>
                <li class="lanaya-table__foot__row__cell__pagination__page__item" @click="nextPage">
                  <i class="icon icon-right"></i>
                </li>
                <li class="lanaya-table__foot__row__cell__pagination__page__item" @click="goToLastPage">
                  <i class="icon icon-more-right"></i>
                </li>
              </ul>
            </div>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
import Table from './TableEntity';
import { dateFormatter, attr } from './../../src/utils/utils';

export default {
  name: 'LTable',
  props: {
    table: {
      type: Table,
      default: new Table({})
    }
  },
  computed: {
    showLoading () {
      return this.table.showLoading;
    },
    pageInfo () {
      return this.table.getPageInfo();
    },
    showBefore () {
      return this.table.getAllPageNumber()[0] > 0;
    },
    showAfter () {
      let pageNumbers = this.table.getAllPageNumber();
      return pageNumbers[pageNumbers.length - 1] < this.table.getMaxPageNumber();
    },
    colspan () {
      return this.table.columns.length + ((this.table.operateButtons.length > 0 || this.table.inlineEdit) ? 1 : 0) + (this.table.showSelect ? 1 : 0);
    },
    columns () {
      return this.table.columns;
    },
    rows () {
      return this.table.getCurrentData();
    },
    hasOperateButton () {
      return this.table.operateButtons.length > 0 || this.table.inlineEdit;
    },
    operateColumnStyle () {
      return {
        width: 80 * ((this.table.inlineEdit ? 2 : 0) + this.table.operateButtons.length) + 'px'
      };
    }
  },
  data () {
    return {
      pageSizeOptions: [{
        id: 10,
        label: '10条/页'
      }, {
        id: 20,
        label: '20条/页'
      }, {
        id: 50,
        label: '50条/页'
      }, {
        id: 100,
        label: '100条/页'
      }],
      pageSize: 10
    };
  },
  methods: {
    pageSizeChange (size) {
      this.table.changePageSize(size);
    },
    prevPage () {
      this.table.prevPage();
    },
    nextPage () {
      this.table.nextPage();
    },
    goToFirstPage () {
      this.table.goToFirstPage();
    },
    goToLastPage () {
      this.table.goToLastPage();
    },
    goToPage (p) {
      this.table.goToPage(p);
    },
    showBeforePageNumber () {
      this.table.showBeforePageNumber();
    },
    showAfterPageNumber () {
      this.table.showAfterPageNumber();
    },
    isCurrentPage (page) {
      return this.table.getCurrentPageNumber() === page;
    },
    buttonClickToConfirmInlineAdd () {
      this.table.addRow(this.table.inlineAddRow);
      this.table.finishInlineAdd();
    },
    buttonClickToCancelInlineAdd () {
      this.table.finishInlineAdd();
    },
    buttonClickToInlineEdit (row) {
      this.table.setTempEditRowData(row);
      row.edit = true;
    },
    buttonClickToCancelInlineEdit (row) {
      row.edit = false;
    },
    buttonClickToConfirmInlineEdit (row) {
      this.table.setEditRowData(row);
      row.edit = false;
    },
    buttonClick (row, button) {
      if (button.click && typeof button.click === 'function') {
        button.click(row, this.table, button);
      }
    },
    selectedChange () {
      this.table.selectedChange();
    },
    allSelectedChange (value) {
      this.table.setAllSelected(value);
    },
    cellValue (row, column) {
      let value = attr(row, column.key);
      if (column.format && typeof column.format === 'function') {
        return column.format(value, row, this.table);
      }
      switch (column.type) {
        case 'date':
          return dateFormatter('yyyy-MM-dd', value);
        case 'dateTime':
          return dateFormatter('yyyy-MM-dd HH:mm:ss', value);
        default:
          return value;
      }
    }
  },
  mounted () {
    this.pageSize = this.table.page.pageSize;
  }
};
</script>
