<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.photo"></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">
			<div class="panel-title">
				<span class="texts">待办单</span>
				<span class="btns">更多 
				<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">
						<span>{{item.createDate}}</span>
						<span>{{item.sourceType}}</span>
						<span>{{item.status}}</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 moment from 'moment'
export default {
	components: {
		iconItemsList
	},
	data() {
		return {
			// 顶部轮播图片
			imageTopList:[],
			notoDoDataText: '数据加载中，请稍后...',
			toDoData: [],
			// 快捷导航
			navList: [
				{
					id: 'SPXD',
					icon: 'xundian',
					color: '#00aaff',
					name: '视频巡店',
					// url:'/pages/shopTour/shopTour',
					url: '/pages/videoShopTour/videoShopTour',
					target: 'page',
					auth: true
				},
				{
					id: 'DJZX',
					icon: 'dianjian',
					color: '#ff5500',
					name: '点检中心',
					url:'/pages/spotCheckCenter/spotChecking',
					target: 'page',
					auth: true
				},
				{
					id: 'XCXD',
					icon: 'xianchangjiancha',
					color: '#00aa00',
					name: '现场巡店',
					url:'/pages/siteInspection/siteInspection',
					target: 'page',
					auth: true
				},
				{
					id: 'XDJL',
					icon: 'tubiaokuwenjian-gengxin-',
					color: '#d0527e',
					name: '巡店记录',
					url:'/pages/shopTourRecord/shopTourRecord',
					target: 'page',
					auth: true
				}
			],
		};
	},
	onLoad() {
		this.getBanner('HOME_TOP')
		this.gettoDoData()
	},
	methods: {
		openVideo() {
			 uni.navigateTo({
			 	url:"/pages/shopTour/shopTour"
			 })
		},
		// 消息提示
		showTotast(title){
			uni.showToast({
				icon: 'none',
				title:title
			})
		},
		// 获取顶部与中部轮播图片
		getBanner(position){
			bannerList({
				position: position,
				status : '1',
				bannerType: 'App'
			}).then(res=>{
				if(res.status == 200){
					if(position == 'HOME_TOP'){
						this.imageTopList=res.data
					}
				}
			}).catch(err=>{
				console.log('数据获取失败')
			})
		},
		// 获取待办单
		gettoDoData(){
			let _this = this
			let toDoData = {
			  pageNo: 1,
			  pageSize: 5,
			  endDate: moment().format('YYYY-MM-DD'),
			  beginDate: moment().subtract(7, 'days').format('YYYY-MM-DD')
			}
			getBackLogList(toDoData).then(res=>{
				if(res.status==200){
					let data = res.data.list
					if(data.length) {
						_this.toDoData = data
					} else {
						_this.toDoData = []
						_this.notoDoDataText = '暂无数据'
					}
				} else {
					this.showTotast(res.message ? res.message : '网络似乎出错了，请稍后再试')
					this.notoDoDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
				}
			})
		},
	}
};
</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 15upx;
			border-bottom: 2upx solid #eee;
			.texts{
				font-size: 28upx;
				flex-grow: 1;
				padding-left: 15upx;
				background: url(/static/pt.png) no-repeat left center;
				background-size: auto 80%;
			}
			.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: 14upx 0;
			
			span{
				flex-grow: 1;
				text-align: center;
				color: #666;
			}
			span.daiJs{
				color: #ff0000;
			}
			span.daiWg{
				color: #ffaa00;
			}
			span.yiJs{
				color: #5fbe00;
			}
		}
	}
}
</style>
