<template>
	<view class="g-components-chat-job"
	>
			<view :class="sanimate ? 'start_animate' : 'h420'">
				<view class="h_def_min" 
						  :class="'h_' + propsItem.isToggle + '_' + alljob.length"
							v-if="alljob.length < 5"
				>
					<view class="g_pl_0 g_pr_0">
						<view class="g_pt_12 g_pb_12 item" style="border-bottom: 1px solid #f3f3f3"
							v-for="(jtem, jndex) in alljob" :key="jndex"
							@click="goDetail(jtem)"
						>
							<view class="m-top g_flex_row_between">
								<view class="g_flex_none g_mr_8 g_w_48 g_h_48 g_flex_c g_position_rela"
									style="overflow: hidden">
									<image
										:src="jtem.logo ? jtem.logo : 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'"
										class="g_w_48" mode="widthFix"></image>
								</view>
								<view class="g_flex_1 g_flex_column_between">
									<view class="g_flex_1 g_flex_row_between">
										<view class="g_flex_1 g_flex_column_start">
											<view class="g_ell_1 g_fs_18 g_fw_600"
												style="color: rgba(0, 0, 0, 0.85); max-width: 350rpx">{{ jtem.jobName }}</view>
										</view>
										<view class="g_flex_none g_ml_16 g_flex_column_start g_fs_16 g_c_f40 g_fw_600">
											<rich-text :nodes="jtem.cus_price" v-if="jtem.cus_price != '月薪'"></rich-text>
											<view v-else>{{ jtem.monthlyPay }}</view>
										</view>
									</view>
									<view class="g_flex_none g_flex_row_between">
										<view class="g_flex_none g_flex_row_start g_fs_14" style="color: rgba(0, 0, 0, 0.45)">
											<view class="g_ell_1" style="max-width: 124px" hover-class="none" hover-stop-propagation="false">
												{{ jtem.district }}
											</view>
											{{ jtem.age }}
										</view>
									</view>
								</view> 
							</view>
							<view class="m-bottom g_flex_row_between g_mt_8">
								<view class="g_flex_none g_mr_8 g_w_53">
									<view class="collect g_flex_row_center" :class="jtem.collected == 0 ? '' : 'collectred'"
										style="width: 52px" hover-stop-propagation>
										<view class="g_flex_column_center g_h_22">
											<icon class="iconfont icon-shoucang icon 0" style="color: #888"
												v-if="jtem.collected == 0"></icon>
											<icon class="iconfont icon-yishoucang g_c_f40 icon 1" style v-else></icon>
										</view>
										<view class="g_flex_column_center g_h_22">
											<text class="f10" :class="jtem.collected == 0 ? 'g_c_8' : 'g_c_f40'"
												style="margin-left: 2px;height: 22px;line-height: 22px;">
												{{ jtem.collected == 0 ? "收藏" : "已收藏" }}
											</text>
										</view>
									</view>
								</view>
								<view class="g_flex_1 g_flex_row_between">
									<view class="g_flex_1 g_flex_column_center">
										<view class="g_flex_row_start_none">
											<view class="label_btn" v-for="(itm, inx) in jtem.jobSpecialLabelNameArray" :key="inx">{{ itm }}</view>
										</view>
									</view>
									<view class="g_flex_none g_flex_column_center g_fs_13" style="color: rgba(0, 0, 0, 0.45);">
										<!-- 报名{{ jtem.id % 8 == 0 ? "200+" : (jtem.id % 8) * 100 + "+" }} -->
										{{jtem._time}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="h_def_max"
						  :class="'h_' + propsItem.isToggle + '_' + alljob.length"
							v-if="alljob.length >= 5"
				>
					<view class="g_pl_0 g_pr_0">
						<view class="g_pt_12 g_pb_12 item" style="border-bottom: 1px solid #f3f3f3"
							v-for="(jtem, jndex) in alljob" :key="jndex"
							@click="goDetail(jtem)"
						>
							<view class="m-top g_flex_row_between">
								<view class="g_flex_none g_mr_8 g_w_48 g_h_48 g_flex_c g_position_rela"
									style="overflow: hidden">
									<image
										:src="jtem.logo ? jtem.logo : 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'"
										class="g_w_48" mode="widthFix"></image>
								</view>
								<view class="g_flex_1 g_flex_column_between">
									<view class="g_flex_1 g_flex_row_between">
										<view class="g_flex_1 g_flex_column_start">
											<view class="g_ell_1 g_fs_18 g_fw_600"
												style="color: rgba(0, 0, 0, 0.85); max-width: 350rpx">{{ jtem.jobName }}</view>
										</view>
										<view class="g_flex_none g_ml_16 g_flex_column_start g_fs_16 g_c_f40 g_fw_600">
											<rich-text :nodes="jtem.cus_price" v-if="jtem.cus_price != '月薪'"></rich-text>
											<view v-else>{{ jtem.monthlyPay }}</view>
										</view>
									</view>
									<view class="g_flex_none g_flex_row_between">
										<view class="g_flex_none g_flex_row_start g_fs_14" style="color: rgba(0, 0, 0, 0.45)">
											<view class="g_ell_1" style="max-width: 124px" hover-class="none" hover-stop-propagation="false">
												{{ jtem.district }}
											</view>
											{{ jtem.age }}
										</view>
									</view>
								</view> 
							</view>
							<view class="m-bottom g_flex_row_between g_mt_8">
								<view class="g_flex_none g_mr_8 g_w_53">
									<view class="collect g_flex_row_center" :class="jtem.collected == 0 ? '' : 'collectred'"
										style="width: 52px" hover-stop-propagation>
										<view class="g_flex_column_center g_h_22">
											<icon class="iconfont icon-shoucang icon 0" style="color: #888"
												v-if="jtem.collected == 0"></icon>
											<icon class="iconfont icon-yishoucang g_c_f40 icon 1" style v-else></icon>
										</view>
										<view class="g_flex_column_center g_h_22">
											<text class="f10" :class="jtem.collected == 0 ? 'g_c_8' : 'g_c_f40'"
												style="margin-left: 2px;height: 22px;line-height: 22px;">
												{{ jtem.collected == 0 ? "收藏" : "已收藏" }}
											</text>
										</view>
									</view>
								</view>
								<view class="g_flex_1 g_flex_row_between">
									<view class="g_flex_1 g_flex_column_center">
										<view class="g_flex_row_start_none">
											<view class="label_btn" v-for="(itm, inx) in jtem.jobSpecialLabelNameArray" :key="inx">{{ itm }}</view>
										</view>
									</view>
									<view class="g_flex_none g_flex_column_center g_fs_13" style="color: rgba(0, 0, 0, 0.45);">
										<!-- 报名{{ jtem.id % 8 == 0 ? "200+" : (jtem.id % 8) * 100 + "+" }} -->
										{{jtem._time}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="g_pt_12 g_pb_0 g_flex_row_center" @click="handleUpdateToggle(cusItem)"
							v-if="alljob.length > 4"
				>
					<u-icon :name="propsItem.isToggle ? 'arrow-up' : 'arrow-down'"></u-icon>
				</view>
				<view class="g_pt_12 g_pb_12" v-else></view>
			</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				alljob:[],
				sanimate:false,
				propsItem:{}
			}
		},
		props:{
			cusAllJob: {
				type: Array,
				default: () => {
					return [];
				},
			},
			cusItem:{
				type: Object,
				default: () => {
					return {};
				},
			}
		},
		watch:{
			propsItem(val){
				if(val && val.length > 4){
					this.propsItem.isToggle = true
				}else{
					this.propsItem.isToggle = false
				}
			}
		},
		created() {
			this.alljob = this.cusAllJob;
			this.propsItem = this.cusItem;
		},
		methods:{
			handleUpdateToggle() {
				let that = this;
				if(that.alljob && that.alljob.length > 4){
					that.sanimate = true;
					that.$forceUpdate();
					that.propsItem.isToggle = !that.propsItem.isToggle;
					that.$emit('exportToggle')
				}
			},
			goDetail($item){
				let that = this;
				console.log("前往详情页", $item);
				if (uni.getStorageSync("apply-token")) {
					that.isLogin = true;
				} else {
					that.isLogin = false;
				}
				
				if (that.isLogin) {
					uni.navigateTo({
						url: "/root/detail/work?id=" + $item.id,
					});
				} else {
					uni.showModal({
						title: "登录提示",
						content: "该页面需要登录才能查看,是否登录",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index",
								});
							} else {
							}
						},
					});
				}
			}
		}
	}
</script>

<style lang="less">
	.g-components-chat-job{
		.label_btn {
			display: inline-block;
			height: 21px;
			box-sizing: border-box;
			font-size: 12px;
			font-weight: 400;
			color: #666;
			background: #f1f1f1;
			border-radius: 2px;
			padding: 0 4px 0px;
			line-height: 20px;
			margin-right: 6px;
			margin-bottom: 0px;
			position: relative;
			top: 1px;
		}
		
		.b_btn {
			width: 72px;
			height: 24px;
			background-color: #ff4400;
			font-size: 14px;
			border-radius: 99px;
			line-height: 24px;
			color: #fff;
			text-align: center;
		}
		
		.collect {
			border: 1px solid rgb(236, 235, 235);
			border-radius: 2px;
			height: 22px;
			box-sizing: border-box;
			text-align: center;
			margin: 0;
			padding: 0px;
			background-color: #fff;
			line-height: 20px;
			width: 52px;
			margin-top: 2px;
		
			.icon {
				font-size: 10px;
				// height: 22px;
				line-height: 38px;
			}
		
			.f10 {
				font-size: 10px !important;
			}
		
			.lh12 {
				line-height: 12px;
			}
		}
		
		.collectred {
			background: #ffeee9;
			color: #ff4400;
			border: 1rpx solid #ff4400;
		}
		
		.r-obj {
			width: 40px;
			background-color: #ff4400;
			position: absolute;
			right: 0;
			top: 4px;
			border-radius: 2px 0 0 2px;
			color: #fff;
			font-size: 12px;
			zoom: 0.85;
			padding: 2px 0px;
			text-align: center;
		}
	
	}
	.h_def_min{
		max-height: 420px;
		overflow: hidden;
	}
	.h_def_max{
		height: 420px;
		overflow: hidden;
	}
	.h420{
		max-height: 420px;
	}
	.start_animate{
		.max-height{
			max-height:auto;
		}
		.h_false_5{
			animation-name: heightFalse5;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
		.h_true_5{
			animation-name: heightTrue5;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
		
		.h_false_6{
			animation-name: heightFalse6;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
		.h_true_6{
			animation-name: heightTrue6;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
		
		.h_false_7{
			animation-name: heightFalse7;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
		.h_true_7{
			animation-name: heightTrue7;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
		
		.h_false_8{
			animation-name: heightFalse8;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
		.h_true_8{
			animation-name: heightTrue8;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			overflow: hidden;
		}
	}
	
	@keyframes heightTrue5 {
	  0% {
	    height: 420px;
	  }
	  100% {
	    height: 525px;
	  }
	}
	@keyframes heightFalse5 {
	  0% {
	    height: 525px;
	  }
	  100% {
	    height: 420px;
	  }
	}
	
	@keyframes heightTrue6 {
	  0% {
	    height: 420px;
	  }
	  100% {
	    height: 630px;
	  }
	}
	@keyframes heightFalse6 {
	  0% {
	    height: 630px;
	  }
	  100% {
	    height: 420px;
	  }
	}
	
	@keyframes heightTrue7 {
	  0% {
	    height: 420px;
	  }
	  100% {
	    height: 735px;
	  }
	}
	@keyframes heightFalse7 {
	  0% {
	    height: 735px;
	  }
	  100% {
	    height: 420px;
	  }
	}
	
	@keyframes heightTrue8 {
	  0% {
	    height: 420px;
	  }
	  100% {
	    height: 840px;
	  }
	}
	@keyframes heightFalse8 {
	  0% {
	    height: 840px;
	  }
	  100% {
	    height: 420px;
	  }
	}
</style>