<!-- 物料库存 -->
<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>
    <write-form v-model="dispatchWrite" :data="formData"></write-form>
    <write-list-form v-model="dispatchWriteList"></write-list-form>
  </div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import { GetStockDataPageList, DoStorageDataInOut } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import MyForm from './my-form'
import WriteForm from './write-form'
import WriteListForm from './write-list-form'

export default {
  name: 'test',
  components: {
    MyTable,
    MyForm,
    WriteForm,
    WriteListForm
  },
  data () {
    return {
      materialCode: '',
      selectList: [],
      formData: {},
      storeType: '',
      show: false,
      dispatchWrite: false,
      dispatchWriteList: 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: 'quantity',
          minWidth: 100
        },
        {
          title: '单位',
          key: 'unitName',
          minWidth: 100
        },
        {
          title: '规格',
          key: 'spec',
          minWidth: 100
        },
        // {
        //   title: '备注',
        //   key: 'remark',
        //   minWidth: 100
        // },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '150px',
          fixed: 'right',
          render: (h, params) => {
            let that = this
            return h('div', [
              h('span', {
                style: {
                  cursor: 'pointer',
                  color: '#169bd5',
                  marginRight: '10px'
                },
                on: {
                  click () {
                    that.$router.push({
                      name: 'store_in_record',
                      query: {
                        materialCode: params.row.materialCode
                      }
                    })
                  }
                }
              }, '入库记录'),
              h('span', {
                style: {
                  cursor: 'pointer',
                  color: '#169bd5'
                },
                on: {
                  click () {
                    that.$router.push({
                      name: 'store_out_record',
                      query: {
                        materialCode: params.row.materialCode
                      }
                    })
                  }
                }
              }, '出库记录')
              // h(
              //   'Button',
              //   {
              //     props: {
              //       type: 'primary',
              //       size: 'small'
              //     },
              //     style: {
              //       marginRight: '.5vw'
              //     },
              //     on: {
              //       click: () => {
              //         this.materialCode = params.row.materialCode
              //         this.storeType = '入库'
              //         this.show = true
              //       }
              //     }
              //   },
              //   '入库'
              // ),
              // h(
              //   'Button',
              //   {
              //     props: {
              //       type: 'success',
              //       size: 'small'
              //     },
              //     style: {
              //     },
              //     on: {
              //       click: () => {
              //         this.materialCode = params.row.materialCode
              //         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: 'dispatchWrite'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '批量单扣减记录',
          width: '200',
          align: 'right',
          e: 'dispatchWriteList'
        }
        // {
        //   name: 'RadioGroup',
        //   value: 'hadPrinter',
        //   list: [
        //     { label: '未打印', value: 0 },
        //     { label: '已打印', value: 1 }
        //   ]
        // },
        // {
        //   name: 'Button',
        //   type: 'primary',
        //   text: '出库',
        //   align: 'right',
        //   e: 'storeOut'
        // },
        // {
        //   name: 'Button',
        //   type: 'primary',
        //   text: '入库',
        //   align: 'right',
        //   e: 'storeIn'
        // }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    select (selection, data) {
      console.log(selection)
      console.log(data)
      // this.selectList = data
      this.materialCode = data.materialCode
      if (selection.length > 0) {
        this.formData = { ...data }
      } else {
        this.formData = {}
      }
    },
    cfm (formData) {
      console.log(formData)
      DoStorageDataInOut({
        inOutType: this.storeType === '入库' ? 0 : 1,
        materialCode: this.materialCode,
        ...formData,
        operateUser: formData.operateUser || this.$store.state.user.id
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '操作成功')
          this.materialCode = ''
          this.show = false
          this.getList()
        }
      })
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.keyWord = option.key
          this.params.hadPrinter = !!option.hadPrinter
          this.getList()
          break
        case 'export':
          if (this.data.length < 1) return this.$Message.error('数据为空！')
          GetStockDataPageList({
            ...this.params,
            pageIndex: 1,
            pageSize: 999999
          }).then(res => {
            if (res.code === 0) {
              exportExcel(this.columns, res.result.list, '物料库存')
            }
          })
          break
        case 'storeIn':
          if (!this.materialCode) {
            return this.$Message.error('请选择订单！')
          }
          this.storeType = '入库'
          this.show = true
          break
        case 'storeOut':
          if (!this.materialCode) {
            return this.$Message.error('请选择订单！')
          }
          this.storeType = '出库'
          this.show = true
          break
        case 'dispatchWrite':
          this.dispatchWrite = true
          break
        case 'dispatchWriteList':
          this.dispatchWriteList = true
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetStockDataPageList(this.params).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.data.forEach(item => {
            item.id = item.materialCode
          })
          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>
