<!-- 出库记录 -->
<template>
  <div class="container">
    <my-table
      ref="table"
      :data="data"
      :columns="columns"
      :table-filter="tableFilter"
      :table-page="params"
      @event-handle="eventHandle"
      @on-change="changePage"
    ></my-table>
    <my-form v-model="show" :data="formData"></my-form>
  </div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import { GetOutStockPageList } from '@/api/stock'
import axios from 'axios'
import MyForm from './my-form'
import MyTable from '_c/my-table/my-table'
import { GetUserPageList } from '@/api/user'
// import poptipTxet from './poptip-text.vue'
export default {
  name: 'store_out_record',
  components: {
    MyTable,
    MyForm
  },
  data () {
    return {
      key: '',
      formData: {},
      show: false,
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        // {
        //   title: '单据号',
        //   key: 'applyBillNo',
        //   minWidth: 200,
        //   render: (h, params) => {
        //     let _this = this
        //     return h('a', {
        //       on: {
        //         click () {
        //           GetOutBillDetail({
        //             fromBillNo: params.row.applyBillNo,
        //             billType: params.row.billType
        //           }).then(res => {
        //             if (res.code === 0) {
        //               _this.formData = { ...params.row, ...res.result }
        //               _this.show = true
        //             }
        //           })
        //         }
        //       }
        //     }, params.row.applyBillNo)
        //   }
        // },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '领料人',
          key: 'userName',
          minWidth: 150
        },
        // {
        //   title: '申领数量',
        //   key: 'applyTakeQuantity',
        //   minWidth: 150
        // },
        {
          title: '出库类型',
          key: 'outStockType',
          minWidth: 150
        },
        {
          title: '出库时间',
          key: 'outDate',
          minWidth: 150
        },
        {
          title: '出库件数',
          key: 'tagQuantity',
          minWidth: 150,
          render: (h, params) => {
            const arr = params.row.detailItems
            return h('div', [
              h(
                'Poptip',
                {
                  props: {
                    placement: 'right',
                    transfer: true
                  }
                },
                [
                  h(
                    'a',
                    {
                      on: {
                        click: () => {}
                      }
                    },
                    params.row.tagQuantity
                  ),
                  h(
                    'div',
                    {
                      slot: 'content',
                      class: 'api',
                      style: {
                        // textAlign: 'center',
                        padding: '10px'
                      }
                    },
                    arr.map((item, index) => {
                      return [
                        h('p', [
                          h(
                            'span',
                            { style: { marginRight: '30px' } },
                            'RFID：' + item.rfidCode
                          ),
                          h('span', '数量：' + item.quantity)
                        ])
                      ]
                    })
                  )
                ]
              )
            ])
          }
        },
        {
          title: '出库数量',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '备注',
          key: 'remark',
          align: 'center',
          minWidth: 150
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Select',
          value: 'stockChangeType',
          placeholder: '请选择出库类型',
          list: [
            { label: '出库', value: 20 },
            { label: '退货出库', value: 26 },
            { label: '报废出库', value: 27 }
          ]
        },
        {
          name: 'Select',
          value: 'userId',
          placeholder: '请选择领料人',
          list: []
        },
        {
          name: 'DatePicker',
          type: 'daterange',
          placeholder: '请选择时间',
          width: '200px',
          value: 'date'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '导出Excel',
          e: 'export'
        },
        {
          name: 'span',
          text: '出库总数量：0'
        },
        {
          name: 'span',
          text: '出货件数：0'
        }
        // ,
        // {
        //   name: 'RadioGroup',
        //   value: 'takeState',
        //   list: [
        //     { label: '未出库', value: 1 },
        //     { label: '已出库', value: 2 }
        //   ]
        // }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  methods: {
    cfm (type, formData) {
      if (type === 'add') {
        FacPriceAdd({
          ...formData,
          materialCode: formData.code
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        FacPriceChange({
          ...formData,
          factoryPriceId: formData.id
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    // 检索条件事件处理
    eventHandle (option) {
      console.log('????????')
      console.log(option)
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.key = option.key
          option.date[0]
            ? (this.params.beginTime =
                this.$dayjs(option.date[0]).format('YYYY-MM-DD') || '')
            : (this.params.beginTime = '')
          option.date[1]
            ? (this.params.endTime =
                this.$dayjs(option.date[1]).format('YYYY-MM-DD') || '')
            : (this.params.endTime = '')
          this.params.takeState = option.takeState
          this.params.stockChangeType = option.stockChangeType
          this.params.userId = option.userId
          this.getList()
          break
        case 'export':
          GetOutStockPageList({
            ...this.params,
            key: this.params.key || this.key,
            pageIndex: 1,
            pageSize: 99999
          }).then(res => {
            if (res.code === 0) {
              let data = res.result.outStockPageList.list
              if (data.length < 1) return this.$Message.error('数据为空！')
              exportExcel(this.columns, data, '出库记录')
            }
          })
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getUserPageList () { 
      axios
				.post('/cloudApi/uUser/list', {
					deptIdList: ['A012', 'A008', 'A007', 'A017', 'A005'],
				})
				.then((res) => {
					let list = res.data.data.map((item) => {
						return {
							label: item.realname,
							value: item.id,
						}
					})
					this.tableFilter[2].list = list
				})
      // GetUserPageList({
      //   pageIndex: 1,
      //   pageSize: 9999,
      //   takeUser: true
      // }).then(res => {
      //   if (res.code === 0) {
      //     let list = res.result.list.map(item => {
      //       return {
      //         label: item.realName,
      //         value: item.id
      //       }
      //     })
      //     this.tableFilter[2].list = list
      //   }
      // })
    },
    getList () {
      GetOutStockPageList({
        ...this.params,
        key: this.params.key || this.key
      }).then(res => {
        if (res.code === 0) {
          this.tableFilter[6].text = '出库总数量：' + res.result.totalQty || 0
          this.tableFilter[7].text = '出库件数：' + res.result.totalCount || 0
          this.data = res.result.outStockPageList.list
          this.params.total = res.result.outStockPageList.totalCount
        }
      })
    }
  },
  mounted () {
    this.key = this.$route.query.materialCode
    // this.getList()
    this.getUserPageList()
    this.$nextTick(() => {
      this.$refs.table.setModel('date', [new Date(), new Date()])
    })
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
}
</style>
