<!-- 库存预警 -->
<template>
  <div class="container">
    <div style="display: flex;justify-content: space-between;align-items: center">
      <div class="filter">
        <Button
          :type="tabIndex === index ? 'primary' : 'default'"
          v-for="(item, index) in techList"
          @click="tabClick(item.value, index)"
          :key="index">
          {{ item.text }}
        </Button>
      </div>
      <span style="font-size: 12px;font-weight: normal;cursor: pointer;" @click="$router.push('store')">
        <Icon type="ios-arrow-dropleft" size="16"/>
        返回上一级
      </span>
    </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>
      <apply-modal v-model="show" :data="formData" @getlist="getList"></apply-modal>
    </div>
  </div>
</template>

<script>
import { GetStockWarning } from '@/api/storageHome'
import ApplyModal from './index'
import MyTable from '_c/my-table/my-table'
import { GetTechnologyTypList } from '@/api/baseData'
export default {
  name: 'store_warning',
  components: {
    MyTable,
    ApplyModal
  },
  data () {
    return {
      tabIndex: 0,
      formData: {},
      show: false,
      data: [],
      techList: [], // 工艺类型列表
      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: 'safetyQty',
          minWidth: 150
        },
        {
          title: '库存数量',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '预警差值',
          key: 'warnDiffQty',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.warnDiffQty < 0 ? 'red' : ''
              }
            }, params.row.warnDiffQty)
          }
        },
        {
          title: '申购中',
          key: 'onApplyQty',
          minWidth: 150
        },
        {
          title: '已申购',
          key: 'readyApplyQty',
          minWidth: 150
        },
        {
          title: '已采购',
          key: 'unStockQty',
          minWidth: 150
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          align: 'center',
          width: '120px',
          render: (h, params) => {
            let _this = this
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      _this.formData = { ...params.row }
                      _this.show = true
                    }
                  }
                },
                '发起申购'
              )
            ])
          }
        }
      ],
      tableFilter: [
        {
          name: 'Button',
          text: '全部',
          e: 'a'
        },
        {
          name: 'Button',
          text: '直喷',
          e: 'b'
        },
        {
          name: 'Button',
          text: '热转',
          e: 'c'
        },
        {
          name: 'Button',
          text: '打纸',
          e: 'd'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    getTechnologyTypList () {
      GetTechnologyTypList().then(res => {
        if (res.code === 0) {
          this.techList = res.result
          this.techList.unshift({ text: '全部', value: '' })
        }
      })
    },
    tabClick (value, index) {
      this.tabIndex = index
      this.params.pageIndex = 1
      this.params.technologyType = value
      this.getList()
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'a':
          this.params.pageIndex = 1
          this.params.technologyType = ''
          this.getList()
          break
        case 'b':
          this.params.pageIndex = 1
          this.params.technologyType = 0
          this.getList()
          break
        case 'c':
          this.params.pageIndex = 1
          this.params.technologyType = 2
          this.getList()
          break
        case 'd':
          this.params.pageIndex = 1
          this.params.technologyType = 1
          this.getList()
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetStockWarning(this.params).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
    this.getTechnologyTypList()
    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>
