<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="pagerDto._Eq_OperationUserName" placeholder="操作人" clearable filterable>
          <el-option
            v-for="item in userInfos"
            :key="item.NickName"
            :label="item.NickName"
            :value="item.NickName"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="pagerDto._Eq_Traget" placeholder="操作关键字" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="pagerDto._Eq_OperationName" placeholder="操作类型" clearable filterable>
          <el-option
            v-for="item in OperationNames"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <el-date-picker
            v-model="CreateDate"
            type="daterange"
            range-separator="至"
            start-placeholder="操作开始日期"
            value-format="yyyy-MM-dd"
            end-placeholder="操作结束日期"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="pagerSerach()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="" icon="el-icon-download" @click="out()">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="sData"
      border
      height="660"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in props.row.Logs"
              :key="index"
              :timestamp="activity.TriggerTime"
            >
              {{ activity.StatusString }}
            </el-timeline-item>
          </el-timeline>
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="OperationUserName" />
      <el-table-column label="操作关键字" prop="Traget" />
      <el-table-column label="操作类型" prop="OperationName" />
      <el-table-column label="操作时间" prop="CreateTime" />
    </el-table>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :current-page="pagerDto.PageIndex"
      :page-size="pagerDto.PageSize"
      background
      layout="prev, pager, next ,total ,jumper,sizes,slot "
      :total="pagerDto.total"
      @current-change="pagerSerach"
    />
  </div>
</template>
<script>
import { _getOperationName, _getUserInfos } from '@/api/baseInfo'
import { _getOperationLogs, _outOperationLogs } from '@/api/userwork'
export default {
  name: 'Warehouse',
  data() {
    return {
      CreateDate: [],
      OperationNames: [],
      userInfos: [],
      pagerDto:
            {
              PageIndex: 1,
              PageSize: 100,
              total: 0,
              QuerySort: [{ Field: 'Id', IsDesc: true }],
              _Eq_OperationUserName: '',
              _Eq_Traget: '',
              _Eq_OperationName: '',
              _GrE_CreateTime: '',
              _LeE_CreateTime: ''
            }
    }
  },
  created() {
    _getOperationName().then(response => {
      this.OperationNames = response
    })
    _getUserInfos('行运易').then(response => {
      this.userInfos = response
    })
  },
  methods: {
    pagerSerach(index) {
      this.pagerDto._GrE_CreateTime = this.CreateDate[0]
      this.pagerDto._LeE_CreateTime = this.CreateDate[1]
      if (index && index > 0) { this.pagerDto.PageIndex = index } else { this.pagerDto.PageIndex = 1 }
      _getOperationLogs(this.pagerDto).then(response => {
        this.sData = response.Result
        this.pagerDto.total = response.TotalCount
      })
    },
    out() {
      _outOperationLogs(this.pagerDto)
    }
  }
}
</script>
