<template>
	<view class="box">
		<scroll-view scroll-view class="container g_mt_16 g_radius_8" scroll-x="false" scroll-y="true" upper-threshold="50" lower-threshold="50" scroll-top="0" scroll-left="0" scroll-into-view scroll-with-animation="false" enable-back-to-top="false" bindscrolltoupper bindscrolltolower bindscroll>
			<view class="box" v-for="item in annunciateList" @click="editAnnunciate(item)" >
				<view class="subset" :class="index != 0 ? 'g_border_e_t' : ''">
					<view class="left">
						<view class="name" style="min-width: 148px">
							<view class="g_fs_16">{{ item.title }}</view>
						</view>
						<view class="tel g_c_6 g_fs_16">
							{{ (item.userName || "") + (item.tel || "") }}
							<i class="iconfont icon-gengduo11 g_fs_16 g_c_c g_ml_4"></i>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="g_fs_14 g_c_6 g_ml_10 g_mt_8 g_c_9" v-if="noData">您目前没有配置通告联系人，系统默认您为联系人。</view>
		<view class="preview">
			<!-- v-if="{{userInfo.noticeEndStr}}" -->
			<view class="title g_border_e_b g_fw_600 g_pl_10">预览</view>
			<view class="content">
				<view class v-if="userInfo.noticeEndStr" style="white-space: pre-line">{{ userInfo.noticeEndStr }}</view>
				<view class="g_fs_14 g_c_6" v-else>
					<!-- 您目前没有配置通告联系人，系统默认您为联系人。 -->
					<view class="g_mt_8 g_c_3 g_fw_500">{{ userInfo.agencyStatus == 1 ? (userInfo.noticeEndStr ? userInfo.noticeEndStr : "详情咨询：" + userInfo.tel) : "详情咨询：" + serviceInfo.userName + (serviceInfo.workPhone || "-") }}</view>
				</view>
			</view>
		</view>
		<view class="addMember g_mt_10 g_fw_600" hover-class="thover" @click="addContact">
			<view class="add"> <view class="iconfont icon-tianjia" style="display: inline-block" />添加联系人 </view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			globalData: getApp().globalData,
			userInfo: {}, // 登录人的信息
			serviceInfo: {},
			annunciateList: [],
			noData: false,
		};
	},
	created() {},
	onShow() {
		let that = this;
		setTimeout(() => {
			that.userInfo = uni.getStorageSync("apply-userinfo");
			that.getServiceInfo();
		}, 100);
	},

	methods: {
		/**
		 * 通告信息修改
		 *
		 *
		 */
		editAnnunciate(e) {
			console.log(e);
			wx.navigateTo({
				url: `/root/detail/addContact?info=${JSON.stringify(e)}`,
			});
		},
		addContact() {
			wx.navigateTo({
				url: `/root/detail/addContact`,
			});
		},
		getList() {
			let that = this;
			that.G.Get(that.api.get_contact_cfg, "", (res) => {
				console.log("res", res);
				if (res && res.ContactCfgs) {
					// console.log('ContactCfgs');
					if (res.ContactCfgs.length > 0) {
						res.ContactCfgs.forEach((item, index) => {
							item.index = index + 1;
						});
						that.annunciateList = res.ContactCfgs;
						that.noData = false;
					} else {
						that.annunciateList = [{ tel: that.userInfo.agencyStatus == 1 ? that.userInfo.tel : that.serviceInfo.workPhone ? that.serviceInfo.workPhone : "-", title: that.userInfo.agencyStatus == 1 ? (that.userInfo.noticeEndStr ? that.userInfo.noticeEndStr : "详情咨询") : "详情咨询", userName: that.userInfo.agencyStatus == 1 ? "" : that.serviceInfo.userName }];
						that.noData = true;
					}
				} else {
					that.annunciateList = [{ tel: that.userInfo.agencyStatus == 1 ? that.userInfo.tel : that.serviceInfo.workPhone ? that.serviceInfo.workPhone : "-", title: that.userInfo.agencyStatus == 1 ? (that.userInfo.noticeEndStr ? that.userInfo.noticeEndStr : "详情咨询") : "详情咨询", userName: that.userInfo.agencyStatus == 1 ? "" : that.serviceInfo.userName }];
					that.noData = true;
				}
			});
		},
		getServiceInfo() {
			let that = this;
			that.G.Get(that.api.login_out, {}, (res) => {
				console.log(res);
				that.serviceInfo = res;
				that.getList();
			});
		},
	},
};
</script>

<style lang="less">
page {
	background-color: #f5f5f5;
}
.box {
	overflow: hidden;
	padding: 0 10px;
}
.container {
	background-color: #fff;
}
.subset {
	display: flex;
	justify-content: space-between;
	/* padding: 16px 0px; */
	height: 56px;
	line-height: 56px;

	/* border-bottom: 1px solid #0000000f; */
	font-size: 14px;
	.name {
		display: flex;
		align-items: center;
		justify-content: start;
		/* width: 222px; */
		box-sizing: border-box;
		min-width: 100px;
		color: #333;
		.t-icon {
			width: 44px;
			height: 16px;
			background-repeat: no-repeat;
			margin-right: 24px;
		}
	}
	.tel {
		display: flex;
		/* align-items: center; */
		color: #666;
	}
	.edit,
	.delete {
		color: #666;
		text-decoration: underline;
	}
}
.left {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.preview {
	.title {
		padding-top: 32px;
		padding-bottom: 8px;
		color: #000;
		border-bottom-color: #ddd;
	}
	.content {
		padding: 8px 10px 0;
	}
}
.addMember {
	display: flex;
	justify-content: center;
	border-radius: 8px;
	height: 56px;
	line-height: 56px;
	padding: 0px;
	margin-top: 120px;
	color: #1890ff;
	background-color: #fff;
}
</style>
