<template>
  <div>
    <!-- 路径监控 -->
    <p-card :title="title" style="margin-bottom: 10px">
      <p-grid-form ref="form" :label-col="{ span: 8 }" :span="8" :items="items" @submit="hanlderSubmit" />
    </p-card>

    <p-card>
      <div>
        <p-box :info="list" />
      </div>
    </p-card>
    <div style="float: right; padding: 10px">
      <a-pagination
        v-model="pageNum"
        :page-size-options="pageSizeOptions"
        :page-size="pageSize"
        @change="change"
        show-size-changer
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
        :total="total"
        show-less-items
      />
    </div>
  </div>
</template>

<script>
import config from './config.js'
import PBox from './components/box2.vue'
import { getContainerLocationByContainerNoAndPalletNo } from './api.js'
export default {
  components: { PBox },
  data() {
    return {
      list: [],
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      title: '路径监控',
      items: config.items,
      pageNum: 1,
      pageSize: 10,
      total: 50,
    }
  },
  // mounted:(){ this.getinfo()},

  mounted() {
    this.getinfo()
    this.Settimer()
  },
  deactivated() {
    console.log('activated')
    clearInterval(this.timer)
  },

  methods: {
    Settimer() {
      this.timer = setInterval(() => {
        // this.getinfo()
        this.$refs.form.form.validateFields((error, values) => {
          this.getinfo(values)
        })
      }, 6000)
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
    },
    change(page, pageSize) {
      console.log(page, pageSize)
      this.pageNum = page
      this.pageSize = pageSize
      this.getinfo()
    },
    async getinfo(values) {
      let that = this
      let data
      if (values) {
        data = {
          containerNo: values.containerNo || '',
          palletNo: values.palletNo || '',
          areaNo: values.areaNo || '',
          pageNum: that.pageNum,
          pageSize: that.pageSize,
        }
      } else {
        data = {
          containerNo: '',
          palletNo: '',
          areaNo:'',
          pageNum: that.pageNum,
          pageSize: that.pageSize,
        }
      }
      let res = await getContainerLocationByContainerNoAndPalletNo(data)
      console.log(res)
      if (res.success) {
        this.total = parseInt(res.data.totalCount)
        this.list = res.data.list
      }
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        this.getinfo(values)
      })
    },
  },
}
</script>

<style></style>
