<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    bgColor="#ffffff"
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower">
    <view class="top-container">
      <view class="row1">{{detail.goodsName}}<text></text></view>
      <view class="row2">结余库存</view>
      <view class="row3">{{detail.qty}}{{detail.unit}}</view>
    </view>

    <view class="screen-container">
      <u-tabs
      	:scrollable="true"
      	:list="tabList"
      	:current="tabCurrent"
      	@click="changeTab"
      	lineColor="#3D8FFD"
      	:activeStyle="{
      		color: '#3D8FFD'
      	}"
      	:inactiveStyle="{
      		color: '#666666'
      	}"
      	itemStyle="height: 88rpx;">
      </u-tabs>
      <view class="date" @tap="isShowDatePicker = true">
        <view class="text">{{date || '请选择月份'}}</view>
        <u-icon name="arrow-down" size="12"></u-icon>
      </view>
    </view>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="top">
          <view class="left">{{item.directFlag == 'ADD' ? '购买':'使用'}}{{item.goodsType == 'M' ? '辅材' : '配件'}}<text>（{{item.flag | statusFilter}}）</text></view>
          <view class="right">当前库存 {{item.closeQty}}</view>
        </view>
        <block v-if="item.directFlag == 'ADD'">
          <view class="row">
            <view class="label">申请单号</view>
            <view class="value">{{item.ref}}</view>
          </view>
          <view class="row">
            <view class="label">购买网点</view>
            <view class="value">{{item.websitName}}</view>
          </view>
          <view class="row">
            <view class="label">下单时间</view>
            <view class="value">{{item.sdate}}</view>
          </view>
          <view class="row">
            <view class="label">购买数量</view>
            <view class="value green">+{{item.changeQty}}{{item.unit}}</view>
          </view>
          <view class="row">
            <view class="label">采购金额</view>
            <view class="value">{{item.price}}元/{{item.unit}}</view>
          </view>
        </block>
        <block v-else>
          <view class="row">
            <view class="label">订单单号</view>
            <view class="value">{{item.ref}}</view>
          </view>
          <view class="row">
            <view class="label">关联工单</view>
            <view class="value">{{item.workerOrderNo}}</view>
          </view>
          <view class="row">
            <view class="label">销售方式</view>
            <view class="value">{{item.settlementType | saleFilter}}</view>
          </view>
          <view class="row">
            <view class="label">下单时间</view>
            <view class="value">{{item.sdate}}</view>
          </view>
          <view class="row">
            <view class="label">使用数量</view>
            <view class="value red">-{{item.changeQty}}{{item.unit}}</view>
          </view>
          <view class="row" v-if="item.goodsType == 'M'">
            <view class="label">收费标准</view>
            <view class="value">{{item.price}}元/{{item.unit}}</view>
          </view>
          <view class="row" v-else>
            <view class="label">销售金额</view>
            <view class="value">{{item.price}}元/{{item.unit}}</view>
          </view>
        </block>
      </view>
    </view>
    <Loading :loadStatus="loadStatus" :dataList="dataList" />

    <u-datetime-picker
      :show="isShowDatePicker"
      v-model="datePickerValue"
      mode="year-month"
      cancelText="重置"
      closeOnClickOverlay
      @cancel="resetDate"
      @close="isShowDatePicker = false"
      @confirm="confirmDate"
    ></u-datetime-picker>

  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageMaterial/pages/stock/stockDetail`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    filters: {
      statusFilter(val) {
        const MAP = {
          ING: '在途',
          TAKE: '已提货',
          USED: '已使用',
          REFUND: '退货',
          INIT: '初始化',
        }
        return MAP[val];
      },
      saleFilter(val) {
        const MAP = {
          OWM: '自有',
          OUT: '外购'
        }
        return MAP[val];
      }
    },

    data() {
      return {
        id: null,
        goodsId: null,
        refresherTriggered: false,
        tabList: [
        	{name: '全部', value: 0},
        	{name: '购买辅材', value: 1},
        	{name: '使用辅材', value: 2},
        ],
        tabCurrent: 0, // 当前选择值
        detail: {},
        dataList: [],
        pageNum: 1,
				loadStatus: 0,
        isShowDatePicker: false,
        datePickerValue: Number(new Date()),
        date: '',
      }
    },

    async onLoad({id, goodsId}) {
      this.id = id;
      this.goodsId = goodsId;
      await this.getDetail();
      await this.getList();
    },

    methods: {
      async getDetail() {
        return new Promise((resolve, reject) => {
          this.$api.post('/material/worker/stock/detail', {
            id: this.id
          }).then(res => {
            this.detail = res.data;
          }).finally(() => {
            resolve(1);
          })
        })
      },

      async getList() {
        this.loadStatus = 1;
        return new Promise((resolve, reject) => {
          const MAP = {
            0: '',
            1: 'ADD',
            2: 'SUB',
          }
          this.$api.post('/material/worker/stock/acc/list', {
            websitGoodsId: this.goodsId,
            pageNum: this.pageNum,
            pageSize: 10,
            directFlag: MAP[this.tabCurrent],
            month: this.date,
          }).then(res => {
            this.loadStatus = 0;
            let list = res.data.records;
            if (list.length < 10) {
              this.loadStatus = 2;
            }
            this.dataList = this.dataList.concat(list);
          }).finally(() => {
            resolve(1);
          })
        })
      },

      changeTab(e) {
        this.tabCurrent = e.value;
        this.refreshList();
      },

      resetDate() {
        this.isShowDatePicker = false;
        this.date = '';
        this.refreshList();
      },

      confirmDate(e) {
        this.isShowDatePicker = false;
        let time = new Date(e.value)
        let y = time.getFullYear();
        let m = (time.getMonth()+1) < 10 ? '0' + (time.getMonth()+1) : time.getMonth()+1;
        this.date = `${y}-${m}`;
        this.refreshList();
      },

      async refreshList() {
      	this.dataList = [];
      	this.pageNum = 1;
      	await this.getList();
      },

      // 下拉刷新
      async refresherrefresh() {
        this.refresherTriggered = true;
        await this.getDetail();
        await this.refreshList();
        this.refresherTriggered = false;
      },

      // 触底加载
      scrolltolower() {
        if (this.loadStatus === 0) {
        	this.pageNum++;
        	this.getList();
        }
      }
    },
  }

  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
.top-container {
  margin: 20rpx;
  border: 1px solid #eaeaea;
  border-radius: 20rpx;
  background: #f5f5f5;
  padding: 20rpx;
  .row1 {
    font-size: 28rpx;
    text {
      margin-left: 20rpx;
    }
  }
  .row2 {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: $sec-font;
  }
  .row3 {
    margin-top: 12rpx;
    text-align: center;
    font-size: 32rpx;
    color: $error-color;
  }
  .row4 {
    margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
    view {
      font-size: 24rpx;
    }
  }
}

.screen-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  ::v-deep .u-tabs {
    flex: 1;
  }
  .date {
    width: 180rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 40rpx;
    padding: 0 12rpx 0 20rpx;
    border: 1px solid #eaeaea;
    border-radius: 8rpx;
    height: 52rpx;
    .text {
      font-size: 28rpx;
    }
  }
}

.list-container {
  padding: 0 20rpx;
  .item {
    padding: 30rpx 0;
    border-bottom: 1px solid #eaeaea;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        font-size: 28rpx;
        font-weight: 500;
        text {
          color: $assist-color;
        }
      }
      .right {
        font-size: 28rpx;
        color: $error-color;
      }
    }
    .row {
      display: flex;
      align-items: center;
      margin-top: 16rpx;
      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }
      .value {
        font-size: 28rpx;
        &.green {
          color: $success-color;
        }
        &.red {
          color: $error-color;
        }
      }
    }
  }
}
</style>
