<template>
  <div class="page-view" v-loading="load">
    <div class="tool">
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button icon="el-icon-refresh" size="small" circle @click="getList"></el-button>
      </el-tooltip>
    </div>
    <vxe-table
      size="mini"
      border
      stripe
      ref="table"
      :height="height"
      :row-config="{isCurrent: true,isHover: true}"
      :data="data">
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="entryOrderCode" title="订单编号" width="100"> </vxe-column>
      <vxe-column field="orderType" title="出库类型" width="100"> </vxe-column>
      <vxe-column field="entryOrderId" title="入库单仓储系统编码" width="150"> </vxe-column>
      <vxe-column field="warehouseCode" title="仓库编码" width="100"> </vxe-column>
      <vxe-column field="logisticsCode" title="物流公司编码" width="130"> </vxe-column>
      <vxe-column field="logisticsName" title="物流公司名称" width="130"> </vxe-column>
      <vxe-column field="expectStartTime" title="预期到货时间" width="150"> </vxe-column>
      <vxe-column field="expectEndTime" title="最迟预期到货时间" width="140"> </vxe-column>
      <vxe-column field="senderInfo" title="发件人信息" show-overflow width="170"> </vxe-column>
      <vxe-column field="receiverInfo" title="收件人信息" width="200"> </vxe-column>
      <vxe-column field="supplierName" title="供应商名称" show-overflow width="140"> </vxe-column>
      <vxe-column field="sourceWarehouseName" title="出库仓库名称" width="140"> </vxe-column>
      <vxe-column field="expressCode" title="运单号" width="100"> </vxe-column>
      <vxe-column field="createTime" title="创建时间" width="140"> </vxe-column>
      <vxe-column title="操作" width="120" fixed="right" align="center">
      <template #default="{ row }">
        <el-button type="text" size="mini" @click="detailProduct(row)">查看商品</el-button>
      </template>
    </vxe-column>
    </vxe-table>
    <div class="page">
      <el-pagination v-if="page.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNo" :page-size="page.pageSize"
        :layout="'total, sizes, prev, pager, next, jumper'" :total="page.total"></el-pagination>
    </div>
    <JstproductModal ref="JstproductModal" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import {inStore} from '@/api/jstOrder'
import JstproductModal from "./jstproductModal.vue";
@Component({components:{JstproductModal}})
export default class Instore extends Vue {
  data:Array<any>=[]
  load:boolean=false
  height=700
  page:any={
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  handleSizeChange(v:number){
    this.page.pageSize = v;
    this.getList()
  }
  handleCurrentChange(v:number){
    this.page.pageNo = v;
    this.getList()
  }
  getList(){
    let data:any={}
    data.pageNo = this.page.pageNo;
    data.pageSize = this.page.pageSize;
    this.load = true
    inStore(data).then((res:any) => {
      this.load = false
      this.data = res.data.records;
      this.page.total = res.data.total
    }).catch(()=>{
      this.load = false
    })
  }
  detailProduct(row:any){
    if(this.$refs.JstproductModal){
      (this.$refs.JstproductModal as any).setShow(true);
      (this.$refs.JstproductModal as any).setType('inStore');
      (this.$refs.JstproductModal as any).setValue(row);
    }
  }
  mounted() {
    this.getList()
    this.$nextTick(() => {
      this.height = (this as any).$el.offsetHeight;
      if(this.height > 200) {
        this.height = this.height - 50 - 50
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.page-view{
  height: 100%;
  width: 100%;
  .page{
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .tool{
    padding: 8px 16px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>