<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="serachDto.userName" 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-select v-model="serachDto.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="datetimerange"
            range-separator="至"
            start-placeholder="操作开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            end-placeholder="操作结束日期"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="serach()">搜索</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 v-loading="loading" :data="sData" border show-summar height="660">
      <el-table-column label="操作人" prop="OperationUserName" />
      <el-table-column label="操作类型" prop="OperationName" />
      <el-table-column label="计数" prop="Qty" />
    </el-table>
  </div>
</template>
<script>

import { _getUserInfos, _getOperationName } from '@/api/baseInfo'
import { _getOperationGroups, _outUserOperationInfos } from '@/api/userwork'
import format from 'date-fns/format'

export default {
  name: 'UserWrok',
  data() {
    return {
      loading: false,
      CreateDate: [],
      serachDto:
            {
              userName: '',
              operationName: '称重',
              beginTime: '',
              endTime: ''
            },
      userInfos: [],
      operationNames: [],
      sData: []
    }
  },
  created() {
    _getUserInfos('行运易').then(response => {
      this.userInfos = response
    })
    _getOperationName().then(response => {
      this.operationNames = response
    })
    var nowDate = format(new Date(), 'yyyy-MM-dd')
    this.CreateDate = [nowDate, nowDate]
    this.serach()
  },
  methods: {
    serach() {
      this.loading = true
      if (this.setSerach()) {
        _getOperationGroups(this.serachDto).then(response => {
          this.sData = response
          this.loading = false
        }).catch(error => {
          console.log(error)
          this.loading = false
        })
      }
    },
    out() {
      if (this.setSerach()) {
        _outUserOperationInfos(this.serachDto)
      }
    },
    setSerach() {
      if (this.CreateDate.length < 2) {
        this.$alert('必须填入日期')
        return false
      }

      this.serachDto.beginTime = this.CreateDate[0]
      this.serachDto.endTime = this.CreateDate[1]
      return true
    }
  }
}
</script>
