<template>
	<div class="app-main app-content">
		<app-swiper :list="ad" @detail="adDetailFn" />
		<div class="shop-wrap">
			<div class="shop-tit">{{ shop.merchantName }}</div>
			<div>{{ shop.introduction }}</div>
		</div>
		<div class="list-content">
			<tui-list-view class="tui-list-view">
				<tui-list-cell :lineLeft="false" :lineRight="false" padding="26rpx 30rpx 26rpx 0" class="tui-list">
					<div class="list-wrap">
						<div class="list-label">营业时间</div>
						<div class="list-val">{{ shop.openTime || '暂无' }}</div>
					</div>
				</tui-list-cell>
				<tui-list-cell @click="phoneCall" :lineLeft="false" :lineRight="false" padding="26rpx 30rpx 26rpx 0" class="tui-list">
					<div class="list-wrap">
						<div class="list-label">联系电话</div>
						<div class="list-val">{{ shop.telephone || '暂无' }}</div>
					</div>
					<div class="list-icon">
						<i class="iconfont iconditu"></i>
					</div>
				</tui-list-cell>
				<tui-list-cell @click="goNavBtn" :lineLeft="false" :lineRight="false" padding="26rpx 30rpx 26rpx 0" class="tui-list">
					<div class="list-wrap">
						<div class="list-label">门店地址</div>
						<div class="list-val">{{ shop.shopFullAddress || '暂无' }}</div>
					</div>
					<div class="list-icon">
						<i class="iconfont icondianhua"></i>
					</div>
				</tui-list-cell>
			</tui-list-view>
		</div>
		<!-- <app-footer :activeIndex="2" /> -->
		<app-activily-coupon :show="false" />
	</div>
</template>

<script>
// import AppFooter from '@/components/app-footer'
import TuiListView from '@/components/plugin/list-view'
import TuiListCell from '@/components/plugin/list-cell'
import AppSwiper from '@/components/app-swiper'
import AppActivilyCoupon from '@/components/module/app-activily-coupon'
// api
import { getShop } from '@/api/common'
export default {
	name: 'category',
	components: {
		// AppFooter,
		AppSwiper,
		TuiListView,
		TuiListCell,
		AppActivilyCoupon
	},
	data() {
		return {
			data: {},
			ad: [],
			shop: {}
		}
	},
	onLoad(option) {
		// this.init()
	},
	methods: {
		init() {
			this._detail()
		},
		_detail() {
			let form = {}
			if (this.option.id) {
				this.form.introUserId = this.option.id
			}
			getShop(form).then(res => {
				this.data = res.data
				if (this.$util.isEmpty(res.data)) return false
				this.ad = res.data.ad.map(e => {
					e.img = e.adImg
					return e
				})
				this.shop = res.data.shop
			})
		},
		// operate
		adDetailFn(item) {
			// #ifdef H5
			location.href = item.url
			// #endif
			// #ifndef H5
			// #endif
		},
		phoneCall() {
			uni.makePhoneCall({
				phoneNumber: this.shop.telephone
			})
		},
		goNavBtn() {
			uni.openLocation({
				latitude: parseFloat(this.shop.shopLat),
				longitude: parseFloat(this.shop.shopLong),
				name: this.shop.shopCity || '',
				address: this.shop.shopFullAddress || ''
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.shop-wrap {
		padding: 40px 20px;
		color: $fontColor3;
		background-color: #fff;
		margin-bottom: 20px;
		.shop-tit {
			font-size: 38px;
			color: #333;
			font-weight: 600;
			margin-bottom: 20px;
		}
	}
	.list-content {
		background-color: #fff;
		.tui-list {
			width: calc(100% - 20px);
			@include disFlex(center, space-between);
			// padding-left: 0 !important;
			margin-left: 20px;
			.list-wrap {
				width: calc(100% - 40px);
				@include disFlex(center, flex-start);
				color: $fontColor3;
				.list-label {
					width: 150px;
					color: #333;
					// margin-right: 40px;
				}
				.list-val {
					width: calc(100% - 150px);
				}
			}
			.list-icon {
				margin-right: 10px;
				.iconfont {
					color: $mainColor;
					font-weight: bold;
				}
			}
		}
	}
</style>
