<template>
	<view class="color-333 u-font-28">
		<up-sticky :offset-top="0">
			<view class=" bg-fff u-flex u-p-l-30 u-row-between">
				<view class="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 no-wrap" :class="{'color-main':pageData.query.beginDate&&pageData.query.endDate}">筛选时间</text>
						<image src="/pageProduct/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
							mode="">
						</image>
					</view>
					<view class="u-flex u-m-l-60 u-p-t-30 u-p-b-30  u-flex-1 u-row-center" @tap="showTypesToggle">
						<text class="u-m-r-12" v-if="types.active===''"> 选择类型</text>
						<text class="u-m-r-12 no-wrap color-main" v-else>{{types.list[types.active].text}}</text>
						<image src="/pageProduct/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
							mode="">
						</image>
					</view>
				</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.text}}</view>
						<uni-icons v-if="types.active===index" type="checkmarkempty" :color="$utils.ColorMain"></uni-icons>
					</view>
					<view :style="{height: types.bottomHeight+'px'}"></view>
				</view>
			</view>
		</up-sticky>
		

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

		
			<template v-if="pageData.list.length">
				<view class="u-m-b-28 " v-for="(item,index) in pageData.list" :key="index">
					<my-list-item :data="item" ></my-list-item>
				</view>
				<my-pagination :size="pageData.size" :totalElements="pageData.totalElements"
					@change="pageChange"></my-pagination>
				<!-- <uni-load-more :status="pageData.status" /> -->
			</template>
			<template v-if="pageData.hasAjax&&!pageData.list.length">
				<view class="" style="margin-top: 150rpx;">
					<my-img-empty tips="暂无记录"></my-img-empty>
				</view>
			</template>

		</view>

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

</template>

<script setup>
	import { onLoad, onReady, onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
	import { ref, reactive, computed, watch } from 'vue';
	
	import myListItem from './components/list-item.vue';
	
	import { $invoicingType } from '@/commons/goodsData.js'
	import { productStockFlow  } from '@/http/api/product.js'
	
	
	const search = reactive({
		keyword: '',
		show: false
	})

	function searchConfirm() {

	}

	function hideSearch() {
		search.show = false
		maskHide()
	}

	function showSearch() {
		search.show = true
		types.show = false
		maskShow()
	}


	// 库存分类
	const types = reactive({
		list:$invoicingType,
		active: '',
		show: false,
		bottomHeight: 14
	})

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

	function changeTypesActive(i) {
		types.active = i
		pageData.query.inOutItem = types.list[i].value
		types.show = false
		toggleMask()
	}
	
	/**
	 * 类型选择
	 */
	function showTypesToggle() {
		types.show = !types.show
		maskShow()
	}
	
	function resetQuery(){
		pageData.query.page = 1
	}
	function clearTime() {
		pageData.query.beginDate = ''
		pageData.query.endDate = ''
		resetQuery()
		init()
	}

	const datePicker = ref(null)
	const mask = ref(null)
	const pageData = reactive({
		query: {
			page: 1,
			size: 10,
			productId:'',
			inOutItem:'',
			beginDate:'',
			endDate:'',
		},
		totalElements: 0,
		list: [],
		status: 'noMore',
		hasAjax:false,
		changeSum:0
	})
	watch(()=>types.active,(newval)=>{
		resetQuery()
		init()
	})
	
	onLoad(opt => {
		console.log(opt);
		Object.assign(pageData.query,opt)
		init()
	})
	async function init() {
		const res = await productStockFlow(pageData.query)
		pageData.hasAjax=true
		pageData.list = res.records
		pageData.totalElements = res.totalRow
	}
	function timeToggle() {
		datePicker.value.toggle()
	}
	function datePickerConfirm(e) {
		pageData.query.beginDate = e.start
		pageData.query.endDate = e.end
		resetQuery()
		init()
	}
	
	function toggleMask(show) {
		mask.value.toggle()
	}
	
	function maskShow() {
		mask.value.open()
	}
	
	function maskHide() {
		mask.value.close()
	}
	
	// 页数改变事件
	function pageChange(page) {
		pageData.query.page = page
		init()
	}
</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%);
		}
	}

	.search-box {
		background-color: #fff;
		padding: 16rpx 0;
		top: 0;
		bottom: 0;
		position: absolute;
		right: 30rpx;
		display: flex;

		.search-btn {
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			// width: 164rpx;
			transition: all .3s ease-in-out;
			background-color: rgb(247, 247, 247);
			border-radius: 100px;
		}
	}

	.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 {
	}
</style>