<!-- 物料修正 -->
<template>
  <div class="container">
    <my-table
      ref="table"
      :data="data"
      :columns="columns"
      :table-filter="tableFilter"
      :table-page="params"
      :multiple="true"
      @event-handle="eventHandle"
      @on-change="changePage"
      @on-select="select"
    >
    </my-table>
    <my-form v-model="show" @confirm="cfm" :type="storeType"></my-form>
  </div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import { GetStockTagDetialPageList, StockTagOut, UpdateStockTagQty } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import MyForm from './my-form'

export default {
  name: 'test',
  components: {
    MyTable,
    MyForm
  },
  data () {
    return {
      id: '',
      selectList: [],
      formData: {},
      storeType: '',
      show: false,
      data: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150,
          sortable: true
        },
        {
          title: '标签编码',
          key: 'rfidCode',
          minWidth: 200,
          sortable: true
        },
        {
          title: '数量',
          key: 'quantity',
          minWidth: 100
        }
        // {
        //   title: '操作',
        //   key: 'action',
        //   align: 'center',
        //   width: '150px',
        //   fixed: 'right',
        //   render: (h, params) => {
        //     return h('div', [
        //       h(
        //         'Button',
        //         {
        //           props: {
        //             type: 'primary',
        //             size: 'small'
        //           },
        //           style: {
        //             marginRight: '.5vw'
        //           },
        //           on: {
        //             click: () => {
        //               this.id = params.row.id
        //               this.storeType = '修正'
        //               this.show = true
        //             }
        //           }
        //         },
        //         '修正'
        //       ),
        //       h(
        //         'Button',
        //         {
        //           props: {
        //             type: 'success',
        //             size: 'small'
        //           },
        //           style: {
        //           },
        //           on: {
        //             click: () => {
        //               this.id = params.row.id
        //               this.storeType = '出库'
        //               this.show = true
        //             }
        //           }
        //         },
        //         '出库'
        //       )
        //     ])
        //   }
        // }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'export'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '修正',
          align: 'right',
          e: 'update'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '出库',
          align: 'right',
          e: 'out'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    select (selection, data) {
      // this.selectList = data
      if (selection.length > 0) {
        this.id = data.id
      } else {
        this.id = ''
      }
    },
    cfm (formData) {
      console.log(formData)
      if (this.storeType === '出库') {
        StockTagOut({
          id: this.id,
          ...formData
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg || '操作成功')
            this.id = ''
            this.show = false
            this.getList()
          }
        })
      } else if (this.storeType === '修正') {
        UpdateStockTagQty({
          id: this.id,
          ...formData
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg || '操作成功')
            this.id = ''
            this.show = false
            this.getList()
          }
        })
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.keyWord = option.key
          this.getList()
          break
        case 'export':
          GetStockTagDetialPageList({
            ...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 'storeIn':
          this.storeType = '入库'
          this.show = true
          break
        case 'storeOut':
          this.storeType = '出库'
          this.show = true
          break
        case 'update':
          if (!this.id) {
            return this.$Message.error('请选择订单！')
          }
          this.storeType = '修正'
          this.show = true
          break
        case 'out':
          if (!this.id) {
            return this.$Message.error('请选择订单！')
          }
          this.storeType = '出库'
          this.show = true
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetStockTagDetialPageList(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%;
}
.print-wrap {
  width: 100vw;
  height: 100vh;
  display: none;
  img {
    width: 50%;
  }
}
</style>
