<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品管理</block>
		</cu-custom>
		<!-- 展示商品/服务tab -->
		<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
			<!-- tab header -->
			<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
				:scroll-left="scrollLeft">
				<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in tabHeaders"
					:key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<!-- 条件筛选栏 -->
			<view class="padding bg-white solid-bottom">
				<view class="flex justify-between align-center">
					<input class="line-input radius-input" v-model="formData.keywords" placeholder="请输入关键字"></input>
					<button class="cu-btn bg-main-color shadow-blur">搜索</button>
				</view>
			</view>
		</view>
		<!-- tab content -->
		<view class="margin-bottom-with-bar">
			<view class="padding bg-white margin-top-sm margin-lr-sm name-card" v-for="(good, index) in goodsList">
				<view class="flex justify-start">
					<view class="cu-avatar xxl-view" :style="'background-image:url(' + good.picUrl + ');'"></view>
					<view class="margin-left-sm flex-column-between">
						<view class="text-black text-cut" style="width: 330rpx;">{{good.name}}</view>
						<view class="text-price text-red text-lg">{{good.salePrice}}</view>
						<view class="text-gray">{{good.comments}}</view>
						<view class="text-gray">服务城市：{{good.servArea}}</view>
						<view class="text-gray">团购日期：</view>
						<uni-datetime-picker :value="good.groupBuyDate" type="datetimerange" rangeSeparator="至" @change="changeGroupBuyDate($event, good)"/>
					</view>
				</view>
				<view class="flex justify-end oper-bar">
					<view class="text-center margin-right-sm" v-if="good.isGoldenServ">
						<view class="cuIcon-selectionfill text-orange"></view>
						<view class="text-xs">金牌服务</view>
					</view>
				</view>
				<view>
					<button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="addEditGood(good)">编辑</button>
					<button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="offGood(good)">下架</button>
					<button class="cu-btn line-main-color margin-right-xs margin-top-sm" @click="copyGood(good)">复制</button>
					<button class="cu-btn line-main-color margin-right-xs margin-top-sm">优惠券</button>
					<button class="cu-btn line-red shadow-blur margin-right-xs margin-top-sm" @click="delGood(good)">删除</button>
				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="cu-bar tabbar border shop fixed-bottom-bar bg-white">
			<button class="cu-btn bg-main-color lg shadow-blur margin-left-xs" @click="addEditGood(null)">新增服务</button>
			<button class="cu-btn bg-main-color lg shadow-blur">优惠券</button>
			<button class="cu-btn bg-main-color lg shadow-blur">暂停售卖</button>
			<button class="cu-btn bg-main-color lg shadow-blur margin-right-xs" data-modal="communityModal" @tap="showModal">社区</button>
		</view>
		<!-- 模态框 -->
		<view class="cu-modal" :class="communityModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end solid-bottom">
					<view class="content">社区入驻</view>
					<view class="action" data-modal="communityModal" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding bg-white text-left">
					<view>你可选择一个物业/楼盘作为入驻的社区，则你所有服务或商品将展示在该社区。社区服务属于一公里范围便利服务内容，你必须选择你驻点所在地入驻，以便提供快捷便利的社区服务。</view>
					<view class="margin-top">社区入驻：</view>
					<view>
						<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="provinceList" placeholder="省"
							v-model="selectedCommunity.province" @input="changeCommunity($event, 0)"></my-uni-combox>
						<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="cityList" placeholder="市"
							v-model="selectedCommunity.city" @input="changeCommunity($event, 0)"></my-uni-combox>
						<my-uni-combox class="inline-combox margin-right-xs margin-bottom-xs" :candidates="districtList" placeholder="区"
							v-model="selectedCommunity.district" @input="changeCommunity($event, 0)"></my-uni-combox>
						<my-uni-combox class="inline-combox margin-bottom-xs" :candidates="streetList" placeholder="街道"
							v-model="selectedCommunity.street" @input="changeCommunity($event, 0)"></my-uni-combox>
					</view>
					<my-uni-combox :candidates="communityList" placeholder="社区/物业选择"
						v-model="selectedCommunity.community" @input="changeCommunity($event, 0)"></my-uni-combox>
					<view class="margin-top text-gray">注：未创建的社区可在商城端创建再行入驻</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-black" data-modal="communityModal" @tap="hideModal">新增社区上架</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="communityModal" @tap="hideModal" @click="comfirmCommunity">确认入驻社区</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
	
	export default {
		components: {
			myUniCombox
		},
		data() {
			return {
				tabCur: 0,
				tabHeaders: [{
					code: 0,
					name: '服务商品'
				}, {
					code: 1,
					name: '配件商品'
				}],
				scrollLeft: 0,
				stickyTop: this.CustomBar,
				formData: {
					keywords: ''
				},
				goodsList: [],
				datetimerange: ["", ""],
				communityModal: false,
				provinceList: [],
				cityList: [],
				districtList: [],
				streetList: [],
				communityList: {},
				selectedCommunity: {
				}
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.goodsList = await this.$api.data('goodsList');
				this.areaObj = await this.$api.data('areaObj');
				this.provinceList = this.areaObj.provinceList;
				this.cityList = this.areaObj.cityList;
				this.districtList = this.areaObj.districtList;
				this.streetList = this.areaObj.streetList;
				this.communityList = this.areaObj.communityList;
			},
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			showModal(e) {
				this[e.currentTarget.dataset.modal] = true;
			},
			hideModal(e) {
				this[e.currentTarget.dataset.modal] = false;
			},
			changeGroupBuyDate(value, good) {
				console.log(value)
			},
			editGood(good) {
				
			},
			offGood(good) {
				
			},
			copyGood(good) {
				
			},
			delGood(good) {
				
			},
			changeCommunity(selectObj, communityCode) {
				// TODO: 不同的code加载不同的数据
				console.log(selectObj)
			},
			comfirmCommunity() {
				
			},
			addEditGood(servItem) {
				let params = '';
				if (servItem != null) {
					params = '?goodId=' + servItem.id
				}
				uni.navigateTo({
					url: '/pages/my/new-serv' + params
				})
			}
		},
	}
</script>

<style scoped>
	.nav .cu-item {
		width: 50%;
		margin: 0;
	}

	.line-input {
		width: 77%;
	}
	
	.xxl-view {
		min-width: 200rpx;
		min-height: 200rpx;
	}
	
	.name-card {
		position: relative;
	}
	
	.name-card .oper-bar {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
	}
	
	/deep/ .uni-date__x-input {
		height: 30px;
	}
	
	.inline-combox {
		display: inline-block;
		width: calc((100vw - 158rpx)/4);
	}
</style>
