<template>
  <el-drawer class="storeRecord" :size="750" append-to-body title="商品监控" :visible.sync="drawer" direction="rtl">
    <div class="record-main">
      <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="load">
        <el-tab-pane label="订单记录" name="first">
          <by-table :propConfig="orderConfig" v-if="activeName == 'first'" ref="orderTable" class="tableComp" @pagination="paginationOrder">
            <template v-slot:state='{ row }'>
              <span v-if="row.status == 'WaitPay'">待付款</span>
              <span v-if="row.status == 'Delivering'">发货中</span>
              <span v-if="row.status == 'Merged'">被合并</span>
              <span v-if="row.status == 'Question'" style="color:red">异常</span>
              <span v-if="row.status == 'Split'">被拆分</span>
              <span v-if="row.status == 'WaitOuterSent'">等供销商|外仓发货</span>
              <span v-if="row.status == 'WaitConfirm'">已付款待审核</span>
              <span v-if="row.status == 'WaitFConfirm'">已客审待财审</span>
              <span v-if="row.status == 'Sent'">已发货</span>
              <span v-if="row.status == 'Cancelled'">取消</span>
            </template>
            <template v-slot:tmsOrderStatus='{ row }'>
              {{ row.omsShippingOrder?getTMSStatus(row.omsShippingOrder.tmsOrderStatus):'' }}
            </template>
            <template v-slot:tmsOrderNo='{ row }'>
              {{ row.omsShippingOrder?row.omsShippingOrder.tmsOrderNo:'' }}
            </template>
            <template v-slot:num='{ row }'>
              {{ row.omsShippingOrder?row.omsShippingOrder.tmsTotalQuantity:'' }}
            </template>
          </by-table>
        </el-tab-pane>
        <el-tab-pane label="入库记录" name="second">
          <by-table :propConfig="inStoreConfig" v-if="activeName == 'second'" ref="inStoreTable" class="tableComp" @pagination="paginationInStore"></by-table>
        </el-tab-pane>
        <el-tab-pane label="出库记录" name="third">
          <by-table :propConfig="outStoreConfig" v-if="activeName == 'third'" ref="outStoreTable" class="tableComp" @pagination="paginationOutnStore"></by-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import api from '@/api/currency'
@Component({components:{}})
export default class StoreRecord extends Vue {
  drawer=false
  data:Array<any>=[]
  value:any={}
  load:boolean = false;
  activeName:any='first'
  orderConfig:any={
    attr:{
      size:'mini'
    },
    columns:[{
      title:'订单号',
      field:'id',
      width:70
    },{
      title:'状态',
      field:'state',
      slot:true,
      width:120
    },{
      title:'TMS运输号',
      field:'tmsOrderNo',
      slot:true,
      width:165
    },{
      title:'TMS运输状态',
      field:'tmsOrderStatus',
      slot:true,
      // width:120
    },{
      title:'数量',
      field:'num',
      slot:true
    },{
      title:'创建时间',
      field:'createTime',
      width:140
    }]
  }
  inStoreConfig:any={
    attr:{
      size:'mini'
    },
    columns:[{
      title:'订单号',
      field:'orderNumber'
    },{
      title:'数量',
      field:'number'
    },{
      title:'创建时间',
      field:'createTime'
    }]
  }
  outStoreConfig:any={
    attr:{
      size:'mini'
    },
    columns:[{
      title:'订单号',
      field:'orderNumber'
    },{
      title:'数量',
      field:'number'
    },{
      title:'创建时间',
      field:'createTime'
    }]
  }
  pageOrder = {
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  inStorePage={
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  outStorePage={
    pageNo: 1, //当前页
    pageSize: 20, //每页条数
    total: 0 //总条数
  }
  getTMSStatus(v:any){
    let n = '';
    switch(v){
      case 0:
        n = '创建';
        break;
      case 5:
        n = '已分派';
        break;
      case 10:
        n = '已派车';
        break;
      case 15:
        n = '已提货';
        break;
      case 20:
        n = '已发运';
        break;
      case 30:
        n = '已送达';
        break;
      case 35:
        n = '已回单';
        break;
      case -1:
        n = '已撤回';
        break;
      case -2:
        n = '取消';
        break;
    }

    return n;
  }
  paginationOrder(p:any){
    this.pageOrder.pageNo = p.pageNum;
    this.pageOrder.pageSize = p.pageSize;
    this.loadOrderList();
  }
  paginationInStore(p:any){
    this.inStorePage.pageNo = p.pageNum;
    this.inStorePage.pageSize = p.pageSize;
    this.loadInstoreList()
  }
  paginationOutnStore(p:any){
    this.outStorePage.pageNo = p.pageNum;
    this.outStorePage.pageSize = p.pageSize;
    this.loadOutstoreList()
  }
  // handleCurrentChange(v:number){
  //   this.page.pageNo = v
  // }
  setShow(v:boolean){
    this.drawer = v
    this.pageOrder.pageNo=1;
    this.pageOrder.total=0;
    this.inStorePage.pageNo=1;
    this.inStorePage.total=0;
    this.outStorePage.pageNo=1;
    this.outStorePage.total=0;
    this.activeName='first'
    this.$nextTick(() => {
      let height = (document.getElementsByClassName('tableComp')[0] as any).offsetHeight;
      this.orderConfig.attr.height = height - 48;
      this.inStoreConfig.attr.height = height - 48;
      this.outStoreConfig.attr.height = height - 48;
      if(this.$refs.orderTable){
        (this.$refs.orderTable as any).setValue([]);
        (this.$refs.orderTable as any).setPage(this.pageOrder);
      }
    })
  }
  setData(data:any){
    this.value = data
    this.loadOrderList()
  }
  loadOrderList(){
    if(this.value && this.value.id){
      let data:any = {};
      data.itemId = this.value.id
      data.pageNo = this.pageOrder.pageNo
      data.pageSize = this.pageOrder.pageSize
      this.load = true;
      api.queryByProductId(data).then(res => {
        this.load = false;
        this.pageOrder.total = res.data.total;
        (this.$refs.orderTable as any).setValue(res.data.records);
        (this.$refs.orderTable as any).setPage(this.pageOrder);
      }).catch(() => {
        this.load = false
      })
    }
  }
  loadInstoreList(){
    if(this.value && this.value.id){
      let data:any = {};
      data.sku = this.value.id
      data.pageNo = this.inStorePage.pageNo
      data.pageSize = this.inStorePage.pageSize
      this.load = true;
      api.inQueryBySku(data).then(res => {
        this.load = false;
        this.inStorePage.total = res.data.total;
        this.$nextTick(()=> {
          (this.$refs.inStoreTable as any).setValue(res.data.records);
          (this.$refs.inStoreTable as any).setPage(this.inStorePage);
        })
        
      }).catch(() => {
        this.load = false
      })
    }
  }
  loadOutstoreList(){
    if(this.value && this.value.id){
      let data:any = {};
      data.sku = this.value.id
      data.pageNo = this.outStorePage.pageNo
      data.pageSize = this.outStorePage.pageSize
      this.load = true;
      api.inQueryBySku(data).then(res => {
        this.load = false;
        this.outStorePage.total = res.data.total
        this.$nextTick(()=> {
          (this.$refs.outStoreTable as any).setValue(res.data.records);
          (this.$refs.outStoreTable as any).setPage(this.outStorePage);
        })
        
      }).catch(() => {
        this.load = false
      })
    }
  }
  handleClick() {
    if(this.activeName == 'first') {
      this.pageOrder.pageNo = 1
      this.pageOrder.total = 0
      this.$nextTick(()=>{
        this.loadOrderList()
      })
    }else if(this.activeName == 'second') {
      this.inStorePage.pageNo = 1
      this.inStorePage.total = 0
      this.$nextTick(()=>{
        this.loadInstoreList()
      })
    }else if(this.activeName == 'third') {
      this.outStorePage.pageNo = 1
      this.outStorePage.total = 0
      this.$nextTick(()=>{
        this.loadOutstoreList()
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .record-main{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    .re-box{
      height: calc(100% - 50px);
      overflow-y: auto;
      .re-list{
        width: 100%;
        border-bottom: dotted 1px #CCC;
        padding: 16px 0;
      }
      .record-row{
        width: 100%;
        display: flex;
        // flex-flow: wrap;
        font-size: 14px;
        padding-bottom: 8px;
        .log-time{
          width: 220px;
          color: #666;
          flex-shrink: 0;
        }
        .log-user{
          width: 120px;
          padding-right: 8px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #666;
          flex-shrink: 0;
        }
        .state{
          // width: 130px;
          width: 100%;
          padding-right: 8px;
          overflow: hidden;
          white-space: nowrap;
          color: #666;
          text-overflow: ellipsis;
        }
        .d-code{
          width: 120px;
        }
        .d-state{
          width: 160px;
        }
      }
    }
    .page{
      height:50px;
      display: flex;
      align-items: flex-end;
      flex-direction: column;
      justify-content: center;
    }
  }
  .tableComp{
    height: 100%;
    overflow: hidden;
  }
</style>
<style lang="scss">
.storeRecord {
  .el-drawer__header{
    height: 50px;
    box-sizing: border-box;
    padding: 0 16px !important;
    width: 100%;
    margin: 0 !important;
    display: flex;
    align-items: center;
  }
  .el-drawer__body {
    height: calc(100% - 50px);
    flex:none;
  }
}
.record-main{
  .el-tabs{
    width: 100%;
    height: 100%;
  }
  .el-tabs__header{
    margin: 0 !important;
  }
  .el-tabs__content{
    height: calc(100% - 40px);
    padding-top: 8px;
    box-sizing: border-box;
    overflow: hidden;
    .el-tab-pane{
      width: 100%;
      height: 100%;
    }
  }
}
</style>