<template>
	<view>
		<view class="padding bg-main-color" :style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
			<!-- 个人信息栏 -->
			<view class="flex justify-between padding-bottom align-center solid-bottom">
				<view class="flex justify-start align-center">
					<view class="cu-avatar round"
						:style="'width: 120rpx; height: 120rpx; background-image:url(' + myInfo.picUrl + ');'"></view>
					<view class="margin-lr-sm">
						<view class="text-xl margin-bottom-xs">{{myInfo.name}}</view>
						<!-- <view class="padding-xs text-sm">
							<view class='cu-tag bg-white radius'>编辑</view>
						</view> -->
					</view>
				</view>
				<view class="right-tag padding-lr padding-tb-xs">师傅规则</view>
			</view>
			<!-- 未预约，未派单，上门超时 -->
			<view class="cu-list grid no-border col-3 margin-top-sm" style="background-color: inherit;">
				<view class="cu-item">
					<view class="margin-bottom-xs text-xxl">{{myInfo.order.noReservation}}</view>
					<view>未预约</view>
				</view>
				<view class="cu-item">
					<view class="margin-bottom-xs text-xxl">{{myInfo.order.noSchedule}}</view>
					<view>未排单</view>
				</view>
				<view class="cu-item">
					<view class="margin-bottom-xs text-xxl">{{myInfo.order.onsiteTimeout}}</view>
					<view>上门超时</view>
				</view>
			</view>
		</view>
		<view class="margin-lr-sm paper-drawer-bar margin-bottom-with-bar">
			<!-- 今日待上门 -->
			<view class="bg-white padding-lr shadow-warp">
				<view class="cu-bar margin-top-sm solid-bottom">
					<view class="action bar-first-action">
						<view class="cuIcon-title text-main-color"></view>
						<text>今日待上门({{myInfo.order.onsiteToday.length}})</text>
					</view>
					<view class="flex justify-end text-sm align-center">
						<text>即将上门订单</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<!-- 轮播 -->
				<swiper class="screen-swiper" :autoplay="true" :circular="true">
					<swiper-item v-for="(item,index) in myInfo.order.onsiteToday" :key="index">
						<view class="padding-sm">
							<view class="flex justify-between align-center margin-bottom-xs">
								<view class="text-lg">{{item.work}}</view>
								<view class="text-red">{{item.datetime}}</view>
							</view>
							<view>地址：{{item.address}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 每周公告 -->
			<view class="padding bg-white shadow-warp margin-top-sm">
				<view class="flex justify-between align-center">
					<view class="">
						<text class="text-main-color">[每周公告]</text>
						<text>{{myInfo.weekNotice.title}}</text>
					</view>
					<view class="flex justify-end">
						<view class="cu-tag badge" v-if="myInfo.weekNotice.ifHasNoReadNotice"></view>
						<view class="cuIcon-right"></view>
					</view>
				</view>
			</view>
			<!-- 功能模块 -->
			<view class="margin-lr-sm margin-top margin-bottom-with-bar">
				<view class="text-lg">服务中心</view>
				<view class="nav-list">
					<navigator hover-class="none" :url="item.pageUrl" class="nav-li margin-top"
						navigateTo :class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
						v-for="(item,index) in servModules " :key="index">
						<view class="nav-title">{{item.title}}</view>
						<view class="nav-name">{{item.name}}</view>
						<text :class="'cuIcon-' + item.cuIcon"></text>
					</navigator>
				</view>
			</view>
		</view>

		<!-- 首页引导 -->
		<view class="cu-modal" :class="isShowSteer?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					<view class="cuIcon-discover big-icon padding-tb text-main-color"></view>
					<view>请您选择入驻类型！到家服务类请选择-服务商；商品销售类请选择-配件商。</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-black" @tap="hideModal"
						@click="chooseEntryType('goods')">配件商</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
						@click="chooseEntryType('serv')">服务商</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'index',
		data() {
			return {
				pageContentTop: this.CustomBar,
				servModules: [{
					id: 1,
					title: '需求大厅',
					name: '查看详情',
					color: 'blue',
					cuIcon: 'list',
					pageUrl: ''
				}, {
					id: 2,
					title: '我的订单',
					name: '查看详情',
					color: 'orange',
					cuIcon: 'text',
					pageUrl: ''
				}, {
					id: 3,
					title: '叮咚学院',
					name: '查看详情',
					color: 'cyan',
					cuIcon: 'emoji',
					pageUrl: ''
				}, {
					id: 4,
					title: '邀请师傅',
					name: '查看详情',
					color: 'pink',
					cuIcon: 'profile',
					pageUrl: '/pages/area-proxy/my-team'
				}, {
					id: 5,
					title: '区域代理',
					name: '查看详情',
					color: 'olive',
					cuIcon: 'group',
					pageUrl: ''
				}],
				myInfo: {},
				isShowSteer: false,
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.myInfo = await this.$api.data('myInfo');
				this.isShowSteer = !this.myInfo.entryType;
			},
			chooseEntryType(typeCode) {

			},
			hideModal(e) {
				this.isShowSteer = false
			}
		},
	}
</script>

<style scoped>
	.bg-main-color .solid-bottom::after {
		border-bottom: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.cu-list.grid.no-border>.solid-left.cu-item:after {
		border-left: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.cu-list.grid.no-border>.solid-right.cu-item:after {
		border-right: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.paper-drawer-bar {
		position: relative;
		top: -100rpx;
	}

	.screen-swiper {
		height: 180rpx;
		min-height: unset;
	}

	.bar-first-action {
		margin-left: unset !important;
		font-size: 30rpx !important;
	}

	.nav-list>navigator:nth-child(even) {
		margin-left: 30rpx;
	}

	.right-tag {
		background-color: rgba(0, 0, 0, 0.3);
		position: relative;
		right: -30rpx;
		border-radius: 40rpx 0 0 40rpx;
	}

	.cu-bar .action:first-child {
		margin-left: 30rpx;
		font-size: inherit;
	}
	
	.big-icon {
		font-size: 111rpx;
	}
</style>
