<template>

	<view class="work-item" @click="$emit('click', item)">
		<view class="top">
			<view class="hire">
				<view class="Position">
					{{ item.title }}
				</view>
			</view>
			<view class="index">
				<view class="Salary">
					<text v-if="item.minPrice">{{item.minPrice}}</text>
					<!-- - -->
					<!-- <text v-if="item.maxPrice">{{item.maxPrice}}元</text> -->
				</view>
				<!-- <view class="gang"
				v-if="item.school">
					|
				</view> -->
				<!-- <view class="Cashregister"
				v-if="item.school">
					{{item.school}}
				</view> -->
				<view class="gang"
				v-if="item.workYear">
					|
				</view>
				<view class="Cashregister"
				v-if="item.workYear">
					{{item.workYear}}
				</view>
				
				<template
				v-for="(t, i) in item.iconText && item.iconText.split(',')">
					<view class="gang">
						|
					</view>
					<view class="Cashregister">
						{{t}}
					</view>
				</template>
				
			</view>
			<addressSpot
			:address="item.address"
			:latitude="item.latitude"
			:longitude="item.longitude"
			/>
			<view class="address">
				<view class="shop">
					{{ item.company }}
				</view>
				<view class="authentication"
				v-if="item.isCardOpen">
					<!-- 已认证 -->
					{{ item.isCardOpen }}
				</view>
			</view>
			<view class="bottom">
				<view class="festival"
				v-if="item.iconTitle">
					<!-- 节假日福利 -->
					{{ item.iconTitle }}
				</view>
				<!-- <view class="Apply"
				@click.stop="callPhone">
					应聘
				</view> -->
				
				<callPhone
				style="margin-left: auto;"
				:phone="item.userPhone" 
				type="2"
				:phoneTitle="item.title"
				:pid="item.id"
				title="应聘"/>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: {}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.item.userPhone,
					success() {
						console.log('安卓拨打成功');
					},
					fail() {
						console.log('安卓拨打失败');
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.work-item {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 6rpx 6rpx #00000011;
		margin: 24rpx;
		position: relative;
	}

	.hire {
		display: flex;
		align-items: center;
		margin: 10rpx 0rpx;
	}

	.index {
		display: flex;
		flex-wrap: wrap;
		.Salary {
			color: red;
		}

		.gang {
			margin: 0rpx 25rpx 0rpx 25rpx;
			color: $uni-color;
		}

		.Cashregister {
			color: #888;
		}

	}

	.address {
		display: flex;
		margin-top: 10rpx;
		color: #fff;
		

		.shop {
			color: #888;
		}

		.authentication {
			background-color: $uni-color;
			margin-left: 10rpx;
			padding: 5rpx 10rpx;
			font-size: 25rpx;
			flex-shrink: 0;
			border-radius: 10rpx;
		}
	}

	.bottom {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;
		align-items: center;

		.festival {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: white;
			color: $uni-color;
			border: 1px solid $uni-color;
			padding: 5rpx 10rpx;
			border-radius: 10rpx;
			font-size: 23rpx;
		}

		.Apply {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 30rpx;
			background-color: $uni-color;
			color: #fff;
			border-radius: 10rpx;
			margin-left: auto;
		}
	}
</style>