<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 orderData" :key="item.id">
						<span>{{item.createDate}}</span>
						<span>{{item.vehicleNumber}}</span>
						<span :class="getClass(item.status)">{{item.status}}</span>
					</div>
				</div>
				<div class="nodata" v-if="orderData.length==0">{{noOrderDataText}}</div>
			</div>
		</div>
	</view>
</template>

<script>
import iconItemsList from '@/components/icon-items-list/icon-items-list.vue'
import { bannerList } from "@/api/banner.js"
import { orderQueryLike, finishOrder } from '@/api/order'
import moment from 'moment'
export default {
	components: {
		iconItemsList
	},
	data() {
		return {
			// 顶部轮播图片
			imageTopList:[],
			noOrderDataText: '数据加载中，请稍后...',
			orderData: [],
			// 快捷导航
			navList: [
				{
					id: 'SPXD',
					icon: 'xundian',
					color: '#00aaff',
					name: '视频巡店',
					url:'/pages/shopTour/shopTour',
					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.getOrderData()
	},
	methods: {
		openVideo() {
			 uni.navigateTo({
			 	url:"/pages/shopTour/shopTour"
			 })
		},
		// 消息提示
		showTotast(title){
			uni.showToast({
				icon: 'none',
				title:title
			})
		},
		// 获取顶部与中部轮播图片
		getBanner(position){
			bannerList({
				position: position,
				status : '1',
			}).then(res=>{
				console.log(res,"-----------")
				if(res.status == 200){
					if(position == 'HOME_TOP'){
						this.imageTopList=res.data
					}
				}
			}).catch(err=>{
				console.log('数据获取失败')
			})
		},
		// 获取工单看板
		getOrderData(){
			let _this = this
			let orderData = {
			  pageNo: 1,
			  pageSize: 5,
			  queryEndDate: moment().format('YYYY-MM-DD'),
			  queryBeginDate: moment().subtract(7, 'days').format('YYYY-MM-DD')
			}
			orderQueryLike(orderData).then(res=>{
				console.log(res,'oooooooooo')
				if(res.status==200){
					let data = res.data.list
					let temp = []
					if(data.length) {
						data.map(item=>{
							// 已完工 已结清
							if(item.finishFlag == 'FINI' && item.orderFlag == 'PAED' ){
								item.status = '已结清'
							}
							// 已完工 未结算
							if (item.finishFlag == 'FINI' && item.orderFlag == 'UNPA'){
								item.status = '待结算'
							}
							// 已开单 未完工 未结算
							if (item.finishFlag == 'SAVE' && item.orderFlag == 'UNPA'){
								item.status = '待完工'
							}
							// 扫码洗车 已结清 未完工 
							if (item.finishFlag == 'SAVE' && item.orderFlag == 'PAED'){
								item.status = '待完工'
							}
							// 销售单 已结清
							if (item.typeId == 2 && item.orderFlag == 'PAED'){
								item.status = '已结清'
							}
							// 销售单 待结算
							if (item.typeId == 2 && item.orderFlag == 'UNPA'){
								item.status = '待结算'
							}
							temp.push(item)
							return
						})
						_this.orderData = temp.slice(0,3)
					} else {
						_this.orderData = []
						_this.noOrderDataText = '暂无数据'
					}
				} else {
					this.showTotast(res.message ? res.message : '网络似乎出错了，请稍后再试')
					this.noOrderDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
				}
			})
		},
		// 根据工单状态 附class名
		getClass(flag){
			if (flag == '已结清'){
				return 'yiJs'
			}
			if (flag == '待完工'){
				return 'daiWg'
			}
			if (flag == '待结算'){
				return 'daiJs'
			}
		},
	}
};
</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>
