<template>
	<view class hover-class="none" :hover-stop-propagation="false">
		<view class="pr g_p_10">
			<view class="g_radius_8 g_bg_f g_mb_80">
				<div class="flex-1 g_p_12">
					<div class="g_fs_17 g_fw_600 g_c_3" style="min-width: 100px">
						{{ storeInfo.storeName || "-" }}
					</div>
				</div>
				<swiper v-if="storeInfo.imgList != ''" style="width: 100%; height: 200px; border-radius: 0px; overflow: hidden" :indicator-dots="true" indicator-color="rgba(0,0,0,.3)" :autoplay="true" :interval="5000" :circular="true">
					<swiper-item class="" item-id="" v-for="(item, index) in storeInfo.imgList" :key="index">
						<image show-menu-by-longpress :src="item" mode="aspectFill" style="width: 100%; height: 200px; display: block" class="db toppic"></image>
					</swiper-item>
				</swiper>
				<view style="padding: 16px 10px">
					<!-- <view class="g_fs_16 g_c_3 g_fw_600">关于我们</view> -->
					<!-- <view class="g_c_9 g_fs_16 g_mt_8" style="white-space: pre-line;">{{ storeInfo.desp || "对方还未介绍自己" }}</view> -->

					<view class="container1">
						<view class="content1 g_c_3" :class="{ expanded: isExpanded }" v-html="displayedContent"> </view>
						<!-- <view v-if="shouldShowExpandButton" class="expand-button1" @click="toggleExpand">{{ isExpanded ? '收起' : '展开' }}</view> -->
					</view>
				</view>
			</view> 

			<view class="g_bg_f g_mt_10 g_radius_8" v-if="false" style="padding: 8px 10px 16px">
				<view class="g_flex_row_between">
					<view class="flex-1 g_pr_20">
						<view class="g_fs_16 g_c_3 g_mt_6">
							{{ storeInfo.storeName || "-" }}
						</view>
						<view class="g_fs_14 g_c_9 g_mt_8" style="width: calc(100vw - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
							{{ storeInfo.address || "-" }}
						</view>
					</view>
					<view class="g_mr_12 g_mt_4 g_text_c" hover-class="thover" @tap="goMap">
						<image src="https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/daohang.svg" style="width: 28px; height: 28px"></image>
						<view class="g_fs_12 g_c_3 g_mt_2">导航</view>
					</view>
				</view>
			</view>

			<view class="servicebox g_mt_10 g_radius_8 g_flex_row_between flex_center" v-if="false" style="margin-bottom: 60px">
				<view class="serviceinfo g_flex_row_start" hover-class="none">
					<view class="g_mr_10">
						<image v-if="storeInfo.avatar" class="br_8" :src="storeInfo.avatar" mode="aspectFit|aspectFill|widthFix" :lazy-load="false"></image>
						<image v-else class="g_radius_8" src="https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/1shoudan/service.jpg" mode="aspectFit|aspectFill|widthFix" :lazy-load="false"></image>
					</view>
					<view class="servicenamebox">
						<view class="g_mb_2 g_fs_17 g_fw_600">{{ storeInfo.userName || "暂无联系人" }}</view>
						<view class="g_c_3 g_fs_16">
							<p class="f14">{{ storeInfo.phone || "暂无联系方式" }}</p>
						</view>
					</view>
				</view>
				<view class="g_text_c g_w_40 g_h_40 g_radius_20 g_flex_column_center" hover-class="none" :hover-stop-propagation="false" style="background-color: #e8fff8">
					<!-- @tap="makePhoneCall"  -->
					<a :href="`tel:${storeInfo.phone}`">
						<view class="iconfont icon-phone mr10 dib" hover-class="thover06" style="color: #3578f6"></view>
					</a>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
// const commonUtil = require("../../utils/commonUtil");
// pages/company/company/index.js
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			isExpanded: true,
			storeInfo: {
				imgList: "",
				desp: "",
				storeName: "",
				address: "",
				avatar: "",
				userName: "",
				phone: "",
			},
			storeId: "",
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		console.log(options.id);
		this.storeId = options.id;
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		this.getInfo();
		// this.checkContentHeight();
	},
	mounted() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},
	computed: {
		displayedContent() {
			const content = this.storeInfo.desp || "对方还未介绍自己";
			if (!this.isExpanded && content.length > 40) {
				return content.substring(0, 40) + "...";
			}
			return content;
		},
		shouldShowExpandButton() {
			const content = this.storeInfo.desp || "对方还未介绍自己";
			return content.length > 40;
		},
	},
	methods: {
		toggleExpand() {
			this.isExpanded = !this.isExpanded;
		},

		goMap() {
			console.log("123");
			let that = this;
			uni.openLocation({
				latitude: Number(that.storeInfo.lat),
				longitude: Number(that.storeInfo.lng),
				name: that.storeInfo.storeName,
				address: that.storeInfo.address,
				scale: 18,
			});
		},

		/**
		 * 获取企业信息
		 */
		getInfo() {
			let that = this;

			that.G.Get(that.api.company_detail + that.storeId, {}, (res) => {
				console.log(res);
				this.storeInfo = res;
				this.storeInfo.imgList = res.imgs.split(",");
				console.log(this.storeInfo.imgList);
			});
		},

		/**
		 * 拨打电话
		 */
		makePhoneCall() {
			var that = this;
			if (!that.storeInfo.phone) {
				uni.showToast({
					title: "暂无联系方式",
					icon: "none",
				});
				return;
			}
			uni.makePhoneCall({
				phoneNumber: that.storeInfo.phone,
			});
		},
	},
};
</script>
<style>
.container1 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content1 {
	max-height: 45px;
	margin-top: 8px;
	font-size: 16px;
	color: #333;
	/* 控制初始高度 */
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
	white-space: pre-line;
	width: 100%;
	padding-bottom: 40px;
}

.expanded {
	max-height: none;
	/* 展开后取消高度限制 */
}

.expand-button1 {
	text-align: center;
	margin-top: 8px;
	color: #999;
	/* cursor: pointer; */
}

page {
	position: relative;
	background-color: #f5f5f5;
}

.servicebox {
	padding: 10px;
	background-color: #fff;
}

.servicebox .serviceinfo image {
	width: 52px;
	height: 52px;
}

.servicebox .serviceBottom {
	height: 48px;
	line-height: 48px;
	width: 100%;
	justify-content: space-between;
}

.servicebox .serviceBottom > view {
	flex: 1;
	justify-content: space-between;
	padding: 0 10px 0 16px;
}

.icon-dianhua {
	position: relative;
	top: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--color-ysd-bg);
	color: var(--color-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	float: right;
}

.dhImg {
	width: 28px;
	height: 28px;
	margin-top: 40px;
}
</style>
