<template>
	<view class="color-333 u-font-28">
		<view class="fixed-top bg-fff u-flex">
			<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="timeToggle">
				<text class="u-m-r-12">筛选时间</text>
				<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
				</image>
			</view>
			<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="toggleMask">
				<text class="u-m-r-12">类型</text>
				<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
				</image>
			</view>

			<view :style="{height:types.show?typesHeight:0}" class="tranistion types overflow-hide">
				<view @tap="changeTypesActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
					v-for="(item,index) in types.list" :key="index">
					<view>{{item}}</view>
					<uni-icons v-if="types.active===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
				</view>
				<view :style="{height: types.bottomHeight+'px'}"></view>
			</view>
		</view>

		<view class=" min-page bg-gray list u-p-30">
			<view class="u-flex u-m-b-30" v-if="filters.time.start&&filters.time.end">
				<view class="time-area u-font-24 color-main u-flex">
					<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
					<text class="u-p-l-10 u-p-r-10">至</text>
					<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
					<view class="u-m-l-10 u-flex" @tap="clearTime">
						<uni-icons type="clear" size="18" :color="color.ColorMain"></uni-icons>
					</view>
				</view>
			</view>

			<view class="recoreds color-fff ">
				<view class="u-font-32">统计</view>
				<view class="u-flex u-row-between u-m-t-48">
					<view class="u-flex u-flex-col u-row-center u-col-center">
						<view>入库数量</view>
						<view class="u-font-32 u-m-t-10 font-bold">0</view>
					</view>
					<view class="u-flex u-flex-col u-row-center u-col-center">
						<view>出库数量</view>
						<view class="u-font-32 u-m-t-10 font-bold">0</view>
					</view>
				</view>
				<view class="u-flex u-row-between u-m-t-24">
					<view class="u-flex u-flex-col u-row-center u-col-center">
						<view>清点次数</view>
						<view class="u-font-32 u-m-t-10 font-bold">0</view>
					</view>
				</view>
			</view>
			<template v-if="page.list.length">
				<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
				</view>
			</template>
			<template v-else>
				<view class="" style="margin-top: 150rpx;">
					<my-empty tips="亲，你还没有记录哦~"></my-empty>
				</view>
			</template>
			
		</view>


	</view>
	<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
	<my-mask ref="mask" @close="hideType"></my-mask>
</template>

<script setup>
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import color from '@/commons/color';
	import myEmpty from '../components/empty.vue';
	import myMask from '@/components/my-components/my-mask'
	import myDatePickerview from '@/components/my-components/my-date-pickerview'
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	
	const page=reactive({
		list:[]
	})


	const types = reactive({
		list: ['全部', '入库', '出库', '清点'],
		active: 0,
		show: false,
		bottomHeight: 14
	})

	function hideType() {
		types.show = false
	}
	const typesHeight = computed(() => {
		return 30 * types.list.length + types.bottomHeight + 'px'
	})

	function changeTypesActive(i) {
		types.active = i
		types.show = false
		toggleMask()
	}

	function showTypesToggle() {
		types.show = !types.show
	}


	const filters = reactive({
		time: {
			start: '',
			end: ''
		}
	})

	function clearTime() {
		filters.time = ''
		filters.end = ''
	}

	const datePicker = ref(null)

	function datePickerConfirm(e) {
		console.log(e);
		filters.time.start = e.start
		filters.time.end = e.end
	}

	function timeToggle() {
		datePicker.value.toggle()
	}


	const mask = ref(null)

	function toggleMask(show) {
		types.show = !types.show
		mask.value.toggle()
	}

	onLoad(opt => {
		console.log(opt);
		uni.setNavigationBarTitle({
			title: opt.title || ''
		})
	})
</script>

<style lang="scss" scoped>
	.fixed-top {
		z-index: 10;
	}

	.recoreds {
		background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
		box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 32rpx 40rpx 40rpx 48rpx;
		position: relative;	
		overflow: hidden;
		&::after{
			content: '';
			top: -112rpx;
			border-radius: 50%;
			display: block;
			position: absolute;right: 56rpx;
			width: 224rpx;
			box-shadow: 0 0 1px #666;
			height: 224rpx;
			background: linear-gradient( 180deg, rgba(103,204,254,0.6) 0%, rgba(144,87,255,0) 100%);
		}
	}

	.types {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.time-area {
		background: #E6F0FF;
		border-radius: 100px;
		padding: 10rpx 20rpx;
	}

	.icon-arrow-down-fill {
		width: 16rpx;
		height: 10rpx;
	}

	.list {
		margin-top: 52px;
	}
</style>