<template>
	<view>
		<view
			class="m-data g_ml_10 g_mr_10 g_radius_8"
			:style="{
				backgroundColor: cusBg ? cusBg : '#fff',
			}"
		>
			<view v-if="cusTitle" class="g_pl_16 g_pt_12 g_pb_12 g_fs_17 g_flex_row_between g_border_e_b" @click="titleNavigator">
				<view class="g_fw_600">
					{{ cusTitle }}
				</view>
				<view class="g_pr_12 g_flex_row_end flex_center">
					<view class="g_c_6 g_mr_4 g_ell_1" style="max-width: 180px" v-if="subhead">
						{{ subhead }}
					</view>
					<i v-if="titleNav" class="iconfont icon-gengduo11 g_c_c" style=""></i>
				</view>
			</view>
			<view class="g_flex_row_start u-skeleton">
				<view
					v-for="(item, index) in list"
					:key="index"
					:style="{
						width: 'calc(100% / ' + num + ')',
					}"
					@click="handleClick(item, index)"
					class=""
					:class="[border && (index + 1) % num != 0 ? 'g_border_e_r' : '', border && index < num ? 'g_border_e_b' : '', height < 38 ? 'g_pt_16' : 'g_pt_10']"
					hover-class="thover"
				>
					<!-- list.length < num -->
					<!-- 高度比较低的情况 。 -->
					<view :class="[`g_h_${height}`]" v-if="height < 38">
						<view class="g_flex_row_center g_fs_28 g_c_3" :class="item.num == '-' ? '' : 'g_fw_bold'" v-if="speed == 1">
							<view style="position: relative">
								<view v-if="cusType == 'num'" class="g_mb_16 g_fs_20">{{ item.num }}</view>
								<!-- style="overflow: hidden" -->
								<view v-if="cusType == 'image'" :class="[`g_h_${height - 4}`]" class="g_flex_column_center">
									<view class="" v-if="item.icon">
										<!-- iconType单色图标的判断 1是单色 -->
										<view class="iconfont g_fw_500" :class="[`icon-${item.icon}`, `g_fs_${height - 4}`]" :style="{ color: item.iconColor ? item.iconColor : '#333' }" v-if="item.iconType == 1"> </view>
										<view
											:class="[`g_h_${height - 4}`, `g_w_${height - 4}`, `t-icon-${item.icon}`, 't-icon']"
											style="background-repeat: no-repeat; background-position: 0px 1px; background-size: 95%"
											:style="{
												width: `${height - 4}px`,
												height: `${height - 4}px`,
											}"
											v-else
										></view>
									</view>
									<image v-else class="u-skeleton-fillet" :src="item.image" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }"></image>
									{{ item.image }}
								</view>
								<view v-if="item.tip" style="position: absolute; right: -10px; top: 0" class="g_w_6 g_h_6 g_radius_50 g_bg_f40"></view>
							</view>
						</view>
						<view v-if="speed == 0" class="g_flex_c g_h_28">
							<g-loading minHeight="0" text="empty" />
						</view>
					</view>
					<!-- 高度比较高的情况 。 -->
					<view class="g_h_48" v-else>
						<view class="g_flex_row_center g_fs_28 g_c_3 g_h_48" :class="item.num == '-' ? '' : 'g_fw_bold'" v-if="speed == 1">
							<view style="position: relative">
								<view v-if="cusType == 'num'">{{ item.num }}</view>
								<view v-if="cusType == 'image'" class="g_h_48 g_flex_column_center u-skeleton-fillet" style="overflow: hidden">
									<view class="" v-if="item.icon">
										<!-- iconType单色图标的判断 1是单色 -->
										<view class="iconfont g_fw_500" :class="[`icon-${item.icon}`, `g_fs_${height - 4}`]" :style="{ color: item.iconColor ? item.iconColor : '#333' }" v-if="item.iconType == 1"> </view>
										<view
											:class="[`g_h_${height - 4}`, `g_w_${height - 4}`, `t-icon-${item.icon}`, 't-icon']"
											style="background-repeat: no-repeat; background-position: 0px 1px; background-size: 95%"
											:style="{
												width: `${height - 4}px`,
												height: `${height - 4}px`,
											}"
											v-else
										></view>
									</view>
									<image :src="item.image" v-else class="" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }"></image>
								</view>
								<view v-if="item.tip" style="position: absolute; right: -10px; top: 0" class="g_w_6 g_h_6 g_radius_50 g_bg_f40"></view>
							</view>
						</view>
						<view v-if="speed == 0" class="g_flex_c g_h_48">
							<g-loading minHeight="0" text="empty" />
						</view>
					</view>
					<view class="g_flex_row_center g_fs_14 g_c_6 g_mt_2" :class="[`g_mb_${marginBottom}`]">{{ item.name }}</view>
				</view>
			</view>
			<view class="" v-if="bottomBox" @click="bottomNavigator">
				<view class="g_flex_row_center flex_center g_c_sub g_p_16" hover-class="none" hover-stop-propagation="false">
					<view class="icon-fadanhao-1 iconfont g_fs_18 g_mr_4"> </view>
					<view class="g_fs_17 g_fw_600">发布职位</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
	</view>
</template>

<script>
/* 职位，关注数展示卡片
 */
import gLoading from "@/components/loading.vue";
export default {
	components: {
		gLoading,
	},
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			svgBaseImg: this.G.store().svgBaseImg,
		};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		// 骨架屏的loading状态
		loading: {
			default: () => {
				return false;
			},
		},
		speed: {
			default: () => {
				return -1;
			},
		},
		num: {
			type: Number,
			default: () => {
				return 5;
			},
		},
		height: {
			type: Number,
			default: () => {
				return 22;
			},
		},
		cusBg: {
			default: "",
		},
		cusType: {
			default: "num",
		},
		cusTitle: {
			default: "",
		},
		titleNav: {
			default: "",
		},
		subhead: {
			default: "",
		},

		// 标签距离底部距离
		marginBottom: {
			default: 10,
		},
		border: {
			default: false,
		},
		bottomBox: {
			default: false,
		},
		bottomNav: {
			default: "",
		},
	},
	methods: {
		handleClick($item, $index) {
			this.$emit("clickItem", {
				item: $item,
				index: $index,
			});
		},
		titleNavigator() {
			if (this.titleNav) {
				this.$emit("clickItem", {
					item: { path: this.titleNav },
				});
			}
		},
		bottomNavigator() {
			if (this.titleNav) {
				this.$emit("clickItem", {
					item: { path: this.bottomNav },
				});
			}
		},
	},
};
</script>

<style></style>
