<!-- 滞留物料 -->
<template>
  <div class="container">
    <div class="filter">
      <Button
        :type="tabIndex === index ? 'primary' : 'default'"
        v-for="(item, index) in tableFilter"
        @click="tabClick(item.e, index)"
        :key="index">
        {{ item.text }}
      </Button>
    </div>
    <div class="content">
      <my-table :data="data" :columns="columns" :is-show-filter="false" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
    </div>
  </div>
</template>

<script>
import { GetStockDelayMaterial } from '@/api/storageHome'
import MyTable from '_c/my-table/my-table'
export default {
  name: 'material_stranded',
  components: {
    MyTable
  },
  data () {
    return {
      tabIndex: 0,
      formData: {},
      show: false,
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料类型',
          key: 'categoryName',
          minWidth: 150
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '滞留数量',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '入库时间',
          key: 'inStockTime',
          minWidth: 150
        },
        {
          title: '在库时长（天）',
          key: 'inStockDay',
          minWidth: 150
        },
        {
          title: '出库数量',
          key: 'delayDay',
          minWidth: 150
        }
      ],
      tableFilter: [
        {
          name: 'Button',
          text: '按超时天数排序',
          width: '300',
          e: 'a'
        },
        {
          name: 'Button',
          text: '滞留3-6个月',
          width: '300',
          e: 'b'
        },
        {
          name: 'Button',
          text: '滞留6-12个月',
          width: '300',
          e: 'c'
        },
        {
          name: 'Button',
          text: '滞留12个月以上',
          width: '300',
          e: 'd'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        stockDelayTime: 0
      }
    }
  },
  methods: {
    tabClick (e, index) {
      this.tabIndex = index
      switch (e) {
        case 'a':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 0
          this.getList()
          break
        case 'b':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 1
          this.getList()
          break
        case 'c':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 2
          this.getList()
          break
        case 'd':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 3
          this.getList()
          break
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'a':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 0
          this.getList()
          break
        case 'b':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 1
          this.getList()
          break
        case 'c':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 2
          this.getList()
          break
        case 'd':
          this.params.pageIndex = 1
          this.params.stockDelayTime = 3
          this.getList()
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetStockDelayMaterial(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;
  .filter {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    button {
      margin-right: 10px;
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
  }
}
</style>
