<template>
  <box-content class="log-wrapper">
    <div class="search">
      <SearchForm
        size="mini"
        :that="this"
        :search-data="searchData"
        :search-form="searchForm"
        :search-handle="searchHandle"
        @search="handleSearch"
        @reset="handleReset"
      >
        <!-- 选择自定义slot -->
        <template slot="beginTimeSlot">
          <el-date-picker
            v-model="searchData.BeginTime"
            size="small"
            placeholder="Beginning date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="beginPickerOption"
            style="width:150px"
          />
        </template>
        <template slot="endTimeSlot">
          <el-date-picker
            v-model="searchData.EndTime"
            size="small"
            placeholder="End Date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="endPickerOption"
            style="width:150px"
          />
        </template>
      </SearchForm>
    </div>
    <base-table
      v-loading="loading"
      :columns="columns"
      :list="list"
      :search-data="searchData"
      :total="total"
      @getList="getList"
      @sortByColumn="sortByColumn"
      @celldblclick="celldblclick"
    />
  </box-content>
</template>
<script>
import { searchForm, searchHandle, columns } from './log'
import { getLogList } from '@/api/admin'
import BoxContent from '@/components/BoxContent'
import SearchForm from '@/components/BaseForm/search-form'
import BaseTable from '@/components/BaseTable'
import tableMixins from '@/mixins/table'
import VueClipboard from 'vue-clipboard2'
import Vue from 'vue'
import moment from 'moment'
Vue.use(VueClipboard)
const searchDataDefault = () => {
  return {
    LogCategory: '',
    Keyword: '',
    // BeginTime: new Date(new Date().setMonth(new Date().getMonth() - 5)).format('yyyy-MM-dd'),
    BeginTime: moment().subtract(5, 'days').format('YYYY-MM-DD'),
    EndTime: moment().format('YYYY-MM-DD'),
    PageIndex: 1,
    PageSize: 20,
    Asc: true,
    SortField: ''
  }
}
export default {
  name: 'Log',
  components: { BoxContent, SearchForm, BaseTable },
  mixins: [tableMixins],
  data() {
    return {
      searchData: searchDataDefault(),
      searchForm,
      searchHandle,
      columns,
      loading: false,
      total: 0,
      list: [],
      beginPickerOption: {
        disabledDate: time => {
          if (this.searchData.EndTime) {
            return time.getTime() > new Date(this.searchData.EndTime).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endPickerOption: {
        disabledDate: time => {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getLogList(this.searchData).then(res => {
        this.loading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      })
    },
    // 重置列表查询
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    // 双击复制单元格内容
    celldblclick(row, column) {
      this.$copyText(row[column.property]).then(
        e => {
          this.$message.success('Copyed successfully')
        },
        e => {
          this.$alert('Cope failed')
        }
      )
    }
  }
}
</script>
