<template>
	<div class="g-components-wx">
		<div class="panel">
			<div class="m-fee" style="">
				<div class="g_flex_row_start g_c_f40" style="font-size: 1rem">
					<div class="fee-title">服务费：</div>
					<div v-if="info.feeObj.id != 6 && info.feeObj.id != 5">{{ (info.feeObj.id == 7 ? "" : info.feeObj.val) + info.feeObj.suffix }}</div>
					<div v-if="info.feeObj.id == 6">{{ "共" + info.feeObj.val + info.feeObj.suffix }}</div>
					<div v-if="info.feeObj.id == 5">{{ "工人收入" + info.feeObj.val + info.feeObj.suffix }}</div>
				</div>
				<div>
					<i class="iconfont icon-zhengyan1 g_c_f40"></i>
				</div>
			</div>
			<div class="show-box g_position_rela g_clear_scroll">
				<!-- 服务费 -->
				<!-- <div class="m-fee g_position_abso" style="right:.6rem;top:1.2rem">
          <div style="font-size:.7rem" class="fee-title">服务费</div>
          <div style="font-size:.7rem" v-if="info.feeObj.id != 6 && info.feeObj.id != 5">{{(info.feeObj.id == 7 ? '':info.feeObj.val) + info.feeObj.suffix}}</div>
          <div style="font-size:.7rem" v-if="info.feeObj.id == 6">{{'共' + info.feeObj.val + info.feeObj.suffix}}</div>
          <div style="font-size:.7rem" v-if="info.feeObj.id == 5">{{'工人收入' + info.feeObj.val + info.feeObj.suffix}}</div>
        </div> -->

				<!-- 顶部信息 -->
				<div class="m-title">
					<div class="g_flex_row_between">
						<div class="g_flex_1 g_ell_1 g_c_3 g_fw_600 name" :title="info.name">{{ info.name }}</div>
					</div>
				</div>
				<!-- 副标题信息 -->
				<div class="sub-info g_flex_row_start m-sub-title" style="margin-bottom: 0.4rem">
					<div class="g_flex_row_start" style="margin-right: 0.5rem">
						<!-- <div class="g_c_7 g_flex_column_center" style="margin-right: 0.15rem">
							<img src="../../../../src/assets/image/month.svg" style="width: 0.7rem; height: 0.7rem" />
						</div> -->
						<div class="cont g_flex_column_center g_c_f40 g_fw_500">
							<template v-if="info.salaryClassifyObj.id == 4 || info.salaryClassifyObj.id == 6">
								{{ info.salaryClassifyObj.str }}
							</template>
							<template v-else-if="info.salaryClassifyObj.id == 7"> {{ info.salaryClassifyValue || "-" }} 元/月 </template>
							<template v-else-if="info.salaryClassifyObj.id == 2 || info.salaryClassifyObj.id == 3 || info.salaryClassifyObj.id == 5"> {{ info.salaryClassifyObj.str || "-" }}{{ info.salaryClassifyValue || "-" }}{{ info.salaryClassifyObj.suffix || "-" }} </template>
							<template v-else> {{ info.salaryClassifyValue || "-" }} {{ info.salaryClassifyObj.suffix || "-" }} </template>
						</div>

						<!-- aa{{info.salaryClassifyValue}}{{info.salaryClassifyObj}}bb -->
					</div>
				</div>
				<!-- 副标题信息 -->
				<div class="sub-info g_flex_row_start m-sub-title" style="margin-bottom: 0.2rem">
					<div class="g_flex_row_start" style="margin-right: 0.5rem">
						<div class="g_c_7 g_flex_column_center">
							<EnvironmentOutlined class="g_c_7 icon" />
						</div>
						<div class="g_c_7 cont g_flex_column_center">{{ info.cityInfo.city == "undefined, undefined" ? "请选择企业地址" : info.cityInfo.city }}</div>
					</div>
					<div class="g_flex_row_start">
						<div class="g_c_7 g_flex_column_center">
							<TeamOutlined class="g_c_7 icon" />
						</div>
						<div class="g_c_7 cont g_flex_column_center">{{ info.otherInfo.sexAge }} 岁</div>
					</div>
				</div>

				<div class="sub-info g_flex_row_start m-sub-title" style="margin-bottom: 0.4rem">
					<div class="g_flex_row_start" style="margin-right: 0.5rem">
						<i class="iconfont icon-zhaopinqiye" style="font-size: 0.7rem; margin-right: 0.3rem"></i>
						<!-- <div class="g_c_7 g_flex_column_center" style="margin-right: 0.15rem">
							<img src="../../../../src/assets/image/month.svg" style="width: 0.7rem; height: 0.7rem" />
						</div> -->
						<div class="cont g_flex_column_center g_c_7 g_fw_500">
							{{ info.store || "请输入招聘企业" }}
						</div>

						<!-- aa{{info.salaryClassifyValue}}{{info.salaryClassifyObj}}bb -->
					</div>
				</div>
				<!-- 企业 -->
				<div class="boss-info g_flex_row_start">
					<div class="bom g_flex_row_start">
						<div class="logo g_flex_none g_flex_column_center">
							<img v-if="info.bossInfo.logo" :src="info.bossInfo.logo" class="img" />
							<img v-if="!info.bossInfo.logo" src="../../../assets/image/shareJob/nopicture.png" class="img" />
						</div>
						<div class="g_flex_column_center g_flex_1">
							<div class="g_ell_1 g_c_3 title" :title="info.bossInfo.title">{{ info.bossInfo.title }}</div>
						</div>
					</div>
				</div>
				<!-- 详情 -->
				<div class="m-desc">
					<!-- <div class="tip g_fs_18 g_c_3 g_flex_column_center">职位描述</div> -->
					<div class="g_c_7 desc" v-if="info.desc_yq == '-'">请输入职位描述</div>
					<div v-html="info.desc_yq || '-'" style="white-space: pre-line"  class="g_c_7 desc" v-else></div>
				</div>
				<!-- 轮播 -->
				<div class="m-swiper-box" style="padding-top: 0.8rem; border-top: 1px solid #f5f5f5">
					<div v-if="info.list.length == 0">
						<img src="../../../assets/image/shareJob/nopicture.png" class="empty-img" />
					</div>
					<div v-else class="g_flex_row_start_none" style="overflow: hidden">
						<div v-for="(item, index) in info.list" :key="index">
							<img :src="item" class="a-img" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineEmits, defineProps } from "vue";
import { TeamOutlined, EnvironmentOutlined } from "@ant-design/icons-vue";
import swiperPanel from "../image/swiperPicture.vue";

/* #################### 初始化事件 #################### */
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
const props = defineProps({
	info: {
		type: Object,
		default: () => {
			return {
				name: "-",
				minMonthlyPay: "-",
				maxMonthlyPay: "-",
				salaryClassify: "-",
				salaryClassifyValue: "-",
				cityInfo: {
					city: "-",
				},
				otherInfo: {
					sexAge: "-",
				},
				bossInfo: {
					logo: "",
					title: "-",
				},
				desc_yq: "-",
				list: [],
				feeObj: { str: "按小时", pre: "按时", suffix: "元/小时", val: 1 },
			};
		},
	},
});
watch(props, (val) => {});
const toGetPrice = (price) => {
	return commonJS.toGetPrice(price);
};
</script>

<style lang="less">
/* 基于375设计稿，比例换算公式：
	 * 1px ÷ 20 = 1rem;
	 */
.g-components-wx {
	.panel {
		// width: 375px;
		// height: 812px;
		position: relative;
		width: 320px;
		height: 690px;
		box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.15);
		border-radius: 30px;
		background-image: url("../../../assets/image/job/bg.png");
		background-repeat: no-repeat;
		background-size: 320px 690px;
		padding-top: 75px;
		.m-fee {
			position: absolute;
			display: flex;
			justify-content: space-between;
			padding: 0 1rem;
			top: 5rem;
			width: 100%;
			height: 4rem;
			align-items: center;
			background-color: #ffede6;
			border-top: 1px solid #ff4400;
			border-bottom: 1px solid #ff4400;
			.fee-title {
				// min-width: 4.5rem;
				// width: 100%;
			}
		}
		.show-box {
			padding: 0px 1rem 0;
			height: calc(100% - 65px);
			overflow-y: auto;
			padding-bottom: 1rem;
			margin-top: 4rem;
			// .m-fee {
			// 	min-width: 4rem;
			// 	padding: 0.125rem 0;
			// 	border-radius: 6px;
			// 	text-align: center;
			// 	background-color: #fff1ec;
			// 	color: #ff4400;
			// 	overflow: hidden;
			// 	.fee-title {
			// 		min-width: 4.5rem;
			// 		width: 100%;
			// 		color: #fff;
			// 		background-color: #ff4400;
			// 	}
			// }

			.m-title {
				padding: 1.2rem 0 0.5rem;
				.name {
					font-size: 1.2rem;
				}
				.price {
					font-size: 0.9rem;
					margin-left: 0.5rem;
				}
			}
			.sub-info {
				margin-bottom: 1.2rem;
				.icon {
					font-size: 0.7rem;
					margin-right: 0.2rem;
				}
				.cont {
					font-size: 0.7rem;
				}
			}
			.boss-info {
				background-color: rgba(0, 182, 102, 0.05);
				padding: 0.6rem 0.8rem;
				.img {
					width: 1.9rem;
					height: 1.9rem;
					border-radius: 50%;
				}
				.title {
					margin-left: 0.5rem;
					font-size: 0.7rem;
				}
			}
			.m-desc {
				margin-top: 1.2rem;
				.desc {
					font-size: 0.7rem;
					letter-spacing: 1;
					word-break: break-all;
				}
			}
			.m-swiper-box {
				margin-top: 0.8rem;
				.empty-img {
					width: 3rem;
					height: 3rem;
					border-radius: 6px;
				}
			}
		}
	}
	.a-img {
		width: 3.05rem;
		height: 3.05rem;
		border-radius: 0.2rem;
		margin-right: 0.55rem;
		margin-bottom: 0.8rem;
		&:nth-child(5) {
			margin-right: 0;
		}
	}
}
</style>
