<template>
	<view>
		<!-- <view class="cu-bar bg-white search">
			<view class="search-form round">
				<input type="text" placeholder="   请输入自编号" confirm-type="search" v-model="keyword" @confirm="search" />
				<text class="cuIcon-scan" style="font-size: 21px;"></text>
			</view>
		</view> -->

    <view class="search-header">
      <uni-search-bar class="uni-mt-10" :placeholder="$t('请输入自编号')" @confirm="search" v-model="keyword" cancelButton="none" clearButton="none" ></uni-search-bar>
      <text class="cuIcon-scan" style="font-size: 21px;" @click="scanCode"></text>
      <uni-data-select
        class="select-wrap"
        v-model="selectStatus"
        :localdata="selectStatusRange"
        @change="change"
      ></uni-data-select>
    </view>
    <view class="scroll">
      <view class="flex text-center text-black bg-white text-bold padding-sm table-title">
        <view class="flex-sub">{{$t('自编号')}}</view>
        <view class="flex-sub">{{$t('方数')}}（{{$t('已装/已卸')}}）</view>
        <view class="flex-sub">{{$t('重量')}}（{{$t('已装/已卸')}}）</view>
        <view class="flex-sub">{{$t('数量')}}（{{$t('实装/已卸')}}）</view>
        <view class="flex-sub">{{$t('到仓时间')}}</view>
        <view class="flex-sub">{{$t('运输方式')}}</view>
        <view class="flex-sub">{{$t('目的地')}}</view>
        <view class="flex-sub">{{$t('状态')}}</view>
      </view>
		
			<view class="flex text-center bg-white padding-sm" v-for="(v, k) in listData" :key="k">
				<view :class="['flex-sub',v.apply_status==1?'text-red':'text-blue'] " @click="toDetail(v.id)">{{ v.number }}</view>
				<view class="flex-sub" @click="showModal(true, v)">{{ v.a }}/{{ v.b }}</view>
				<view class="flex-sub" @click="showModal(true, v)">{{ v.c }}/{{ v.d }}</view>
        <view class="flex-sub" @click="showModal(true, v)">{{ v.e }}/{{ v.f }}</view>
        <view class="flex-sub">{{ v.date }}</view>
        <view class="flex-sub">{{ v.fangshi }}</view>
        <view class="flex-sub">{{ v.mudidi }}</view>
        <view class="flex-sub">{{ v.status }}</view>
			</view>
			<uniLoadMore :status="status" :icon-size="16" :content-text="contentText" />
		</view>

		<!-- 柜型弹窗 -->
		<view class="cu-modal" :class="modelShow ? 'show' : ''" style="z-index: 900;">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end bottom-line"><view class="content">{{$t('货柜信息')}}</view></view>
				<view>
					<view class="cu-form-group">
						<view class="title">{{$t('柜号')}}</view>
						<view class="content">{{ container.number }}</view>
					</view>
					<view class="cu-form-group">
						<view class="title">{{$t('柜型')}}</view>
						<view class="content">{{ container.type }}</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end top-line">
					<view class="action"><button class="cu-btn bg-blue margin-left" @tap="showModal(false)">{{$t('确定')}}</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as types from '../../store/mutations-types.js';
import { uniLoadMore } from '@dcloudio/uni-ui';
import { getLoadingList } from '../../api/api.js';

export default {
	name: 'loading-list',
	components: { uniLoadMore },
	data() {
		return {
      selectStatus: 0,
      selectStatusRange: [
        { value: 0, text: this.$t("请选择状态") },
        { value: 1, text: this.$t("待卸柜") },
        { value: 2, text: this.$t("卸柜中") },
        { value: 3, text: this.$t("已卸柜") },
        { value: 4, text: this.$t("卸柜审批中") }
      ],
			modelShow: false,
			listData: [],
			container: {
				number: '',
				type: ''
			},
			page: 1,
			keyword: '',
			status: 'more',
			contentText: {
				contentdown: this.$t('上拉加载更多'),
				contentrefresh: this.$t('加载中'),
				contentnomore: this.$t('没有更多')
			}
		};
	},
	methods: {
    change(value) {
      console.log(value, '---------')
    },
		search() {
			this.page = 1;
			this.getData();
		},
		getData() {
			// let that = this;
      this.listData = [
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
        { number: 'EC1231231', a:20, b: 0, c: 2000, d: 0, e: 5, f: 9, date: '2022-5-12', fangshi: '海运拼柜', mudidi: 'Alaba', status: '封柜审批通过' },
      ]
			// getLoadingList(this.page, this.keyword).then(data => {
			// 	if (that.page == 1) this.listData = [];

			// 	if (data.length > 0) {
			// 		that.listData = that.listData.concat(data);
			// 		that.status = 'more';
			// 	} else that.status = 'noMore';

			// 	uni.stopPullDownRefresh();
			// 	// edit by zhao
			// 	let flag = false;
			// 	data.forEach(function(val, index, arr){
			// 		if(val.apply_status == 1){
			// 			flag = true;
			// 		}				     
			// 	});
			// 	if(flag){
			// 		that.$store.dispatch(types.SHOW_ALERT, {
			// 			msg: '有柜子已通过封柜审批，请及时跟进处理。'
			// 		});
			// 	}	
			// });
		},
		showModal(show, item = null) {
			this.modelShow = show;
			if (show && item) {
				this.container.number = item.numbers;
				this.container.type = item.gxs.title;
			}
		},
		toDetail(id) {
			uni.navigateTo({
				url: './detail?id=' + id
			});
		}
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getData();
	},
	onReachBottom() {
		if (this.status == 'more') {
			this.status = 'loading';
			this.page++;
			this.getData();
		}
	},
	onLoad: function(option) {
		// this.getData();
	},
	onShow(){
		// edit by zhao
		this.page = 1;
		this.getData();
	},
	onBackPress(options) {
		uni.reLaunch({
			url: '../index/index'
		});
		return true;
	}
};
</script>

<style scoped lang="scss">
.scroll {
  /* position: fixed; */
  position: absolute;
  width: 100%;
  // top: 96px;
  .table-header {
    // position: sticky;
    // top: 44px;
    // background: red;
    // z-index: 1;
  }
  .flex-sub {
    flex: 1;
    word-break: break-all;
  }
}
.search {
	position: fixed;
	width: 100%;
	top: 44px;
	z-index: 100;
}
.table-title {
	// position: fixed;
	width: 100%;
	// top: 94px;
	// z-index: 1;
}
// .scroll {
// 	/* position: fixed; */
// 	position: absolute;
// 	width: 100%;
// 	top: 90px;
// }

/* edit by zhao  20210604 */
	.cu-bar{
		min-height: 50px;
	}
	.cu-bar .search-form{
		line-height: 32px;
		height: 32px;
	}
	.cu-bar .search-form uni-input{
		padding-right: 15px;
		height: 32px;
		line-height: 32px;
		font-size: 13px;
	}
</style>
