<!-- 异常标签查询 -->
<template>
  <div class="container">
<!--    <div class="table-filter">-->
<!--      <div class="filter-item" style="">-->
<!--        <Input v-model="params.key" clearable placeholder="请输入关键字" />-->
<!--      </div>-->
<!--      <div class="filter-item" style="">-->
<!--        <DatePicker v-model="params.date" type="date" placeholder="清选择日期" @on-change="dateChange"></DatePicker>-->
<!--      </div>-->
<!--      <div class="filter-item" style="">-->
<!--        <Button type="primary" style="width: 90px;" @click="search">查询</Button>-->
<!--      </div>-->
<!--    </div>-->
    <div class="content">
      <my-table :data="data" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
    </div>
  </div>
</template>

<script>
import { GetErrorTagDateList } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import { mapMutations } from 'vuex'
export default {
  name: 'error_tag',
  components: {
    MyTable
  },
  data () {
    return {
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '发起时间',
          key: 'beginTime',
          minWidth: 150
        },
        {
          title: '盘点类型',
          key: 'type',
          minWidth: 150
        },
        {
          title: '盘点人',
          key: 'checkUser',
          minWidth: 150
        },
        {
          title: '异常明细',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            return h('span', {
              style: {
                color: 'blue',
                cursor: 'pointer'
              },
              on: {
                click () {
                  _this.$router.push({
                    name: 'error_tag_detail',
                    query: {
                      id: params.row.id
                    }
                  })
                }
              }
            }, '查看')
          }
        }
      ],
      tableFilter: [
        // {
        //   name: 'Input',
        //   placeholder: '请输入关键字',
        //   value: 'key'
        // },
        {
          name: 'DatePicker',
          type: 'date',
          placeholder: '请选择日期',
          value: 'date',
          e: 'dateChange'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '返回上级',
          align: 'right',
          e: 'back'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    // dateChange () {
    //   this.params.pageIndex = 1
    //   this.params.key = ''
    //   this.getList()
    // },
    search () {
      this.params.pageIndex = 1
      this.getList()
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          // this.params.key = option.key
          this.params.beginTime = option.date
          this.params.endTime = option.date
          this.getList()
          break
        case 'export':
          GetCheckRecordPageList({
            ...this.params,
            pageIndex: 1,
            pageSize: 99999
          }).then(res => {
            if (res.code === 0) {
              let data = res.result.list
              if (data.length < 1) return this.$Message.error('数据为空！')
              exportExcel(this.columns, data, '价格维护')
            }
          })
          break
        case 'dateChange':
          console.log(option)
          break
        case 'back':
          this.closeTag(this.$route)
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetErrorTagDateList(this.params).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .table-filter {
    padding-bottom: 10px;
    height: 42px;
    line-height: 32px;
    overflow: hidden;
    .filter-item {
      margin-right: 10px;
      float: left;
    }
  }
  .content {
    flex: 1;
    overflow: auto;
  }
}

</style>
