<template>
  <el-container>
    <el-header style="width: 100%;">
      <el-row>
        <el-col :span="22">
          <el-col :span="3">

            <!--            <el-select v-model="queryParam.batchType" clearable placeholder="使用方式" filterable>-->
            <!--              <el-option-->
            <!--                v-for="item in dictData.fklx"-->
            <!--                :key="item.value"-->
            <!--                :label="item.label"-->
            <!--                :value="item.value"-->
            <!--              />-->
            <!--            </el-select>-->
            <el-input
              v-model="queryParam.userName"
              placeholder="姓名"
              clearable
            />

          </el-col>
          <el-col :span="3">
            <el-input
              v-model="queryParam.content"
              placeholder="内容"
              clearable
            />
          </el-col>
          <el-col :span="3">
            <el-select v-model="queryParam.systemCode" placeholder="子系统" clearable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-date-picker v-model="queryParam.ks" value-format="yyyy/MM/dd" type="date" /> <span>-</span> <el-date-picker v-model="queryParam.js" value-format="yyyy/MM/dd" type="date" />
          </el-col>

        </el-col>
        <el-col :span="2 " style="text-align: right">
          <el-button type="primary" @click="loadData1">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <div style="float:right;">
          <!--          <el-button type="success" @click="toolbarButtonClickEvent('myInsert')">新增</el-button>-->
          <el-button type="danger" @click="toolbarButtonClickEvent('myDelete')">删除</el-button>
          <!--          <el-button type="success" @click="toolbarButtonClickEvent('mySave')">保存</el-button>-->
        </div>
      </el-row>

    </el-header>
    <el-container style="padding-top: 10px">
      <el-main>
        <div class="mytable">
          <vxe-grid
            id="id"
            ref="xGrid"
            border
            resizable

            :height="height"
            :auto-resize="true"
            :columns="tableColumn"
            :data="tableData"
            :custom-config="{storage: true}"
            :pager-config="tablePage"
            highlight-hover-row
            @page-change="handlePageChange"
          />
        </div>
      </el-main>
    </el-container>

  </el-container>

</template>

<script>
import XEUtils from 'xe-utils'
import { syLogDel, syLogList } from '@/api/sy/xtgl'
// import TbFilter from '@/components/TableColumnFilter'
import { mapGetters } from 'vuex'
// 分卡原则
export default {
  name: 'Xtrz',
  // components: { TbFilter },
  data() {
    return {
      options: [{
        value: 'DY',
        label: '单元制造'
      }, {
        value: 'GJ',
        label: '管系制造'
      }, {
        value: 'IM',
        label: '仓库管理'
      }, {
        value: 'MP',
        label: '生产管理'
      }, {
        value: 'MS',
        label: '营销管理'
      }, {
        value: 'QC',
        label: '质量管理'
      }, {
        value: 'SY',
        label: '系统管理'
      }, {
        value: 'TX',
        label: '铁舾制造'
      }],

      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 5,
        pageSizes: [5, 50, 100, 500, 10000],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      columnFilter: {},
      queryParam: {
        content: '',
        systemCode: '',
        userName: '',
        ks: XEUtils.toDateString(new Date(), 'yyyy/MM/dd'),
        js: XEUtils.toDateString(new Date(), 'yyyy/MM/dd')
      },
      dictData: {},
      tableData: [],

      height: '500px',

      tableColumn: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: '40px' },
        { field: 'userCode', title: '职号' },
        { field: 'userName', title: '姓名' },
        { field: 'systemCode', title: '子系统编码' },
        { field: 'systemCodedText', title: '子系统名称' },
        { field: 'content', title: '内容' },
        { field: 'computerName', title: '计算机名' },
        { field: 'ip', title: 'ip' },
        { field: 'createTime', title: '使用时间' },
        { field: 'id', visible: false }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'bmbm'
    ])
  },
  created() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.baseSeacrh()
    // this.loadData()
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.loadData1()
    },
    baseSeacrh() {
      // syLogList({}).then(res => {
      //   this.tableData = res.data.records
      //   this.tablePage.total = res.data.total
      // })
    },

    loadData1() {
      syLogList({ syLog: this.queryParam, pageNo: this.tablePage.currentPage, pageSize: this.tablePage.pageSize }).then(res => {
        this.tableData = res.data.records
        this.tablePage.total = res.data.total
      })
    },
    getHeight() {
      this.height = window.innerHeight - 160
    },
    toolbarButtonClickEvent(code) {
      const { removeRecords } = this.$refs.xGrid.getRecordset()
      switch (code) {
        case 'myDelete':

          this.$confirm('删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(type => {
            this.$refs.xGrid.removeCheckboxRow()
            if (removeRecords.length !== 0) {
              const delArr = []
              removeRecords.forEach(function(value, index) {
                delArr[index] = value.id
              })
              console.log(delArr)

              syLogDel(delArr).then(response => {
                if (response.success) {
                  console.log(removeRecords)
                  for (let i = 0; i < this.tableData.length; i++) {
                    if (removeRecords.indexOf(this.tableData[i]) !== -1) {
                      this.tableData.splice(i, 1)
                      i--
                    }
                  }

                  // this.tableData=   this.tableData.filter((x) => !removeRecords.some((item) => x.id === item.id));
                  const xTable = this.$refs.xGrid
                  console.log(this.tableData)
                  xTable.loadData(this.tableData)
                  this.tablePage.total = this.tableData.length
                  // this.$message({ message: '保存成功！', type: 'success' })
                  this.$message(`成功删除 ${removeRecords.length} 条`)
                }
              })
            }
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped >
.el-header{margin:0;padding: 5px;height:auto;}
.el-container{padding: 0;margin:0;}
.el-main{padding: 0;}
.el-col{padding: 0;}
.el-aside{background: #fff;padding: 0}
.el-container{padding: 0}
.el-row {margin-bottom: 5px;}
.el-row:last-child {margin-bottom: 0; }
.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 130px;
}
</style>

