<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
			<swiper-item v-for="(item,index) in imageTopList" :key="index">
				<div class="swiper-item uni-bg-red">
					<!-- <image class="swiper-item-imgse" :fade-show='true' :src="item.photo"></image> -->
					<u-image mode="scaleToFill" width="750upx" height="400upx" :src="item.photoPath"></u-image>
				</div>
			</swiper-item>
		</swiper>
		<!-- 导航按钮 -->
		<div class="nav-items">
			<iconItemsList :list="navList"></iconItemsList>
		</div>
		<u-gap height="10" bg-color="#f8f8f8"></u-gap>
		<!-- 待办单 -->
		<div class="panel-box" v-if="$hasPermissions('M_homeTodoList_mobile')">
			<div class="panel-title">
				<span class="texts">待办单</span>
				<span v-if="$hasPermissions('M_todoList_mobile')" class="btns" @click="toDoList">更多
					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="24" color="#4eacfe"></u-icon>
				</span>
			</div>
			<div class="panel-body">
				<div class="order-list">
					<div v-for="item in toDoData" :key="item.id" @click="viewToDo(item)">
						<span>{{item.createDate.split(' ')[0]}}</span>
						<span>{{item.sourceTypeDictValue}}</span>
						<span :class="item.status">{{item.statusDictValue}}</span>
					</div>
				</div>
				<div class="nodata" v-if="toDoData.length==0">{{notoDoDataText}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	import iconItemsList from '@/components/icon-items-list/icon-items-list.vue'
	import {
		bannerList
	} from "@/api/banner.js"
	import {
		getBackLogList
	} from '@/api/backLog'
	import {
		getLookUpDatas
	} from "@/api/data.js"
	import moment from 'moment'
	export default {
		components: {
			iconItemsList
		},
		data() {
			return {
				// 顶部轮播图片
				imageTopList: [],
				notoDoDataText: '数据加载中，请稍后...',
				toDoData: [],
				// 快捷导航
				navList: [{
						id: 'SPXD',
						icon: 'xundian',
						color: '#00aaff',
						name: '视频巡店',
						url: '/pages/videoShopTour/videoShopTour',
						target: 'page',
						auth: this.$hasPermissions("M_videoTour_mobile")
					},
					{
						id: 'DJZX',
						icon: 'dianjian',
						color: '#ff8b3e',
						name: '点检中心',
						url: '/pages/spotCheckCenter/spotChecking',
						target: 'page',
						auth: this.$hasPermissions("M_spotCheckCenter_mobile")
					},
					{
						id: 'XCXD',
						icon: 'xianchangqiandao',
						color: '#00aa7f',
						name: '现场巡店',
						url: '/pages/siteInspection/siteInspection',
						target: 'page',
						auth: this.$hasPermissions("M_siteInspection_mobile")
					},
					{
						id: 'XDJL',
						icon: 'tubiaokuwenjian-gengxin-',
						color: '#55aaff',
						name: '巡店记录',
						url: '/pages/shopTourRecord/shopTourRecord',
						target: 'page',
						auth: this.$hasPermissions("M_shopTourRecord_mobile")
					}
				],
			};
		},
		onLoad() {
			// 获取周
			this.getLookUpList('WEEK', 'vuex_weeks');
			// 获取点检任务状态
			this.getLookUpList('POINT_TASK_STATUS', 'vuex_spotCheckStatus')
			// 获取巡店任务状态
		    this.getLookUpList('TASK_STATUS','vuex_taskStatus')
		},
		onShow() {
			this.getBanner('HOME_TOP')
			this.gettoDoData()
		},
		methods: {
			// 或某一项字典列表，参数code
			getLookUpList(code, vuexKey) {
				getLookUpDatas({
					type: code
				}).then(res => {
					if (res.status == 200) {
						this.$store.state[vuexKey] = res.data || [];
					}
				});
			},
			openVideo() {
				uni.navigateTo({
					url: "/pages/shopTour/shopTour"
				})
			},
			// 消息提示
			showTotast(title) {
				uni.showToast({
					icon: 'none',
					title: title
				})
			},
			// 获取顶部与中部轮播图片
			getBanner() {
				bannerList({
					position: 'HOME_TOP',
					bannerType: 'app'
				}).then(res => {
					if (res.status == 200) {
						this.imageTopList = res.data || []
					}
				})
			},
			// 获取待办单
			gettoDoData() {
				let _this = this
				let toDoData = {
					pageNo: 1,
					pageSize: 10,
					queryLabel: 'ALL',
					// endDate: moment().format('YYYY-MM-DD'),
					// beginDate: moment().subtract(7, 'days').format('YYYY-MM-DD')
				}
				getBackLogList(toDoData).then(res => {
					console.log(res)
					if (res.status == 200) {
						let data = res.data.list
						if (data.length) {
							_this.toDoData = data.slice(0, 10)
						} else {
							_this.toDoData = []
							_this.notoDoDataText = '暂无数据'
						}
					} else {
						this.showTotast(res.message ? res.message : '网络似乎出错了，请稍后再试')
						this.notoDoDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
					}
				})
			},
			// 更多待办
			toDoList() {
				uni.navigateTo({
					url: '/pages/toDoList/toDoList'
				})
			},
			// 详细页
			viewToDo(item){
				uni.navigateTo({
					url: "/pages/toDoList/backlogDetail?id="+item.id
				})
			},
		}
	};
</script>

<style lang="scss">
	.content {
		.top-ad-swiper {
			height: 340upx;
		}

		.swiper-item-imgse {
			width: 750upx;
			height: 340upx;
		}

		.panel-box {
			.panel-title {
				display: flex;
				align-items: center;
				padding:20upx 25upx;
				border-bottom: 2upx solid #eee;
				.texts {
					font-size: 28upx;
					flex-grow: 1;
					padding-left: 15upx;
				}
				.btns {
					font-size: 24upx;
					color: #999;
				}
			}

			.panel-body {
				padding: 20upx 0;

				.nodata {
					text-align: center;
					font-size: 24upx;
					width: 100%;
					color: #999999;
					padding: 30upx 0;
				}
			}
		}
		.order-list {
			>div {
				display: flex;
				align-items: center;
				font-size: 30upx;
				padding: 15upx 40upx;
				justify-content: space-evenly;
				span {
					flex-grow: 1;
					color: #666;
					width: 30.3%;
					&:last-child{
						width: 10%;
					}
				}
				span.PENDING{
					color: #ff736e;
				}
				span.EXPIRED{
					color: #999;
				}
				span.FINISHED{
					color: #55aa00;
				}
			}
		}
	}
</style>
