<template>
	<!-- 款式委托 -->
	<view class="">
		<view id="header">
			<u-navbar :is-back="true" :border-bottom="false" :background="background" title-color="#000" title="款式委托">
				<template v-slot:right>
					<view class="u-m-r-24"><u-icon name="search" size="38"></u-icon></view>
				</template>
			</u-navbar>
			<view class="bg_img"></view>
			<view class="" style="position: relative;">
				<!-- 总数 -->
				<view class=" u-m-b-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 offset-top="88" :enable="enable" class="bd_rad" style="background: #fff;">
					<u-tabs :list="list" font-size="28" :show-bar="false" active-color="#AF8D66" :current="current" @change="change"></u-tabs>
				</u-sticky>
			</view>
		</view>
		<view class="content" :style="{ 'margin-bottom': footerHeight + 'px', top: headerHeight + 'px' }">
			<!-- list -->
			<view class="u-m-t-20 u-m-l-30 u-m-r-30 u-m-b-20">
				<!-- v-for -->
				<view class="u-m-b-20 posi_rela bd_rad1 u-p-30" 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">{{ item.materialName }}</view>
						<view class="u-font-28">{{ item.status | filterStatus }}</view>
					</view>
					<view class="dis_flex">
						<image style="width: 160rpx;height:160rpx;" :src="`${item.fileCode}`" mode=""></image>
						<view class="u-m-l-20">
							<view class="u-m-b-10">
								<span class="color_00004">发布日期</span>
								<span class="u-m-l-20">{{ item.releaseDate }}</span>
							</view>
							<view class="">
								<span class="color_00004">截止日期</span>
								<span class="u-m-l-20">{{ item.expirationDate }}</span>
							</view>
						</view>
					</view>
					<view class="u-m-t-30 bd_split_line"></view>
					<view class="text-right">
						<view v-if="item.status == 7" class="u-m-t-30 u-m-l-10 btn">寄样</view>
						<view v-if="item.status == 6" class="u-m-t-30 u-m-l-10 btn">撤回</view>
						<view v-if="item.status == 4" @click="removeCli(item)" class="u-m-t-30 u-m-l-10 btn">删除</view>
						<view v-if="item.status == 4" @click="dateilEnt(item, '编辑')" class="u-m-t-30 u-m-l-10 btn">编辑</view>
						<view v-if="item.status == 5" @click="cancelCli(item)" class="u-m-t-30 u-m-l-10 btn">取消</view>
						<view v-if="item.status == 3 || item.status == 9" class="u-m-t-30 u-m-l-10 btn">选款</view>
						<view v-if="item.status == 2" class="u-m-t-30 u-m-l-10 btn">催单</view>
						<view v-if="item.status == 1 || item.status == 5 || item.status == 6" @click="dateilEnt(item, '拆单')" class="u-m-t-30 u-m-l-10 btn">拆单</view>
					</view>
				</view>
			</view>
		</view>
		<!--底部按钮-->
		<view v-if="statusBtn" class="footer" id="footer">
			<view class="footer-btn">
				<view class="custom-style-round-circle custom-style-btn custom-style">
					<view class="custom-style-right" @click="dateilEnt"><view class="title">新增委托</view></view>
				</view>
			</view>
		</view>
		<u-modal v-model="modal.show" :show-cancel-button="true" :content="modal.title" @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 {
			enable: true,
			statusBtn: true,
			timeOut: null,
			background: { backgroundColor: 'rgba(245,245,245,0)' },
			modal: {
				show: false,
				title: ''
			},
			quantityNum: 0,
			exceptionNum: 0,
			abolishIds: 0,
			pages: {
				materialName: '',
				size: 5
			},
			entrustmentId: '',
			current: 0,
			entrustmentList: [],
			total: 0,
			list: [
				{
					name: '全部'
				},
				{
					name: '异常'
				},
				{
					name: '待发布'
				},
				{
					name: '待接单'
				},
				{
					name: '已接单'
				},
				{
					name: '已寄样'
				},
				{
					name: '待选款'
				},
				{
					name: '已结束'
				}
			]
		};
	},
	onLoad() {
		this.entrustmentPage();
		this.toBeSelectedQuantity();
		this.orderTicketExceptionNum();
		this.noSampleOrder();
	},
	onShow() {
		this.enable = true;
	},
	onHide() {
		this.enable = false;
	},
	// 上拉加载更多
	onReachBottom() {
		if (this.total > this.entrustmentList.length) {
			this.pages.size = this.pages.size + 5;
			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) {
			this.background.backgroundColor = 'rgba(245,245,245,1)';
		} else {
			this.background.backgroundColor = 'rgba(245,245,245,0)';
		}
	},
	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: {
		// 选款总数
		toBeSelectedQuantity() {
			this.$http('plm.toBeSelectedQuantity', {}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.quantityNum = data;
				}
			});
		},
		// 异常总数
		orderTicketExceptionNum() {
			this.$http('plm.orderTicketExceptionNum', {}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.exceptionNum = data;
				}
			});
		},
		// 寄样单总数
		noSampleOrder() {
			this.$http('orderTicket.noSampleOrder', {}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.abolishIds = data.length;
				}
			});
		},
		entrustmentPage() {
			let { materialName, size } = this.pages;
			this.$http('orderTicket.entrustmentPage', {
				materialName: materialName ? materialName : null,
				status: this.current,
				size: size
			}).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.entrustmentList = data.data;
					this.total = data.total;
				}
			});
		},
		change(index) {
			this.current = index;
			this.pages.size = 5;
			this.entrustmentPage();
		},
		// 删除操作
		removeCli(item) {
			this.modal.title = '删除后不可恢复，确定删除吗？';
			this.modal.show = true;
			this.entrustmentId = item.id;
		},
		confirm() {
			this.delEntrustment();
		},
		delEntrustment() {
			this.$http('orderTicket.del', [this.entrustmentId]).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.pages.size = 5;
					this.entrustmentList = [];
					this.entrustmentPage();
					this.$refs.uToast.show({
						title: '删除成功'
					});
				}
			});
		},
		// 取消发布
		cancelCli(item) {
			this.$http('orderTicket.abolishByIds', [item.id]).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.pages.size = 5;
					this.entrustmentList = [];
					this.entrustmentPage();
					this.$refs.uToast.show({
						title: '取消成功'
					});
				}
			});
		},
		// 编辑  拆单
		dateilEnt(item, val) {
			if (val == '拆单') {
				this.$Router.push('/pages/designCommissioned/splitItem?id=' + item.id);
			} else if (val == '编辑') {
				this.$Router.push(`/pages/designCommissioned/addItem?id=${item.id}&status=1`);
			} else if (val == '选款') {
				// this.$Router.push(`/pages/designCommissioned/addItem?id=${item.id}&status=2`);
			} else if (val == '寄样') {
				this.$Router.push(`/pages/designCommissioned/addItem?id=${item.id}&status=3`);
			} else {
				this.$Router.push('/pages/designCommissioned/listSelectToAdd');
			}
		}
	}
};
</script>
<style>
.color_AF8D66 {
	color: #af8d66;
}
.color_FA5353 {
	color: #fa5353;
}
.color_00004 {
	color: rgba(0, 0, 0, 0.4);
}
.dis_flex {
	display: flex;
}
.posi_rela {
	position: relative;
}
</style>
<style lang="scss" scoped>
.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 {
	position: absolute;
	top: 0;
	width: 100%;
	height: 220px;
	background-image: url(../../static/images/home/entrustment@2x.png);
}
.content {
	position: absolute;
	top: 220rpx;
	width: 100%;
	// overflow-y: auto;
}
.entrus_sum {
	height: 164rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.8);
	margin: 15px;
	line-height: 1.5;
}
.bd_rad {
	border-radius: 10rpx 10rpx 0 0;
	overflow: hidden;
}
.bd_rad1 {
	border-radius: 10rpx;
	overflow: hidden;
}
.entrus_list_title {
	&::before {
		content: '';
		display: inline-block;
		width: 8rpx;
		height: 32rpx;
		background: #af8d66;
		border-radius: 6rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
}
.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;
	}
}

@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.custom-style {
	color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	@include vue-flex;
	&-btn {
		overflow: hidden;
	}
	&-round-circle {
		border-radius: 100rpx;
	}
	/*background: #000;*/
	.custom-style-left {
		width: 240rpx;
		background: #d6d6d6;
		text-align: center;
	}
	.custom-style-right {
		flex: 1;
		background: rgba(0, 0, 0, 0.8);
		text-align: center;
	}
}
</style>
