<template>
	<view class="ex-page">
		<view class="top-bar">
				<DorpdownSelect class="bar"
					:menuObj="menuTimeObj"
					:selectItemId.sync="selectTimeId"
																				:typeTime="true"
					:typeSelect="1" top="0px"
					@selectSussess="selectSussess" />

			<DorpdownSelect class="bar"
				:menuObj.sync="menuObj"
				:selectItemId.sync="shopId"
				top="0"
				@selectSussess="selectShopSussess" />
		</view>
		<scroll-view scroll-y scroll-with-animation class="main-view">
			<view class="space-view ex-table">
				<block v-if="!$util.isEmpty(list.data)">
					<t-table :headerBackgroundColor="'#F0F2F6'">
						<t-tr header>
							<t-th v-for="(item, index) in columns" :key="index" :align="item.align">
								{{ item.name }}
							</t-th>
						</t-tr>
						<t-tr v-for="(item, index) in list.data" :key="index">
							<t-td v-for="(column, colIndex) in columns" :key="colIndex" :align="column.align" :color="column.color">
								<view>
									{{ item[column.dataIndex] || "" }}
								</view>
							</t-td>
						</t-tr>
					</t-table>
				</block>
				<block v-else>
					<AppWrapperEmpty title="暂无记录" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</view>
		</scroll-view>
		<!--		时间段选择-->
		<rangeDatePick
			:show="isShow"
			start="2000-01-01"
			end="2200-12-01"
			:value="customizationTime"
			@change="timeChange"
			@cancel="timeCancel"
			themeColor="#4C83D6" fields="day"></rangeDatePick>
    <kd-entrance></kd-entrance>
	</view>
</template>
<script>
const Month = (new Date().getMonth()+1)<10?'0'+(new Date().getMonth()+1):new Date().getMonth()+1
const time = `${new Date().getFullYear()}-${Month}-${new Date().getDate()}`;
import AppWrapperEmpty from "@/components/app-wrapper-empty";

import SelectList from "@/components/plugin/selectList";
import { getStatYj } from "@/api/statistics/index";
import { list,selectShop } from "@/mixins";
import DorpdownSelect from "@/components/module/dorpdownSelect";
import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
import {mapActions, mapGetters} from "vuex";
export default {
	components: { SelectList, AppWrapperEmpty,DorpdownSelect,rangeDatePick },
	mixins: [list,selectShop],
	computed: {		...mapGetters(["getDictionariesInfo","getLoginInfo"])	},
	data() {
		return {
			isShow:false,
			customizationTime:'',
			menuTimeObj:'',//时间分类-类型
			menuShopObj:'',//门店分类-类型
			selectTimeId:'',//选择时间id
			shopId:'',//选择分店id
			itemId:'',
			selectListData: [
				{
					title: "时间",
					key: "time",
					default: "1",
					data: [
						{
							name: "下午",
							value: "1"
						}
					]
				},
				{
					title: "全部",
					key: "shopId",
					default: "01",
					data: [
						{
							name: "瑞景店",
							value: "01"
						},
						{
							name: "加州店",
							value: "02"
						}
					]
				}
			],
			nowTime: "",
			showTimeDropdown: false,
			nowShop: "",
			showShopDropdown: false,
			columns: [
				{
					name: "姓名",
					dataIndex: "name",
					color: "info"
				},
				{
					name: "开单额",
					dataIndex: "amount",
					color: "info",
					width: 120,
					align: "center"
				},
				{
					name: "开单数",
					dataIndex: "num",
					color: "info",
					align: "center"
				}
			],
			dataList: [],
			params:{
				itemId: '',
				searchTime:'',
				startTime: "",
				endTime: "",
				shopId: "",
			},
		};
	},
	onPullDownRefresh() {
		this.resetList();
		this._list().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onLoad(e) {
		this.itemId = e.id;
		this.params.itemId = e.id;

		let dateDefaultOption = [];
		let list = this.getDictionariesInfo.dateDefaultOption;
		for (let i=0;i<list.length;i++){
			dateDefaultOption.push({name:list[i].name,id:list[i].value})
		}
		this.menuTimeObj = {title:'时间',titleChild:'时间',list: dateDefaultOption};

		this.shopId = this.getLoginInfo.shopId;

	},
	methods: {
		...mapActions(['setUserShopAll']),
		// 选择分店
		selectShopSussess(val){
			this.params.shopId = val.selectItem.id;
			this.init();
		},
		//选择时间
		selectSussess(val) {
			this.params.selectTime = this.selectTimeId;
			if(val.select=='自定义'){
				this.selectTime();
			}else{
				this.init();
			}

		},
		//选择时间-自定义时间
		selectTime(){
			this.customizationTime = [time,time],
				this.isShow = true;
		},
		//选择自定义时间确定
		timeChange(e){
			this.isShow = false;
			this.params.startTime = e[0]
			this.params.endTime = e[1]
			this.init();
		},
		//选择自定义时间取消
		timeCancel(e){this.isShow = false;},

		async init() {
			this._list();
		},
		_list() {
			return getStatYj(this.params).then(res => {
				this.completes(res);
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.ex-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-bar {
		position: absolute;
		left: 0;
		display: flex;
		width: 100%;
		// box-shadow: 0 5upx 5upx 5upx rgba($color: #000000, $alpha: 0.2);
		z-index: 20;
		.bar{
			width: 50%;
			height: 100%;
			text-align: center;
			&:nth-child(1){
				border-right: 1px solid #eeeeec;
			}
		}
	}
	.main-view {
		margin-top: 80upx;
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			background-color: #fff;
		}
		.ex-info {
			padding: 30upx;
			.info-cell {
				display: flex;
				align-items: center;
				font-size: 28upx;
				&:not(:first-child) {
					margin-top: 20upx;
				}
				.cell-label {
					width: 110upx;
					color: #666666;
				}
				.cell-value {
					margin-left: 40upx;
					color: #333;
					&.warning {
						color: #ffaf1d;
					}
					&.success {
						color: #27c325;
					}
				}
			}
		}
		.ex-table {
			/deep/.icon-info {
				color: #333333;
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
		.info-view {
			font-size: 26upx;
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
</style>
