<template>
  <view class="order-list content">
    <view class="swiper-box">
      <template v-if="tableData.length">
        <view class="order-card" v-for="item in tableData" :key="item.id">
          <view class="order-card-title">
            单据编号:{{item.billCode}}
          </view>
          <view class="order-info">
            <p class="info-line">
              <text class="label">操作人:</text>
              <text class="info">{{item.createUser || ''}}</text>
            </p>
            <p class="info-line">
              <text class="label">操作时间:</text>
              <text class="info">{{item.createDate || ''}}</text>
            </p>
            <p class="info-line">
              <text class="label">单据类型:</text>
              <text class="info" v-if="item.kind == '11'">入库</text>
              <text class="info" v-if="item.kind == '21'">入库退货</text>
              <text class="info" v-if="item.kind == '14'">出库</text>
              <text class="info" v-if="item.kind == '24'">出库退货</text>
              <text class="info" v-if="item.kind == '16'">盘库</text>
            </p>
            <p class="info-line">
              <text class="label">操作前数量:</text>
              <text class="info">{{item.beginNum}}</text>
            </p>
            <p class="info-line">
              <text class="label">操作数量:</text>
              <text class="info">{{item.operateNum}}</text>
            </p>
            <p class="info-line">
              <text class="label">操作后数量:</text>
              <text class="info">{{item.finishNum}}</text>
            </p>
            <p class="info-line">
              <text class="label">操作类型:</text>
              <text class="info" v-if="item.operate == 'add'">增加</text>
              <text class="info" v-if="item.operate == 'eqs'">不变</text>
              <text class="info" v-if="item.operate == 'sub'">减少</text>
            </p>
            <p class="info-line">
              <text class="label">备注:</text>
              <text class="info">{{item.remark || ''}}</text>
            </p>
          </view>
        </view>
      </template>
      <template v-else>
        <u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
        </u-empty>
      </template>
    </view>
    <u-loading-page 
    color="#666" 
    loading-mode="semicircle"
    :loading="loading">
    </u-loading-page>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import {request} from '../../utils/request'
import { getLabel } from '../../utils/util'
import {getLiveRecordsByMaterialId} from '../../api/stock'
export default {
  components:{
  },
  data() {
    return {
      getLabel,
      tableData:[],
      loading:false,
      code:'',
      unitList:[],
      id:"",
      store:'',
    };
  },
  onLoad(options) {
    this.id = options.materialId
    this.store = options.store
    this.getList()
    this.getOption()
  },
  // onShow() {
  //  this.getList()
  // },
  methods: {
    //获取单位
    getOption(){
       request({
        url:'/admin/dict/type/spare_unit',
        method:'get',
      })
      .then(res=>{
        if(res.data.code == 0){
          this.unitList = res.data.data
        }
      })
    },
    //获取订单列表
    getList() {
      this.loading = true
      let data = {
        materialId:this.id,
        store:this.store
      }
      getLiveRecordsByMaterialId(data).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data
          this.loading = false
        }
      });
    },
  },
};
</script>

<style>
/* #ifndef APP-NVUE */
view {
  /* display: flex; */
  box-sizing: border-box;
  /* flex-direction: column; */
}

page {
	box-sizing: border-box;
	/* padding: 40rpx 40rpx 80rpx; */
	height: 100%;
}
/* #endif*/
</style>

<style lang="scss" scoped>
@import '../../common/css/public.scss';
.order-list {
  // height: calc(100vh - var(--window-top)) ;
  // overflow: hidden;
  background-color: #f8f8f8;
  .qrcode-wrap{
    padding: 24rpx;
    text-align: center;
    .info-line{
      text-align: center;
      font-size: 32rpx;
      margin-top: 24rpx;
    }
  }
}
.popupShow {
	overflow: hidden;
	position: fixed;
}

</style>