<template>
	<view class="index">
		<com-navbar :homeShow="false" bgColor='#fff' title=" "
			:titleStyle="{fontSize: '36rpx' , color: '#000000'}"></com-navbar>
		<image class="index-img" :src="businessInfo.url" mode=""></image>
		<view class="index-cent">
			<!-- @click="handleCompanyDetail" -->
			<view class="index-cent-top">
				<view class="d-flex a-center j-sb" >
					<view class="index-cent-top-name">
						{{businessInfo.businessName}}
					</view>
					<view class="index-cent-top-score">{{businessInfo.score ? businessInfo.score : 0}}分</view>
				</view>
				<view class="tp tp-1 fx" @click="telPhone(businessInfo.phonenumber)">
					联系电话：{{businessInfo.phonenumber}}
					<image :src="imgBgUrl+'bd.png'" mode="" class="uniui-phone"></image>
				</view>
				<view class="tp fx">
					公司名称：{{businessInfo.companyName}}
				</view>
				<view class="d-flex a-center j-sb fx">
					<view class="tp d-flex  a-center" @click="btnAddress(businessInfo)">
						 <view class="flex-1">
						 	营业地址：{{businessInfo.businessAddressContent}}
						 </view> 
						<image :src="imgBgUrl+'dz.png'" mode="" class="uniui-phone"></image>
					</view>
					
					<image @click="changeCollectState" class="collect-icon"
						:src="businessInfo.isFavorites ? require('@/static/images/collect-selected.png') : require('@/static/images/collect.png')"
						mode=""></image>
				</view>
			</view>
			
			<view class="index-cent-top intex-list-tp d-flex" >
				<view class="index-cent-top-list">
					<view class="index-cent-top-num">
						{{businessInfo.attentionNum||0}}
					</view>
					<view class="index-cent-top-txt">
						关注
					</view>
				</view>
				<view class="index-cent-top-list">
					<view class="index-cent-top-num">
						{{businessInfo.fansNum||0}}
					</view>
					<view class="index-cent-top-txt">
						粉丝
					</view>
				</view>
				<view class="index-cent-top-list">
					<view class="index-cent-top-num">
						{{businessInfo.bePraisedNum||0}}
					</view>
					<view class="index-cent-top-txt">
						获赞
					</view>
				</view>
				<view class="index-cent-top-list">
					<view class="index-cent-top-num">
						{{businessInfo.collectNum||0}}
					</view>
					<view class="index-cent-top-txt">
						收藏
					</view>
				</view>
			</view>
			
			<view class="index-tabs">
				<u-sticky :customNavHeight='globalData.navBarHeightRpx'>
					<tabsList :list="tabsOptions" :checked="currentChecked" @change="handleChangeTab"></tabsList>
				</u-sticky>


				<!-- <view class="">
					商家介绍
				</view> -->
				<!-- 商家介绍模块 -->
				<view v-if="currentChecked == 0">
					<!-- <view class="" v-html="cent"> </view> -->
					 <view class="title-txt">
					 	{{businessInfo.businessIntroduce}}
					 </view>
					<view class="introduce">
						<image :src="item.url" mode="widthFix" v-for="(item,index) in img" :key="index"></image>
					</view>
				</view>
				<!-- 商家动态模块 -->
				<view v-else-if="currentChecked == 1">
					<template v-if="forumList.length">
						<view class="distence" v-for="(item,index) in forumList" :key="index"
							@click="handleDetail(item.forumId)">
							<dynamicList :itemDetail="item" :isDelete='false' @refersh="handleRefersh"></dynamicList>
						</view>
					</template>
					<u-empty v-else marginTop="20" width="260" height="260" textSize="26" mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
				<!-- 评价模块 -->
				<view v-else v-if="currentChecked == 2" class="px-one">
					<template v-if="evalList.length">

						<view v-for="(item,index) in evalList" :key="index" style="margin-bottom: 30rpx;">
							<evaluateList :itemDetail="item" @reply="handleOpenRely" @refersh="handleRefersh"
								:showState="true"></evaluateList>
						</view>
					</template>
					<u-empty v-else marginTop="20" width="260" height="260" textSize="26" mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png" text="评价为空">
					</u-empty>
					<!-- <view v-for="(item,index) in 3" :key="index" style="margin-bottom: 30rpx;">
						<evaluateList :showState="true"></evaluateList>
					</view> -->
				</view>
			</view>

		</view>

		<view :class="currentChecked == 2 ?'btm':'' ">
			<template v-if="userInfot.userType == 'app_user' || userInfot.userType == 'promoter'">
				<u-button v-if="currentChecked == 0 || currentChecked == 1" @click="jump" text="缴纳定金" color="#1572FF"
					:customStyle="{
					'padding':'24rpx 270rpx',
					'border-radius': '45rpx',
					'font-size': '30rpx'
				}"></u-button>
			</template>
			<u-button v-if="currentChecked == 2" @click="showComments" text="写评价" color="#1572FF" :customStyle="{
				'padding':'24rpx 270rpx',
				'border-radius': '45rpx',
				'font-size': '30rpx'
			}"></u-button>
		</view>
		<commentPopup :replyName="replyData.userName" ref="childPopup" @send="handleSubmit" :isReply="isReply">
		</commentPopup>

		<view class="publish"
			v-if="userInfot.userType == 'merchant' && currentChecked == 1 && userInfot.userId == businessInfo.userId">
			<image @click="handleAddDynamic" src="@/static/images/publish.png" mode=""></image>
		</view>
	</view>
</template>

	
<script>
	import tabsList from '@/components/custom/tabs.vue'
	import dynamicList from '@/components/custom/dynamic.vue'
	import evaluateList from '@/components/evaluate/index.vue'
	import commentPopup from '@/components/custom/comment.vue'
	import apiBaseConfig from '@/config/index.js';
	import {
		businessIdGET,
		listForumGET,
		collectOrUncollect,
		listCommentByDemandId,
		addCommentPOST
	} from '@/api/workbench/index.js';
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			tabsList,
			dynamicList,
			evaluateList,
			commentPopup
		},
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData,
				isReply: false,
				cent: '',
				businessInfo: {},
				tabsOptions: [{
						label: '商家介绍',
						value: 0
					},
					{
						label: '商家动态',
						value: 1
					},
					{
						label: '评价',
						value: 2
					}
				],
				currentChecked: 0,
				queryParams: {
					forumType: 'dynamic',
				},
				forumList: [],
				total: 0,
				evalList: [],
				replyData: {},
				img:[]
			};
		},
		onLoad(option) {
			this.business(option.businessId)
			uni.$on('refersh', (data => {
				console.log('刷新==')
				this.getList()
			}))
		},
		computed: {
			...mapGetters({
				userInfot: 'userInfo'
			})
		},
		onReachBottom() {
			console.log('触底了-------')
		},
		methods: {
			handleRefersh() {
				if (this.currentChecked == 1) {
					this.getList()
				} else if (this.currentChecked == 2) {
					this.getCommentList()
				}
			},
			handleAddDynamic() {
				uni.navigateTo({
					url: '/pages/forum/publish?forumType=dynamic'
				})
			},
			//获取动态列表
			async getList() {
				this.$set(this.queryParams, 'userId', this.businessInfo.userId)
				const res = await listForumGET(this.queryParams)
				this.forumList = res.rows
				this.total = res.total
			},
			// 获取评价列表
			async getCommentList() {
				let self = this
				const res = await listCommentByDemandId({
					forumId: self.businessInfo.userId,
					commentType: 'merchant',
					isUserId: self.userInfot.userId
				})
				this.evalList = res.rows
			},
			// 修改收藏状态
			changeCollectState() {
				collectOrUncollect({
					forumId: this.businessInfo.userId,
					userId: this.userInfot.userId,
					isFavoritesType: 2, // 论坛1商家2
					favoriteType: 'merchant'
				}).then(res => {
					uni.showToast({
						title: '成功!',
						icon: 'none'
					})
					this.business(this.businessInfo.userId)
				})
			},
			// 评论按钮点击事件
			showComments() {
				this.isReply = false
				this.$refs.childPopup.content = ''
				this.$refs.childPopup.contentImg = ''
				this.$refs.childPopup.show = true;
			},
			// 回复按钮点击事件
			handleOpenRely(replyId, replyUserId, replyUserName) {
				this.replyData = {
					commentId: replyId, //回复对话的id
					userId: replyUserId, //回复人的id
					userName: replyUserName //回复人的昵称
				}
				this.isReply = true
				this.$refs.childPopup.content = ''
				this.$refs.childPopup.show = true;
			},
			async handleSubmit() {
				let params;
				if (this.isReply) {
					// 表示回复
					params = {
						forumId: this.businessInfo.userId,
						parentCommentId: this.replyData.commentId,
						repliedId: this.replyData.commentId,
						repliedUserId: this.replyData.userId,
						commentType: 'merchant',
						content: this.$refs.childPopup.content,
						userId: this.userInfot.userId,
						userType: this.userInfot.userType,
						contentImg: this.$refs.childPopup.contentImg
					}
				} else {
					params = {
						forumId: this.businessInfo.userId,
						userId: this.userInfot.userId,
						userType: this.userInfot.userType,
						commentType: 'merchant',
						content: this.$refs.childPopup.content,
						contentImg: this.$refs.childPopup.contentImg
					}
				}
				const res = await addCommentPOST(params)
				console.log(res, '添加=====')
				uni.showToast({
					title: '成功!',
					icon: 'none'
				})
				this.getCommentList()
			},
			handleChangeTab(val) {
				this.currentChecked = val
				switch (this.currentChecked) {
					case 0:
						break;
					case 1:
						this.getList()
						break;
					case 2:
						this.getCommentList()
						break
				}
			},
			handleCompanyDetail() {
				uni.navigateTo({
					url: './personHomePage'
				})
			},
			// 动态详情
			handleDetail(forumId) {
				uni.navigateTo({
					url: `./dynamicDetail?forumId=${forumId}&forumType=dynamic`
				})
			},
			business(businessId) {
				businessIdGET(businessId).then((res) => {
					this.businessInfo = res.data
					this.businessInfo.url = JSON.parse(res.data.businessImg)[0].url
					this.cent = this.$utilsMethods.replaceSpecialChar(res.data.businessIntroduce)
					if(res.data.businessImg){
						this.img = JSON.parse(res.data.businessImg)
					}

				})
			},
			jump() {
				let self = this
				if (this.userInfot.customerAddress || this.userInfot.customerName) {
					this.$uniGo.navigateTo({
						url: `/homePage/deposit/index?userId=${this.businessInfo.userId}`
					});
				} else {
					uni.showModal({
						title: '您还未完善装修地址，请先完善装修地址',
						confirmText: '去完善',
						success() {
							self.$uniGo.navigateTo({
								url: `/my/index/index`
							});
						}
					})
				}
			},
			//拨打电话
			telPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					fail() {
						console.log('取消拨打')
					},
				})
			},
			
			//查看地址
			btnAddress(item) {
				uni.openLocation({
					latitude: parseFloat(this.businessInfo.dimension),
					longitude: parseFloat(this.businessInfo.longitude ),
					name:this.businessInfo.businessAddressContent,
					success: function() {
						console.log('success');
					}
				});
			}

		}
	};
</script>
<style>
	page {
		background: #F7F8FA;
	}
</style>
<style lang="scss" scoped>
	.index {
		&-img {
			width: 100%;
			height: 750rpx;
			position: absolute;
			top: 0rpx;
		}

		&-cent {
			position: relative;
			top: 540rpx;
			border-radius: 20rpx;
			padding-bottom: 200rpx;

			&-top {
				margin: 0px 15px;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 30rpx 28rpx 24rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;

				&-name {
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
				}

				&-score {
					font-size: 32rpx;
					color: #1572FF;
					font-weight: bold;
				}

			}

			// &-cnt {
			// 	margin-top: 24rpx;
			// 	background-color: #fff;
			// 	border-radius: 20rpx;
			// 	padding: 30rpx 28rpx;

			// 	>view:nth-child(1) {
			// 		font-weight: 600;
			// 		font-size: 30rpx;
			// 		color: #242424;
			// 		line-height: 64rpx;
			// 	}
			// }
		}

		&-tabs {
			width: 100%;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 0 30rpx 18rpx;
			box-sizing: border-box;
		}
	}

	    .intex-list-tp{
			margin-top: 20rpx;
			padding: 30rpx 0;
			.index-cent-top-list{
				flex: 1;
				text-align: center;
				.index-cent-top-num{
					font-size: 36rpx;
					color: #333333;	
				}
				.index-cent-top-txt{
					font-size: 28rpx;
					color: #999999;
					padding: 10rpx 0;
				}
			}
		}

	

	.collect-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.btm {
		position: fixed;
		bottom: 0rpx;
		padding: 24rpx 60rpx 62rpx 60rpx;
		width: calc(100% - 120rpx);
		background-color: #FFFFFF;
	}

	.distence {
		margin-bottom: 60rpx;
	}

	.distence:first-child {
		margin-top: 20rpx;
	}

	.publish {
		position: fixed;
		bottom: 178rpx;
		right: 12rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
        z-index: 99999;
		>image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.fx {
		margin-top: 20rpx;
	}
	
	.flex-1{
		width: 500rpx;
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tp-1 {
		display: flex;
		align-items: center;
	}
	.uniui-phone {
		width: 36rpx;
		height: 36rpx;
		margin-left: 16rpx;
	}
	
	.title-txt{
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
		margin-bottom: 20rpx;
		padding-top: 20rpx;
	}
	.introduce{
		>image{
			width: 100%;
		}
	}
</style>