<template>
  <view class="cardbox">
    <view class="cardContent" v-if="inventoryInfo">
      <view class="listItemTitle">
        <view>
          <view class="item"
            >盘点计划：{{ inventoryInfo.IVNUM || inventoryInfo.IBLNR }}</view
          >
          <!-- <view class="item">线边仓|XB-001-02</view> -->
          <view class="item">计划日期：{{ inventoryInfo.PDATU }}</view>
          <view class="item">盘点人员：{{ vuex_user.nickName }}</view>
          <view class="item">盘点状态：未开始</view>
        </view>
      </view>
      <view class="listBottom">
        <view class="bottomTitle" @tap="show = !show">
          <view class="desc">展开盘点明细</view>
          <view class="topIcons">
            <view v-if="show">
              <u-icon name="arrow-down" color="#aaa" size="32"></u-icon>
              展开
            </view>
            <view v-else>
              <u-icon name="arrow-up" color="#aaa" size="32"></u-icon>
              收起
            </view>
          </view>
          <view class="workBtn">
            <u-button
              size="mini"
              class=""
              type="primary"
              @click="handleClickWork()"
              >盘点作业</u-button
            >
          </view>
        </view>
        <view v-if="!show" class="bottomBox">
          <view
            class="boxAll"
            v-for="(item, index) in inventoryList"
            :key="item.PLNR"
          >
            <view class="bottomItem">
              <view class="items">物料编码：{{ item.MATNR }}</view>
              <view class="items">物料名称：{{ item.MAKTX }}</view>
              <view class="items">生产日期：{{ item.PDATU }}</view>
            </view>
            <view class="boxRight">
              <view class="items nums">{{ item.GESME }} ({{ item.MEINS }})</view>
              <view class="items">{{ item.LGOBE }}</view>
              <view class="items">{{ item.LGPLA }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      inventoryInfo: null,
      isIm: false,
      inventoryList: [],
	  params: {}
    };
  },
  computed: {},
  created() {
    // this.getList();
  },
  methods: {
    getList(params) {
	    this.params = params
      this.$u.api.sapApi
        .sapInventory(this.params)
        .then((res) => {
          console.log(res);
          if (res.RDATA_IM.length || res.RDATA_WM.length) {
            // 可以盘点
            this.isIm = res.RDATA_IM.length > 0;
            this.inventoryInfo = this.isIm ? res.RDATA_IM[0] : res.RDATA_WM[0];
            this.inventoryList = (
              this.isIm ? res.RDATA_IM : res.RDATA_WM
            ).reduce((acc, cur) => {
              if (acc.findIndex((item) => item.MATNR === cur.MATNR) === -1) {
                acc.push(cur);
              }
              return acc;
            }, []);
          } else {
            // 不能盘点
            this.$u.toast(res.MSG[0].MESSAGE || "该盘点计划暂无库存数据");
          }
        });
    },
	objectToQueryString(obj) {
	    return Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
	},
    handleClickWork() {
      uni.navigateTo({
        url: '/pages/inventoryCounting/inventoryList?' + this.objectToQueryString(this.params),
		
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cardbox {
  min-height: calc(100vh - 480rpx);
  margin-top: 20rpx;
}
.cardContent {
  border-radius: 8px;
  background: #fff;
}
.listItemTitle {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 2px solid #f8f8f8;
  .u-btn {
    width: 150rpx;
    margin: 0px;
    margin-top: 10rpx;
  }
  .item {
    height: 40rpx;
    line-height: 40rpx;
    color: #000;
    font-size: 28rpx;
    font-weight: 500;
  }
}
.listBottom {
  .bottomTitle {
    height: 60rpx;
    position: relative;
    display: flex;
    justify-content: space-between;
    .desc {
      color: #bbb;
      font-size: 24rpx;
      line-height: 60rpx;
      padding-left: 20rpx;
    }
    .topIcons {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #aaa;
    }
    .workBtn {
      margin-right: 20rpx;
    }
  }
  .bottomBox {
    padding: 20rpx;
    .boxAll {
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      border-radius: 10rpx;
	  margin-bottom: 20rpx;
    }
    .bottomItem {
      padding: 20rpx;
      // margin-bottom: 20rpx;
      .items {
        color: #333;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
    }
    .boxRight {
      padding: 20rpx;
      .items {
		text-align: right;
        color: #333;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;
		&.nums {
			color: #1989fa;
		}
      }
    }
  }
}
</style>
