<template>
	<view>
		<!-- 门脸图 -->
		<view class="shop-banner">
			<image :src="record.logo" class="logo" mode="aspectFit"></image>
			<view class="shop-info">
				<view class="shop-name">{{ record.merchantName }}</view>
				<view class="shop-desc">
					<view class="shop-desc-text"><u-rate :count="count" :gutter="-10" :value="value" readonly size="20" @change="onChangeStar"></u-rate></view>
					<!-- <view class="shop-desc-text">店铺粉丝 321</view> -->
					<view class="shop-desc-text">全部商品 {{ count }}</view>
				</view>
			</view>
			<view class="follow"><u-button size="mini">关注</u-button></view>
		</view>
		
		<view class="category" v-for="(cate,index) in category" :key="index">
			<view class="category-name" v-if="cate.count > 0">{{ cate.dictDataName }}</view>
			<block v-for="(eq,i) in equipmentList" :key="i">
				<view class="goods" v-if="cate.dictDataCode == eq.equipmentCategory">
					<block v-if="eq.equipmentCategory == '10'">
						<image v-if="eq.image" :src="eq.image" class="equipment-image" mode="aspectFit"></image>
						<image v-else src="../../static/goods/battery.png" class="equipment-image" mode="aspectFit"></image>
						<view class="info">
							<text class="equipment-model">{{ eq.batteryModel }}</text>
							<text class="equipment-count">库存：{{ eq.stockTotal }}个</text>
							<text class="equipment-price">￥{{ eq.batteryPrice }}元</text>
						</view>
						<view class="tobuy">
							<u-button type="success" :disabled="disabled" size="mini" @click="buy(eq.goodsId)">立即购买</u-button>
						</view>
					</block>
					<block v-if="eq.equipmentCategory == '20'">
						<image v-if="eq.image" :src="eq.image" class="equipment-image" mode="aspectFit"></image>
						<image v-else src="../../static/goods/battery.png" class="equipment-image" mode="aspectFit"></image>
						<view class="info">
							<text class="equipment-model">{{ eq.batteryModel }}</text>
							<text class="equipment-count">库存：{{ eq.stockTotal }}个</text>
							<text class="equipment-price">￥{{ eq.repayment }}元/月</text>
						</view>
						<view class="tobuy">
							<u-button type="error" :disabled="disabled" size="mini" @click="buy(eq.goodsId)">立即购买</u-button>
						</view>
					</block>
					<block v-if="eq.equipmentCategory == '30'">
						<image v-if="eq.image" :src="eq.image" class="equipment-image" mode="aspectFit"></image>
						<image v-else src="../../static/goods/battery.png" class="equipment-image" mode="aspectFit"></image>
						<view class="info">
							<text class="equipment-model">{{ eq.batteryModel }}</text>
							<text class="equipment-count">库存：{{ eq.stockTotal }}个</text>
							<text class="equipment-price">￥{{ eq.batteryRent }}元/月</text>
						</view>
						<view class="tobuy">
							<u-button type="warning" :disabled="disabled" size="mini" @click="buy(eq.goodsId)">立即租用</u-button>
						</view>
					</block>
					<block v-if="eq.equipmentCategory == '40'">
						<image v-if="eq.image" :src="eq.image" class="equipment-image" mode="aspectFit"></image>
						<image v-else src="../../static/goods/battery.png" class="equipment-image" mode="aspectFit"></image>
						<view class="info">
							<text class="equipment-model">{{ eq.batteryModel }}</text>
							<text class="equipment-count">库存：{{ eq.stockTotal }}个</text>
							<text class="equipment-price">￥{{ eq.batteryRent }}元/月</text>
						</view>
						<view class="tobuy">
							<u-button type="primary" :disabled="disabled" size="mini" @click="buy(eq.goodsId)">立即租用</u-button>
						</view>
					</block>
					
				</view>
			</block>
		</view>
		<empty v-if="equipmentList.length == 0" :isLoading="isLoading" tips="商品已售罄" />
	</view>
</template>

<script>
	// import Search from '@/components/page/diyComponents/search/index.vue'
	// import {
	// 	getMoreListData
	// } from '@/core/app'
	// import * as ShopApi from '@/api/shop.js'
	
	import Empty from '@/components/empty'
	import {
		listMerchant
	} from '@/websoft/api/merchant.js'
	import { pageEquipmentGoods } from '@/websoft/api/equipment-goods.js'
	import { getDictionaryOptions } from '@/websoft/api/dict.js'
	// import Empty from '@/components/empty'

	export default {
		components: {
			// Search,
			Empty
		},
		data() {
			return {
				record: {},
				// 正在加载中
				isLoading: true,
				// 是否授权了定位权限
				isAuthor: true,
				// 当前选择的商户ID
				merchantId: null,
				// 商户编号
				merchantCode: null,
				// 订单列表数据
				equipmentList: [],
				modelList: [],
				// 设备分类
				count: 0,
				value: 3,
				disabled: false,
				category: [
					{
						id: 0,
						name: '销售',
						count: 0
					},
					{
						id: 1,
						name: '分期',
						count: 0
					},
					{
						id: 2,
						name: '以租代购',
						count: 0
					},
					{
						id: 3,
						name: '租赁',
						count: 0
					}
				]
			}
		},
		onLoad(option) {
			console.log("option: ",option);
			const app = this
			// 记录当前选择的门店ID
			app.equipmentId = option.equipmentId
			app.merchantId = option.merchantId
			app.merchantCode = option.merchantCode
			// // 获取默认门店列表
			app.getMerchant()
			// // 获取字典数据
			app.getDict()
			
		},
		methods: {
			getEquipment(){
				const app = this
				const { merchantCode } = this
				pageEquipmentGoods({merchantCode, status: 0}).then(res => {
					app.count = res.data.count
					app.equipmentList = res.data.list
					app.category[0].count = app.equipmentList.filter(d => d.equipmentCategory == '10').length
					app.category[1].count = app.equipmentList.filter(d => d.equipmentCategory == '20').length
					app.category[2].count = app.equipmentList.filter(d => d.equipmentCategory == '30').length
					app.category[3].count = app.equipmentList.filter(d => d.equipmentCategory == '40').length
				})
			},
			getDict(){
				const app = this
				getDictionaryOptions({dictCode: 'equipmentCategory'}).then(res => {
					app.category = res.data
				})
				getDictionaryOptions({dictCode: 'equipmentModel'}).then(res => {
					app.modelList = res.data
				})
				// 获取设备列表
				app.getEquipment()
			},
			// 获取门店列表
			getMerchant() {
				const app = this
				const { merchantId } = this
				app.isLoading = true
				console.log("merchantIdmerchantId: ",merchantId);
				listMerchant({merchantId})
					.then(result => {
						app.record = result.data[0]
					})
					.finally(() => app.isLoading = false)
			},

			// 获取用户坐标
			// 参考文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
			getLocation(callback) {
				const app = this
				uni.getLocation({
					type: 'wgs84',
					success: callback,
					fail() {
						app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
						app.isAuthor = false
					}
				})
			},

			// 授权启用定位权限
			onAuthorize() {
				const app = this
				// #ifdef MP
				uni.openSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							console.log('定位权限授权成功')
							app.isAuthor = true
							setTimeout(() => {
								// 获取用户坐标
								app.getLocation((res) => {
									app.getShopList(res.longitude, res.latitude)
								})
							}, 1000)
						}
					}
				})
				// #endif
				// #ifdef H5
				// 获取用户坐标
				app.getLocation((res) => {
					app.getShopList(res.longitude, res.latitude)
				})
				// #endif
			},

			/**
			 * 选择门店
			 */
			onSelectedShop(merchantId) {
				this.$navTo('package/shops/detail/index', {
					merchantId
				})
			},
			
			buy(goodsId){
				console.log("goodsId: ",goodsId);
				this.$navTo('pages/checkout/checkout', { goodsId })
			},

			changeCity() {
				this.$toast('切换区域')
			},
			onChangeStar(e){
				console.log("e: ",e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-banner{
		background-color: #f3f3f3;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		.logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			margin: 0 20rpx;
		}
		.shop-info{
			height: 100rpx;
			width: 560rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			.shop-name{
				font-size: 36rpx;
				font-weight: bold;
			}
			.shop-desc{
				display: flex;
				.shop-desc-text{
					font-size: 22rpx;
					margin-right: 20rpx;
				}
			}
		}
		.follow{
			margin-right: 20rpx;
		}
	}
	.category{
		width: 700rpx;
		margin: 20rpx auto;
		.category-name{
			margin-bottom: 20rpx;
			color: #999999;
		}
		.goods{
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.equipment-image{
				width: 240rpx;
				height: 160rpx;
				margin-right: 20rpx;
				background-color: #f7f7f7;
			}
			.info{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 120rpx;
				min-width: 280rpx;
				.equipment-model{
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.equipment-count{
					color: #999999;
				}
				.equipment-price{
					color: #ff0000;
				}
			}
		}
	}
	
</style>
