<template>
	<!-- 建模订单 -->
	<view class="">
		<view class="u-relative l_r_t_b" :style="{ height: 'calc(100vh - ' + footerHeight + 'px)' }">
			<view class="bg_img" id="header">
				<u-navbar :is-back="true" :border-bottom="false" :background="background" title-color="#000" title="">
					<view class="u-flex u-row-center u-flex-1 hs-weight-600 u-font-36">
						<text v-if="searchFlag" class="map-wrap-text">建模订单</text>
						<u-search
							v-if="!searchFlag"
							class="u-m-r-24"
							bg-color="#fff"
							@click="searchCli"
							:disabled="true"
							border-color="#d5aa7a"
							placeholder="请输入面料名称"
							:show-action="false"
							v-model="value"
						></u-search>
					</view>
					<template v-slot:right>
						<view v-if="searchFlag" @click="searchCli" class="u-m-r-24">
							<!-- <u-icon name="search" size="38"></u-icon> -->
							<image class="hs-img-56" src="@/static/images/home/search@2x.png" mode=""></image>
						</view>
					</template>
				</u-navbar>
				<!-- 总数 -->
				<view class="u-m-30 entrus_sum u-flex justify-around text-center">
					<view class="" @click="change(1)">
						<view class="color_FA5353 u-font-48 hs-weight-500">{{ exceptionNum }}</view>
						<view class="color_AF8D66 u-font-28 hs-weight-500">异常</view>
					</view>
					<view class="split_line"></view>
					<view class="" @click="change(4)">
						<view class="u-font-48 hs-weight-500">{{ abolishIds }}</view>
						<view class="color_AF8D66 u-font-28 hs-weight-500">待寄样</view>
					</view>
					<view class="split_line"></view>
					<view class="" @click="change(6)">
						<view class="u-font-48 hs-weight-500">{{ quantityNum }}</view>
						<view class="color_AF8D66 u-font-28 hs-weight-500">待确认</view>
					</view>
				</view>
				<!-- tabs -->
				<u-sticky :enable="enable" :offset-top="offsetTop" class="bd_rad" style="background: #fff;">
					<u-tabs :list="list" font-size="28" :show-bar="false" active-color="#AF8D66" :current="currentTab" @change="change"></u-tabs>
				</u-sticky>
			</view>
			<view class="content" :style="{ bottom: footerHeight + 'px', top: headerHeight + 'px' }">
				<view v-if="!isEmpty" class="u-flex u-row-between u-p-t-24 u-p-b-24 u-p-l-30 u-p-r-30">
					<view class="">全部订单：共{{ total }}单</view>
					<view class="">截止日期：{{ dateTime }}</view>
				</view>
				<view v-if="!isEmpty && overtimeOrderNum > 0 && currentTab == 0" class="bg-fff color_FA5353 hs-weight-700 u-flex u-row-between u-p-t-24 u-p-b-24 u-p-l-30 u-p-r-30">
					<view @click="change(5)">有订单超时未完成，请前往操作</view>
				</view>
				<!-- list -->
				<view class="u-p-t-20 u-p-l-30 u-p-r-30 u-p-b-20">
					<view v-if="!isEmpty" class="u-m-b-20 bd_rad1 u-p-30" @click="dateilEnt(item,'item')" v-for="item in entrustmentList" :key="item.id" style="background: #fff;">
						<view class="u-m-b-30 u-flex justify-between">
							<view class="entrus_list_title u-font-32 ov_hid">{{ item.materialName }}</view>
							<view class="u-font-28">{{ item.status | filterStatus }}</view>
						</view>
						<view class="dis_flex">
							<image class="hs-img-160" :src="`${$IMG_URL}${item.pictureCode}`" mode="cover"></image>
							<view class="u-m-l-20 u-flex-1">
								<view class="u-m-b-10">
									<span class="color_00004">建模服务商</span>
									<span class="u-m-l-20">{{ item.enterpriseName }}</span>
								</view>
								<view class="u-m-b-10">
									<span class="color_00004">截止日期</span>
									<span class="u-m-l-20">{{ item.expirationDate.split(' ')[0] }}</span>
								</view>
								<view class="">
									<span class="color_00004">项目价格</span>
									<span class="u-m-l-20">{{ item.price }} 元</span>
								</view>
							</view>
						</view>
						<view class="u-m-t-30 bd_split_line"></view>
						<view class="justify-between u-m-t-30 u-flex u-flex-nowrap">
							<view class="color_FA5353">{{ item.oddStatus == 1 ? '两天无人接单' : '' }} {{ item.oddStatus == 2 ? '未及时完成' : '' }}</view>
							<view>
								<view v-if="item.status == 1" @click="dateilEnt(item, 'edit')" class="u-m-l-10 btn">即刻发布</view>
								<view v-if="item.status == 3" class="u-m-l-10 btn" @click="dateilEnt(item, 'item')">撤回</view>
								<view v-if="item.status == 4" @click="dateilEnt(item, 'item')" class="u-m-l-10 btn">马上寄送</view>
								<view v-if="item.oddStatus == 2 && item.status == 5" @click.stop="reminder(item.id)" class="u-m-l-10 btn">催单</view>
								<view v-if="item.status == 7" @click="dateilEnt(item,'item' )" class="u-m-l-10 btn">前往审核</view>
							</view>
						</view>
					</view>
					<!-- 加载更多 -->
					<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
					<!-- 缺省页 -->
					<u-empty v-if="isEmpty" tipText="没有数据"></u-empty>
				</view>
			</view>
		</view>
		<view class="footer" id="footer">
			<view class="footer-btn">
				<!-- <view class="custom-style-round-circle custom-style-btn custom-style">
					<view class="custom-style-left save">新面料建模</view>
					<view class="custom-style-right submit">已有面料建模</view>
				</view> -->
				<!--        /* 以下形式在微信小程序会无效，APP和H5有效 */-->
				<u-button @click="dateilEnt" class="custom-style" shape="circle">面料委托建模</u-button>
			</view>
		</view>
		<u-modal v-model="modal.show" :title="modal.title" :show-cancel-button="true" :content="modal.content" @cancel="modal.show = false" @confirm="confirm"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import dom from '@/mixins/dom.js';
export default {
	mixins: [dom],
	data() {
		return {
			// 列表id
			id: '',
			dateTime: '', //当前时间
			value: '',
			searchFlag: true,
			loadStatus: 'loadmore',
			offsetTop: 0,
			enable: true,
			statusBtn: true,
			timeOut: null,
			background: { backgroundColor: 'rgba(245,245,245,0)' },
			modal: {
				show: false,
				content: '',
				title: ''
			},
			quantityNum: 0,
			exceptionNum: 0,
			abolishIds: 0,
			overtimeOrderNum: 0,
			pages: {
				materialName: '',
				current: 1,
				size: 5
			},
			currentTab: 0,
			status: '',
			entrustmentList: [],
			total: 0,
			list: [
				{
					name: '全部',
					status: ''
				},
				{
					name: '异常',
					status: 9
				},
				{
					name: '待发布',
					status: 1
				},
				{
					name: '待接单',
					status: 3
				},
				{
					name: '待寄样',
					status: 4
				},
				{
					name: '建模中',
					status: 5
				},
				{
					name: '待确认',
					status: 7
				},
				{
					name: '完成',
					status: 8
				}
			]
		};
	},
	onShow() {
		this.value = uni.getStorageSync('styleSearch') || '';
		uni.removeStorageSync('styleSearch');
		// 获取查询条件
		this.entrustmentFun();
		this.enable = true;
		// #ifdef APP-PLUS
		this.setOffestTop();
		// #endif
	},
	onHide() {
		this.enable = false;
	},
	onPullDownRefresh() {
		this.pages.current = 1;
		this.entrustmentPage();
	},
	// 上拉加载更多
	onReachBottom() {
		if (this.total > this.entrustmentList.length) {
			// this.pages.size = this.pages.size + 5;
			this.pages.current = this.pages.current + 1;
			this.entrustmentPage();
		}
	},
	onPageScroll(object) {
		this.statusBtn = false;
		if (this.timeOut) {
			clearTimeout(this.timeOut);
		}
		this.timeOut = setTimeout(() => {
			this.statusBtn = true;
		}, 1000);
		let a = JSON.stringify(object);
		if (object.scrollTop >= this.headerHeight - 90) {
			this.background.backgroundColor = 'rgba(245,245,245,1)';
		} else {
			this.background.backgroundColor = 'rgba(245,245,245,0)';
		}
	},
	computed: {
		isEmpty() {
			return this.entrustmentList.length === 0 ? true : false;
		}
	},
	filters: {
		filterStatus(v) {
			switch (v) {
				case 1:
					return '待发布';
				case 2:
					return '任务待审批';
				case 3:
					return '待接单';
				case 4:
					return '待寄样';
				case 5:
					return '建模中';
				case 6:
					return '建模待审批';
				case 7:
					return '待确认';
				case 8:
					return '已完成';
				// case 9:
				// 	return '待选款';
				// case 10:
				// 	return '已结束';
				default:
					return '';
			}
		}
	},
	methods: {
		// 适配吸顶tab高度
		setOffestTop() {
			let systemInfo = uni.getSystemInfoSync();
			let topPx = systemInfo.statusBarHeight + 44; // 顶部状态栏+沉浸式自定义顶部导航
			this.offsetTop = topPx / (uni.upx2px(topPx) / topPx); // px转rpx
		},
		DateYMD() {
			let year = new Date().getFullYear();
			let month = new Date().getMonth() + 1;
			let day = new Date().getDate();
			return `${year}-${month}-${day}`;
		},
		entrustmentPage() {
			this.dateTime = this.DateYMD();
			this.loadStatus = 'loading';
			let { current, size } = this.pages;
			this.$http(
				'modelingtask.selectModelingTaskPage',
				{
					materialName: this.value ? this.value : null,
					status: this.status,
					current: current,
					size: size
				},
				'加载中...'
			)
				.then(res => {
					let { code, data } = res;
					if (code === 200) {
						this.entrustmentList = this.entrustmentList.concat(data.modelingTaskPageVOPage.records) || [];
						this.total = data.modelingTaskPageVOPage.total || 0;
						this.exceptionNum = data.numberOfAbnormalities; // 异常数量
						this.abolishIds = data.numberOfSamplesToBeSent; // 待寄样数量
						this.overtimeOrderNum = data.overtimeOrderNum; // 超时订单
						this.quantityNum = data.quantityToBeConfirmed; // 待确认数量
						this.loadStatus = this.entrustmentList.length < this.total ? 'loadmore' : 'nomore';
					}
					uni.stopPullDownRefresh();
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		change(index) {
			this.currentTab = index;
			this.status = this.list[index].status;
			this.entrustmentFun();
		},
		entrustmentFun() {
			this.pages.current = 1;
			this.entrustmentList = [];
			this.entrustmentPage();
		},
		// 查看详情
		detaileCli(item) {
			this.$Router.push('/pages/modeling/addItem?id=' + item.id);
		},
		// 模态框点击确定按钮
		confirm() {
			// this.delEntrustment();
			this.$http('modeling.reminders', { id: this.id }).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.$refs.uToast.show({
						title: '操作成功'
					});
					this.entrustmentFun();
				} else {
					this.$refs.uToast.show({
						title: '操作失败'
					});
				}
			});
		},
		// 点击搜索按钮
		searchCli() {
			this.$Router.push('/pages/home/components/search?state=1');
			this.searchFlag = false;
		},
		// 催单
		reminder(id) {
			this.id = id;
			this.modal.show = true;
			this.modal.title = '催单';
			this.modal.content = '提示对方以超过截止日期';
		},
		// 编辑  拆单
		dateilEnt(item, val) {
			if (val === 'edit') {
				this.$Router.push(`/pages/modeling/addItem?id=${item.id}`);
			} else if (val === 'item') {
				this.$Router.push(`/pages/modeling/item?id=${item.id}`);
			}  else {
				this.$Router.push('/pages/modeling/addItem');
			}
		}
	}
};
</script>
<style>
.color_AF8D66 {
	color: #af8d66;
}
.color_FA5353 {
	color: #fa5353;
}
.bg-fff {
	background: #fff;
}
.color_00004 {
	color: rgba(0, 0, 0, 0.4);
}
.dis_flex {
	display: flex;
}
</style>
<style lang="scss" scoped>
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.l_r_t_b {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.custom-style {
	color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	@include vue-flex;
	&-btn {
		overflow: hidden;
	}
	&-round-circle {
		border-radius: 100rpx;
	}
	.custom-style-left {
		// width: 240rpx;
		flex: 1;
		background: #d6d6d6;
		text-align: center;
	}
	.custom-style-right {
		flex: 1;
		background: rgba(0, 0, 0, 0.8);
		text-align: center;
	}
	.save {
		font-size: 34rpx;
		color: #000000;
	}
	.submit {
		font-weight: 500;
		font-size: 34rpx;
		.title {
		}
		.desc {
			font-size: 20rpx;
			.color {
				color: #dda973;
			}
		}
	}
}
.custom-style {
	color: #fff;
	background: #000;
}
.footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 998;
	background: #fff;
	box-shadow: 0px -4rpx 6rpx 0px rgba(178, 182, 214, 0.1);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.footer-btn {
		padding: 20rpx 60rpx;
	}
}
.bg_img {
	width: 100%;
	background: url(@/static/images/home/entrustment@2x.png) no-repeat;
	background-size: 100% 100%;
}
.content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
}
.entrus_sum {
	height: 164rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.8);
	line-height: 1.5;
}
.bd_rad {
	border-radius: 10rpx 10rpx 0 0;
	overflow: hidden;
}
.bd_rad1 {
	border-radius: 10rpx;
	overflow: hidden;
}
.ov_hid{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.entrus_list_title {
	flex: 1;
	&::before {
		content: '';
		display: inline-block;
		width: 8rpx;
		height: 32rpx;
		background: #af8d66;
		border-radius: 6rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
}
.btn_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30rpx;
}
.btn {
	width: 160rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	border: 1px solid #333333;
	border-radius: 44rpx;
	display: inline-block;
}
.split_line {
	height: 70rpx;
	line-height: 70rpx;
	width: 1rpx;
	background: rgba(68, 53, 37, 0.2);
}
.bd_split_line {
	width: 100%;
	border-top: 1px solid #f6f6f6;
	padding: 0 20rpx;
	position: relative;
	&::before {
		content: ' ';
		position: absolute;
		left: -45rpx;
		top: -15rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		background: #f6f6f6;
		border-radius: 100rpx;
	}
	&::after {
		content: ' ';
		position: absolute;
		right: -45rpx;
		top: -15rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		background: #f6f6f6;
		border-radius: 100rpx;
	}
}
</style>
