<template>
  <a-card :bordered="false">
    <div class="operateJournal">
      <!-- 搜索框 -->
      <div class="table-page-search-wrapper" style="margin-bottom: 15px;">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="操作时间">
                <a-range-picker
                  :format="dateFormat"
                  show-time
                  :placeholder="['开始时间', '结束时间']"
                  v-model="time"
                  @change="onChange"
                  id="OperateJournal-onChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="操作人"><a-input allowClear v-model.trim="searchData.queryWord" :maxLength="30" placeholder="请输入" id="OperateJournal-queryWord"/></a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="OperateJournal-refreshTable">查询</a-button>
              <a-button type="" @click="resetForm" id="OperateJournal-resetForm">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 列表 -->
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        bordered>
        <span slot="actDesc" slot-scope="text, record">{{ record.actDate }}-{{ record.actDesc }}</span>
        <span slot="actorName" slot-scope="text, record">{{ record.actorName }}-{{ record.actorPhone }}</span>
      </s-table>
    </div>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { journalList } from '@/api/OperateJournal.js'
import getDate from '@/libs/getDate'
import moment from 'moment'
export default {
  name: 'OperateJournal',
  components: { STable },
  data () {
    return {
      // 列表
      form: this.$form.createForm(this, {
        name: 'OperateJournal'
      }),
      time: [moment(getDate.getToday().starttime, this.dateFormat), moment(getDate.getToday().endtime, this.dateFormat)],
      searchData: {
        beginDate: null, // 查询的开始时间
        endDate: null, // 查询的结束时间
        queryWord: '' // 操作人
      },
      dateFormat: 'YYYY-MM-DD HH:mm:ss',
      columns: [
        {
          title: '序号',
          dataIndex: 'no',
          width: 60,
          align: 'center'
        },
        {
          title: '操作人',
          dataIndex: 'actorName',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'actorName' }
        },
        {
          title: 'IP',
          dataIndex: 'ip',
          width: 200,
          align: 'center'
        },
        {
          title: '日志明细',
          dataIndex: 'actDesc',
          width: 200,
          align: 'center',
          scopedSlots: { customRender: 'actDesc' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.searchData.beginDate == null ? (this.searchData.beginDate = getDate.getToday().starttime) : null
        this.searchData.endDate == null ? (this.searchData.endDate = getDate.getToday().endtime) : null
        return journalList(Object.assign(parameter, this.searchData)).then(res => {
          const no = (res.data.data.pageNo - 1) * res.data.data.pageSize
          for (let i = 0; i < res.data.data.list.length; i++) {
            const _item = res.data.data.list[i]
            _item.no = no + i + 1
          }
          return res.data.data
        })
      }
    }
  },
  methods: {
    moment,
    // 操作时间change
    onChange (dates, dateStrings) {
      this.searchData.beginDate = dateStrings[0]
      this.searchData.endDate = dateStrings[1]
    },
    // 重置
    resetForm () {
      this.searchData.beginDate = getDate.getToday().starttime
      this.searchData.endDate = getDate.getToday().endtime
      this.time = [moment(getDate.getToday().starttime, this.dateFormat), moment(getDate.getToday().endtime, this.dateFormat)]
      this.searchData.queryWord = ''
      this.$refs.table.refresh(true)
    }
  }

}
</script>

<style></style>
