<template>
	<view>
		<!--导航栏 navbar-->
		<u-navbar title="委托详情" id="header" :border-bottom="false" :background="{ backgroundColor: 'whitesmoke' }"></u-navbar>
		<!--主体内容-->
		<view class="body u-p-30" :style="{ bottom: footerHeight + 'px', top: headerHeight + 'px' }">
			<view class="u-flex u-p-b-20">
				<view class="item-status">{{ this.statusList[this.detail.status] }}</view>
				<text class="item-status u-flex-1 text-right">截止日期: {{ this.detail.expirationDate }}</text>
			</view>
			<!-- TODO 服务商 待寄样状态下的  加判断条件 -->
			<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
				<view class="u-border-bottom u-l-height-44">委托建模服务商</view>
				<view class="u-flex u-m-t-18 u-m-b-8 align-start" v-for="item in serviceProvider">
					<view class="u-m-r-40 label">{{ item.props }}</view>
					<view class="u-flex-1 content">{{ item.value }}</view>
				</view>
				<view class="u-border-top u-m-t-20">
					<u-form labelPosition="left" :model="userInfo" :rules="rules" ref="form1">
						<u-form-item label="服务商" label-position='top'><u-input v-model="userInfo.name" /></u-form-item>
						<u-form-item label="快递单号" label-position='top' :border-bottom='false'><u-input v-model="userInfo.sex" /></u-form-item>
					</u-form>
				</view>
			</view>
			<!--面料信息-->
			<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
				<view class="u-border-bottom u-l-height-44">面料信息</view>
				<view class="u-flex u-m-t-18 u-m-b-8" v-for="item in fabricMess">
					<view class="u-m-r-40 label">{{ item.props }}</view>
					<view class="u-line-1 u-flex-1 content">{{ item.value }}</view>
				</view>
			</view>
			<!--面料颜色要求-->
			<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
				<view class="u-border-bottom u-l-height-44">委托建模信息</view>
				<view class="u-flex u-m-t-18 u-m-b-8" v-for="item in modeling">
					<view class="u-m-r-40 label">{{ item.props }}</view>
					<view class="u-line-1 u-flex-1 content">{{ item.value }}</view>
				</view>
			</view>
			<!--风格款数要求-->
			<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
				<view class="u-border-bottom u-l-height-44">指定面料颜色</view>
				<view class="u-flex u-m-t-18 u-m-b-8">
					<view class="u-m-r-40 label width_300">指定面料颜色数量</view>
					<view class="u-line-1 u-flex-1 content">{{ activeColorText }}种</view>
				</view>
				<view class="u-flex u-m-t-18 u-m-b-8 align-start">
					<view class="u-m-r-40 label width_300">指定面料颜色名称</view>
					<view class="u-flex-1 content">朱红色 | 朱红色 | 朱红色 | 朱红色 | 朱红色 | 朱红色</view>
				</view>
				<view class="u-flex u-m-t-18 u-m-b-8">
					<view class="u-m-r-40 label width_300">设计机构提供颜色数量</view>
					<view class="u-line-1 u-flex-1 content">{{ detail.colourQuantity }}种</view>
				</view>
				<view class="u-flex u-m-t-18 u-m-b-8">
					<view class="u-m-r-40 label width_300">设计机构提供颜色名称</view>
					<view class="u-flex-1 content">朱红色 | 朱红色 | 朱红色</view>
				</view>
			</view>
			<!-- TODO 服务商 完成状态下的  加判断条件 -->
			<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 ">
				<view class="u-border-bottom u-l-height-44">委托建模服务商</view>
				<view class="u-flex u-m-t-18 u-m-b-8 align-start" v-for="item in serviceProvider">
					<view class="u-m-r-40 label">{{ item.props }}</view>
					<view class="u-flex-1 content">{{ item.value }}</view>
				</view>
			</view>
		</view>

		<!--底部按钮-->
		<view class="footer" id="footer" v-if="footerShow">
			<view class="footer-btn">
				<!--待选款 显示选款按钮 状态9 -->
				<view class="custom-style-round-circle custom-style-btn custom-style" v-if="this.detail.status === 9">
					<view class="custom-style-right submit" @click="submitData">
						<view class="title">选款</view>
						<view class="desc">
							已完成数量:
							<text class="color">11</text>
						</view>
					</view>
				</view>
				<!--拆单 拆单按钮 状态 1 5 6 -->
				<view class="custom-style-round-circle custom-style-btn custom-style" v-if="this.detail.status === 1 || this.detail.status === 5 || this.detail.status === 6">
					<view class="custom-style-left save" @click="toBack">返回</view>
					<view class="custom-style-right submit" @click="toSplitItem">拆单</view>
				</view>
				<!--待发布 立即按钮 状态 4 -->
				<view class="custom-style-round-circle custom-style-btn custom-style" v-if="this.detail.status === 4">
					<view class="custom-style-left save" @click="toEditItem">编辑</view>
					<view class="custom-style-right submit" @click="submitData">立即发布</view>
				</view>
			</view>
		</view>
		<!--提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import dom from './mixins/dom';
import styleTree from './mixins/styleTree';
import HsTipTitle from '@/components/hs-tip-title/hs-tip-title';
import HsMaterialThumbnail from '@/components/hs-material-thumbnail/hs-material-thumbnail';
export default {
	name: 'index',
	components: { HsMaterialThumbnail, HsTipTitle },
	mixins: [dom, styleTree],
	data() {
		return {
			// 1-无人接单、2-延误、3-待定超过、4-待发布、5-审核中、6-待接单、7-已接单、8-已寄样、9-待选款、10-已结束
			// 拆单 [无人接单 1、]
			// 延误 [延误 2]
			// 选款 [待定超过 3]
			// 撤回 编辑 [待发布 4]
			// 取消 拆单 [审核中 5]
			// 撤回 拆单 [待接单 6]
			// 寄样    已接单 7
			// 没有按钮 已寄样 8
			// 选款 待选款 9
			// 没有按钮 已结束 10
			statusList: ['', '无人接单', '延误', '待定超过', '待发布', '审核中', '待接单', '已接单', '已寄样', '待选款', '已结束'],
			userInfo: {
				name: 'uView UI',
				sex: ''
			},
			rules: {
				name: { required: true, message: '请选择快递商', trigger: ['blur', 'change'] },
				sex: { required: true, message: '请填写快递单号', trigger: ['blur', 'change'] }
			},
			timePickerShow: false,
			brandSelectShow: false,
			colorPickerShow: false,
			modal: {
				show: false,
				content: '确认删除?'
			},
			fabricMess: [
				{
					props: '面料名称',
					value: 'name'
				},
				{
					props: '建模品类',
					value: 'name'
				},
				{
					props: '面料门幅',
					value: 'name'
				},
				{
					props: '面料成分',
					value: 'name'
				},
				{
					props: '面料图片',
					value: 'name',
					slot: true
				}
			],
			// 建模时间信息
			modeling: [
				{
					props: '创建时间',
					value: 'name'
				},
				{
					props: '发布时间',
					value: 'name'
				},
				{
					props: '截止日期',
					value: 'name'
				},
				{
					props: '项目价格',
					value: 'name'
				}
			],
			// 服务商信息
			serviceProvider: [
				{
					props: '服务商',
					value: 'name'
				},
				{
					props: '联系人',
					value: 'name'
				},
				{
					props: '联系电话',
					value: 'name'
				},
				{
					props: '寄样地址',
					value: 'name',
					slot: true
				},
				{
					props: '接单时间',
					value: 'name'
				},
				{
					props: '顺丰单号',
					value: 'name',
					slot: true
				}
			],
			activeIndex: -1,
			detail: {
				materialId: 1, // todo 主数据面料id
				fileCode: '', // 面料主图code
				colourQuantity: 0, //可用颜色数量
				designRequirementsDTOList: [
					// {
					//   "styleId": 1, //风格要求id
					//   "quantity": 20 //风格要求款数
					// }
				],
				status: 1,
				colourList: [], //选中颜色
				expirationDate: '', //截止日期
				referToBrand: '', // 参考品牌
				otherDescribe: '' //其他描述
			},
			brandSelectList: [], // 风格 tree
			colors: [], //颜色组
			colorDialog: {
				show: false,
				levels: [0],
				selectList: []
			},
			footerHeight: 0,
			headerHeight: 0
		};
	},
	computed: {
		item() {
			// console.log(this.detail)
			return {
				materialName: this.detail.mdmMaterialName,
				materialCategory: this.detail.mdmMaterialCategory,
				materialDoorWidth: this.detail.mdmMaterialClothWidth,
				materialElement: this.detail.mdmMaterialComponent
			};
		},
		footerShow() {
			let status = this.detail.status;
			return status !== 8 || status !== 10;
		},
		// 风格款数
		brandList() {
			return this.detail.designRequirementsDTOList.filter(item => {
				return item.isDeleted === false;
			});
		},
		// 总的颜色数据源
		colorTree() {
			function arr2Tree(data, id = 'colourGroup') {
				const newList = [],
					map = Array.from(
						new Set(
							data.map(item => {
								return item['colourGroup'];
							})
						)
					);
				for (let i = 0; i < data.length; i++) {
					let item = data[i],
						name = item[id],
						index = map.indexOf(name);
					if (newList[index]) {
						newList[index]['children'].push(item);
					} else {
						newList.push({
							colour: name,
							children: [item]
						});
					}
				}
				return newList;
			}

			return arr2Tree(this.colors);
		},
		// 当前页选择颜色显示的内容
		activeColorTree() {
			let { levels } = this.colorDialog;
			function filter(data, levels) {
				let active = [];
				function f(data, level, index) {
					let { children } = data[level[index]];
					if (index === level.length - 1) {
						active = children;
						return;
					} else {
						index++;
						f(children, level, index);
					}
				}
				if (data.length > 0) {
					f(data, levels, 0);
				}
				return active;
			}
			let data = filter([{ children: this.colorTree }] || [], levels);
			return data.map(item => {
				return {
					...item,
					...{
						selectLength: this.setLength(item, this.activeColorIds),
						selectText: this.setText(item, this.activeColorIds),
						checked:
							this.detail.colourList
								.filter(item => {
									return item.isDeleted === false;
								})
								.map($item => {
									return $item.mdmColourId;
								})
								.indexOf(item.mdmColourId) > -1
					}
				};
			});
		},
		// 选中的颜色id List
		activeColorIds() {
			return this.detail.colourList
				.filter(item => {
					return item.isDeleted === false;
				})
				.map(item => {
					return item.mdmColourId;
				});
		},
		// 选中的颜色id List
		activeColorText() {
			return this.detail.colourList
				.filter(item => {
					return item.isDeleted === false;
				})
				.map(item => {
					return item.colour;
				})
				.join('｜');
		},
		// 最小颜色长度
		minColorsLength() {
			return this.detail.colourList.length;
		},
		// 风格款数 总数
		total() {
			return this.detail.designRequirementsDTOList
				.filter(item => {
					return item.isDeleted !== true;
				})
				.reduce((total, currentValue) => {
					return total + currentValue.quantity;
				}, 0);
		}
	},
	async onLoad({ id }) {
		// 获取颜色组
		this.getColors();
		// 获取风格数据
		await this.getStyleTreeList();
		// 获取详情
		if (id) {
			this.getItemMsg(id);
		}
	},
	mounted() {
		this.uGetRect('#footer').then(res => {
			this.footerHeight = res.height;
		});
		this.uGetRect('#header').then(res => {
			this.headerHeight = res.height;
		});
	},
	methods: {
		filterStyleNameById(id) {
			/**
			 *  回填品类 显示 string => []
			 *  @param data
			 *  @param value
			 *  @return [Array]
			 * */
			function filterCategory(data, value) {
				let res = [];
				function filters(data, value, parent = []) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].id == value) {
							res = [].concat(parent, data[i]);
						} else {
							if (data[i].children && data[i].children.length > 0) {
								filters(data[i].children, value, parent.concat(data[i]));
							}
						}
					}
				}
				filters(data, value);
				return res;
			}
			return filterCategory(this.brandSelectList, id)
				.map(item => {
					return item.name;
				})
				.join('｜');
		},
		getItemMsg(id) {
			this.detail.id = id;
			this.$http('orderTicket.detail', id).then(res => {
				let { code, data } = res;
				if (code === 200) {
					if (Object.keys(data).length > 0) {
						this.detail = {
							designRequirementsDTOList: data.orderTicketStyleRequirementsVOList.map(item => {
								return {
									...item,
									name: this.filterStyleNameById(item.styleId)
								};
							}),
							colourList: data.orderTicketColourVOList.map(item => {
								return {
									...item,
									...{
										colour: item.mdmColourName
									}
								};
							}),
							id: data.id,
							materialId: data.mdmMaterialId,
							expirationDate: data.expirationDate,
							referToBrand: data.referToBrand,
							otherDescribe: data.otherDescribe,
							colourQuantity: data.colourQuantity,
							status: data.status,
							mdmMaterialName: data.mdmMaterialName,
							mdmMaterialCategory: data.mdmMaterialCategory,
							mdmMaterialClothWidth: data.mdmMaterialClothWidth,
							mdmMaterialComponent: data.mdmMaterialComponent
						};
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							callback: () => {
								this.toBack();
							}
						});
					}
				}
			});
		},
		getColors() {
			this.$http('colors.getColors').then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.colors = data.map(item => {
						let res = {
							...item,
							mdmColourId: item.id
						};
						delete res.id;
						return res;
					});
				}
			});
		},
		// !----
		// 返回
		toBack() {
			this.$Router.back();
		},
		// 取消发布
		cancel() {
			this.$http('orderTicket.abolishByIds', [this.detail.id]).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.$refs.uToast.show({
						title: '取消成功'
					});
					this.toBack();
				}
			});
		},
		// 删除
		toDel() {
			this.$http('orderTicket.del', [this.detail.id]).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.$refs.uToast.show({
						title: '删除成功'
					});
					this.toBack();
				}
			});
		},
		// 跳转到拆单
		toSplitItem() {
			this.$Router.push({
				path: '/pages/designCommissioned/splitItem',
				query: {
					id: this.detail.id
				}
			});
		},
		// 跳转到详情 编辑
		toEditItem() {
			this.$Router.push({
				path: '/pages/designCommissioned/addItem',
				query: {
					id: this.detail.id
				}
			});
		},
		// 跳转到选款
		toSelectItem() {},
		// ----!
		setLength(item, target) {
			if (item.children) {
				return item.children.filter($item => {
					return target.indexOf($item.mdmColourId) > -1;
				}).length;
			} else {
				return 0;
			}
		},
		setText(item, target) {
			if (item.children) {
				return item.children
					.filter($item => {
						return target.indexOf($item.mdmColourId) > -1;
					})
					.map($item => {
						return $item.colour;
					})
					.join(' | ');
			} else {
				return '';
			}
		},
		colorsReset() {
			this.detail.colourList = [];
		},
		colorsConfirm() {
			if (this.colorDialog.levels.length > 1) {
				this.colorDialogLevelPop();
			} else {
				this.colorDialog.show = false;
			}
		},
		// 层级选择
		treeClick(treeItem, index) {
			if (this.colorDialog.levels.length > 1) {
				let $list = this.detail.colourList;
				let $index = $list.findIndex($item => {
					return $item.mdmColourId === treeItem.mdmColourId;
				});

				if ($index > -1) {
					let item = $list[$index];
					if (item.id) {
						this.$set($list, $index, {
							...item,
							isDeleted: !item.isDeleted
						});
					} else {
						$list.splice($index, 1);
					}
				} else {
					this.detail.colourList.push({
						...treeItem,
						isDeleted: false
					});
				}
				this.detail.colourQuantity = this.detail.colourList.length;
			} else {
				this.colorDialog.levels.push(index);
			}
		},
		colorDialogLevelPop() {
			this.colorDialog.levels.pop();
		},

		addBrandList() {
			this.brandSelectShow = true;
		},
		// 风格款数新增
		brandSelectCallback(e) {
			this.detail.designRequirementsDTOList.push({
				quantity: 0,
				styleId: e[e.length - 1].value,
				isDeleted: false,
				name: e
					.map(item => {
						return item.label;
					})
					.join('｜')
			});
		},
		// 显示删除模态框
		showDelModal(item) {
			this.modal.show = true;
			this.activeIndex = item;
		},
		// 显示删除模态框
		modalConfirm() {
			this.delBrandRow();
		},
		delBrandRow() {
			let { id } = this.activeIndex;
			if (id) {
				let $data = this.detail.designRequirementsDTOList;
				let index = $data.findIndex(item => {
					return item === this.activeIndex;
				});
				this.$set($data, index, {
					...$data[index],
					isDeleted: true
				});
			} else {
				let index = this.brandList.findIndex(item => {
					return item === this.activeIndex;
				});
				if (index > -1) {
					this.detail.designRequirementsDTOList.splice(index, 1);
				}
			}
		},
		timePickerCallback(e) {
			let { day, month, year } = e;
			this.detail.expirationDate = [year, month, day].join('-');
		},
		submit(data) {
			let submitStatus = this.detail.id ? 'orderTicket.update' : 'orderTicket.save';
			this.$http(submitStatus, {
				...data,
				...this.detail
			}).then(res => {});
		},
		saveData() {
			this.submit({
				operationType: 1
			});
		},
		submitData() {
			this.submit({
				operationType: 2
			});
		}
	}
};
</script>

<style scoped lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.width_300 {
	width: 300rpx;
}
.label {
	color: rgba(0, 0, 0, 0.4);
	font-size: 28rpx;
	min-width: 140rpx;
}
.context {
	color: #000;
	font-size: 28rpx;
}
.u-l-height-32 {
	height: 64rpx;
	line-height: 64rpx;
}
.u-l-height-44 {
	height: 88rpx;
	line-height: 88rpx;
}
.u-m-l-75 {
	margin-left: 150rpx;
}
.u-m-l-53 {
	margin-left: 108rpx;
}
.del {
	color: #fa5353;
}
.bg-fff {
	background: #fff;
}
.body {
	background: #fafafa;
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow-y: auto;
}
.tree {
	@include vue-flex;
	flex-wrap: wrap;

	.tree-level {
		@include vue-flex;
		width: 100%;
		font-size: 32rpx;

		.active-text {
			color: #dda973;
		}
		.tree-level-text {
			flex: 1;
			overflow: hidden;
			.tree-level-text--selected {
				font-size: 28rpx;
				color: red;
			}
		}
	}
}
.brandList-tip {
	height: 88rpx;
	background: #fcfaf7;
	border: 1px solid rgba(68, 53, 37, 0.1);
	border-radius: 8rpx;
	line-height: 88rpx;
	padding-left: 30rpx;
}
.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;
	}
	.save {
		font-size: 34rpx;
		color: #000000;
	}
	.submit {
		font-weight: 500;
		font-size: 34rpx;
		//line-height: 100%;
		.title {
			//margin: 8rpx 0;
		}
		.desc {
			font-size: 20rpx;
			.color {
				color: #dda973;
			}
		}
	}
}
.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;
	}
}
</style>
