<template>
	<view class="carrHeader" :style="[titleStyle]">
		<view class="carrHeaderBox">
			<view class="carrHeader-left">
				<view class="carrHeader-left-icon" @click="goBack">
					<u-icon name="arrow-left" size="38" color="#000"></u-icon>
				</view>
			</view>
			<view class="carrHeader-title">
				<slot>{{title?title:''}}</slot>
			</view>
			<view class="carrHeader-right row">
				<view class="carrHeader-S row items-center justify-center">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772246934795585.jpg"
						@click="goSearch" />
				</view>
				<view class="carrHeader-T row items-center justify-center">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247012340060.jpg"
						@click="showModal=true" />
				</view>
			</view>
		</view>
		<u-popup v-model="showModal" mode="bottom" length="50%" border-radius="50">
			<view style="padding: 0 20rpx;">
				<view class="AggregateTitle">订单类型</view>
				<view class="AggregateTypeBox row">
					<view class="AggregateType" v-for="(item,index) in orderTypeList" :key="index"
						:class="[params.OrderTypeStr==item.Id?'active':'']" @click="getTypeId(item)">
						<text>{{ item.Name }}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: ['title', 'params'],
		data() {
			return {
				titleStyle: {},
				orderTypeList: [{
						Id: '',
						Name: '所有订单'
					},
					{
						Id: '1,2,3',
						Name: '线路订单'
					},
					{
						Id: '16',
						Name: '机票订单'
					},
					{
						Id: '15',
						Name: '签证订单'
					},
					{
						Id: '8,9,10,11',
						Name: '酒店住宿'
					},
					{
						Id: '12,13,14',
						Name: '包车服务'
					},
					{
						Id: '4,5,6,7',
						Name: '景点门票'
					}
				],
				showModal: false,
				icons: [
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772246968492575.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247052998903.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247084971514.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247342163794.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247230118434.jpg',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638772247194112722.jpg',
				]
			}
		},
		watch: {
			params: {
				handler(newVal, oldVal) {

				},
				deep: true
			}
		},
		mounted() {
			// #ifdef MP-AG
			this.getEnumList()
			// #endif
			// #ifdef MP-DI
			if (this.params.OrderTypeStr) {
				let item = this.orderTypeList.find(x => x.Id == this.params.OrderTypeStr)
				this.$emit('getTitle', item.Name)
			}
			// #endif
		},
		methods: {
			getEnumList() {
				this.apipost("CarSingle_post_GetOrderTypeEnumList", {}, (res) => {
					if (res.resultCode == 1) {
						this.orderTypeList = []
						res.data.forEach(x => {
							if (x.Name == '团队') {
								x.Name = '线路'
							}
							if (x.Name != 'Jalan酒店') {
								let icon = ''
								if (x.Id == '1') icon = this.icons[1]
								if (x.Id == '2') icon = this.icons[0]
								if (x.Id == '3') icon = this.icons[3]
								if (x.Id == '4') icon = this.icons[5]
								if (x.Id == '5') icon = this.icons[4]
								if (x.Id == '6') icon = this.icons[2]
								let obj = {
									Id: x.Id,
									Name: x.Name + '订单',
									icon: icon
								}
								//酒店切换为道旅酒店
								if (obj.Id == '3') {
									obj.Id = '7';
								}
								this.orderTypeList.push(obj)
							}
						})
						this.orderTypeList.unshift({
							Id: '',
							Name: '所有订单'
						})
						setTimeout(() => {
							if (this.params.OrderTypeStr) {
								let item = this.orderTypeList.find(x => x.Id == this.params.OrderTypeStr)
								this.$emit('getTitle', item.Name)
							}
						}, 200)
					}
				}, (err) => {
					uni.showToast({
						title: err.message,
						icon: "none",
					});
				})
			},
			getTypeId(item) {
				this.$emit('change', item)
				this.showModal = false;
			},
			goSearch() {
				uni.navigateTo({
					url: `/pages/AggregateOrders/AggregateOrdersSearch`
				})
			},
			goBack() {
				uni.navigateBack({
					delta: -1
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");

	.AggregateTitle {
		padding: 40rpx 30rpx 40rpx 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: left;
	}

	.AggregateTypeBox {
		flex-wrap: wrap;
		padding: 0 15rpx;
	}

	.AggregateType {
		width: 33.33%;
		padding: 0 15rpx;
		margin-bottom: 30rpx;
	}

	.AggregateType text {
		display: block;
		line-height: 60rpx;
		background: #f5f5f5;
		border: 1rpx solid #E3E6D2;
		border-radius: 60rpx;
		text-align: center;
	}

	.AggregateType.active text {
		border: 1rpx solid #B99846;
		color: #B99846;
	}

	.carrHeader-title {
		position: relative;
		left: 60rpx;
		right: 0;
		text-align: left;
		font-size: 32rpx;
	}

	.carrHeader-left {
		position: absolute;
		left: 32rpx;
		bottom: 23rpx;
		z-index: 3;
	}

	.carrHeaderBox {
		width: 100%;
		height: 88rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.carrHeader {
		// padding-top: 85rpx;
	}

	.carrHeader-right {
		padding-right: 200rpx;
		display: flex;
	}

	.carrHeader-right img {
		width: 35rpx;
		height: 35rpx;
	}

	.carrHeader-S {
		width: 63rpx;
		height: 63rpx;
		margin-right: 20rpx;
	}

	.carrHeader-T {
		width: 63rpx;
		height: 63rpx;
		border-radius: 50%;
		border: 1px solid #CFC089;
		margin-right: 20rpx;
	}
</style>