<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower"
  >
    <template slot="header">
      <view class="search-container">
        <u-search
          shape="round"
          :showAction="false"
          placeholder="输入订单单号进行搜索"
          showAction
          actionText="搜索"
          v-model="keyword"
          @search="searchSubmit"
          @custom="searchSubmit"
          @clear="searchSubmit"
        >
        </u-search>
      </view>
      <view class="tab-container">
        <!-- <u-tabs
          :scrollable="true"
          :list="tabList"
          @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>
    </template>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="row">
          <view class="label">工单编号</view>
          <view class="value">{{ item.orderId }}</view>
        </view>
        <view class="row">
          <view class="label">关联工单</view>
          <view class="value">{{ item.refOrder }}</view>
        </view>
        <view class="row">
          <view class="label">客户电话</view>
          <view class="value">{{ item.phone }}</view>
        </view>
        <view class="row">
          <view class="label">使用日期</view>
          <view class="value">{{ item.useTime }}</view>
        </view>
        <view class="row">
          <view class="label">商品名称</view>
          <view class="value">{{ item.goodsName }}</view>
        </view>
        <view class="row">
          <view class="label">商品代码</view>
          <view class="value">{{ item.goodsCode }}</view>
        </view>
        <view class="row">
          <view class="label">使用数量</view>
          <view class="value"
            ><text>{{ item.useQty }}</text
            >{{ item.unit }}</view
          >
        </view>
        <view class="row">
          <view class="label">销售金额</view>
          <view class="value price">{{ item.normAmount }}元</view>
        </view>
      </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/useRecord`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  data() {
    return {
		dataList: [],
		pageNum: 1,
		loadStatus: 0,
      refresherTriggered: false,
      keyword: '',
      // tabList: [
      //   {name: '全部', value: ''},
      //   {name: '辅材记录', value: 'M'},
      //   {name: '配件记录', value: 'P'},
      // ],
      type: 'M',
      isShowDatePicker: false,
      datePickerValue: Number(new Date()),
      date: '',
    }
  },

  onLoad() {
	this.getList();
  },

  methods: {
    getList() {
    	this.loadStatus = 1;
    	this.$api.post('/material/norm/record/list', {
        pageNum: this.pageNum,
        pageSize: 10,
        goodsType: this.type,
        yearMonth: this.date,
        orderId: this.keyword
    	}).then(res => {
    		this.loadStatus = 0;
    		let list = res.data.records;
    		if (list.length < 10) {
    		  this.loadStatus = 2;
    		}
    		this.dataList = this.dataList.concat(list);
    	}).catch(() => {
    		this.loadStatus = 2;
    	}).finally(res => {
    		this.refresherTriggered = false;
    	})
    },

    searchSubmit() {
      this.refreshList();
    },

    changeTab(e) {
    	this.type = 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();
    },

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

    // 滚动到底部
    scrolltolower(e) {
    	if (this.loadStatus === 0) {
    		this.pageNum++;
    		this.getList();
    	}
    },

    // 触发下拉刷新
    refresherrefresh(e) {
    	this.refresherTriggered = true;
    	this.refreshList();
    },
  },
}

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

<style lang="scss" scoped>
.search-container {
  background: #ffffff;
  padding: 0 20rpx;
}
.tab-container {
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  ::v-deep .u-tabs {
    flex: 1;
  }
  .date {
    width: 180rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // margin-left: 40rpx;
    margin: 10rpx 0;
    padding: 0 12rpx 0 20rpx;
    border: 1px solid #eaeaea;
    border-radius: 8rpx;
    height: 52rpx;
    .text {
      font-size: 28rpx;
    }
  }
}

.list-container {
  padding: 0 20rpx;
  .item {
    @include zj-card;
    margin-top: 20rpx;
    padding: 30rpx;
    .row {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      &:first-child {
        margin-top: 0;
      }
      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }
      .value {
        font-size: 28rpx;
        text {
          color: $minor-color;
        }
        &.price {
          color: $theme-color;
        }
      }
    }
  }
}
</style>
