<template>
	<view class="mask position-all" v-if="maskShow" @tap="hideTop"></view>
	<view class="u-font-28 color-333 min-page bg-gray">
		<view class="top u-fixed">
			<view class="u-flex menus u-m-t-50 u-row-between">
				<view class="u-flex u-flex-col u-row-center u-col-center" @tap="toPage(item.page)"
					v-for="(item,index) in menus.list" :key="index">
					<image :src="item.icon" class="menus-icon" mode=""></image>
					<view class="u-font-28 color-333 u-m-t-16">{{item.name}}</view>
				</view>
			</view>
			<view class=" u-relative u-m-t-22 u-p-b-22">
				<view class="u-flex u-row-between  u-p-30 u-relative">
					<view class="u-flex" @tap="showStatusToggle">
						<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="width: 486rpx;"></view>
					<view class="search-box">
						<view class="search-btn u-flex" @tap="showSearch"
							:style="{width:search.show?'694rpx':'486rpx'}">
							<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
							<view class="u-flex-1 u-p-l-10"><input v-model="search.keyword" @confirm="searchConfirm"
									type="text" placeholder-style="font-size:28rpx;" placeholder="搜索货品ID/货品编码" /></view>
							<view @tap.stop="hideSearch" v-if="search.show">取消</view>
						</view>
					</view>
				</view>

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

			</view>
		</view>

		<view class="list" :style="{'padding-top':topHeight+'px'}">
			<template v-if="product.list.length">
				<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in product.list" :key="index">
					<product-item @more="moreShow"></product-item>
				</view>
				<view style="height: 200rpx;"></view>
			</template>
			<template v-else>
				<view class="" style="margin-top: 150rpx;">
					<my-empty tips="亲，你还没有类别哦~"></my-empty>
				</view>
			</template>

		</view>
	</view>

	<view class="u-fixed bottom bg-fff ">
		<view class="u-flex u-abso">
			<view class="u-flex-1">
				<my-button @tap="addProduct" bgColor="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain
					type="primary">添加货品</my-button>
			</view>
			<view class="u-flex-1">
				<my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="ruKu">入库</my-button>
			</view>
		</view>
	</view>

	<my-action-sheet @itemClick="sheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
	<!-- <my-reportDamage ref="reportDamage" :title="'耗材报损'" :type="'consumable'" :show="report.show" :item="report.data" @affirm="affirm"></my-reportDamage> -->
</template>

<script setup>
	import color from '@/commons/color.js';
	import myEmpty from '../components/empty.vue';
	import productItem from './components/product-item.vue';
	import myReportDamage from '@/components/my-components/my-reportDamage';
	import myButton from '@/components/my-components/my-button';
	import myActionSheet from '@/components/my-components/my-action-sheet';
	import {$getStockOperate} from '@/http/yskApi/invoicing.js'
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onPullDownRefresh,
	} from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js'
	import {
		reactive,
		computed,
		ref
	} from 'vue';
	function addProduct(){
		go.to('PAGES_CATEGORY_MAN_ADD_PRO')
	}
	function ruKu(){
		go.to('PAGES_CATEGORY_MAN_RUKU')
	}
	let refMoreSheet = ref(null)
	const actionSheet = reactive({
		list: ['报损', '编辑', '清点', '入库', '出库', '删除'],
	})
	
	let reportDamage = ref(null)
	const report = reactive({
		data: {
			conIn: 960,
			conName: "味精",
			conUnit: "克",
		},
		show: false,
	})
	/**
	 * 报损确认
	 */
	function affirm () {
		console.log(2)
	}
	

	function moreShow() {
		console.log(refMoreSheet.value);
		refMoreSheet.value.open()
	}
	function sheetClick(index){
		console.log(index);
		// 报损
		switch (index){
			case 0:
				//打开报损弹窗
				reportDamage.value.open();
				break;
			default:
				break;
		}
	}
	const product = reactive({
		list: new Array(1).fill(1)
	})





	let topHeight = ref(155)

	const maskShow = computed(() => {
		return status.show || search.show
	})

	function hideTop() {
		status.show = false
		search.show = false
	}

	const search = reactive({
		keyword: '',
		show: false
	})

	function searchConfirm() {

	}

	function hideSearch() {
		search.show = false
	}

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

	const status = reactive({
		list: ['全部', '未分类'],
		active: 0,
		show: false,
		bottomHeight: 14
	})
	const statusHeight = computed(() => {
		return 30 * status.list.length + status.bottomHeight + 'px'
	})

	function changeStatusActive(i) {
		status.active = i
		status.show = false
	}

	function showStatusToggle() {
		status.show = !status.show
	}

	let allHeight = ref(0)

	function getTop() {
		let selectorQuery = uni.createSelectorQuery();
		selectorQuery.select('.top').boundingClientRect((rects) => {
			console.log(rects);
			topHeight.value = rects.height
		}).exec()
	}


	onReady(() => {
		getTop()
	})



	const menus = reactive({
		list: [{
				icon: '/pageInvoicing/static/images/icon-in.svg',
				name: '入库记录',
				page: 'PAGES_STORAGE_RECORD'
			},
			{
				icon: '/pageInvoicing/static/images/icon-out.svg',
				name: '出库记录',
				page: 'PAGES_OUTBOUND_RECORD'
			},
			{
				icon: '/pageInvoicing/static/images/icon-order.svg',
				name: '清点记录',
				page: 'PAGES_INVENTORY_RECORD'
			},
			{
				icon: '/pageInvoicing/static/images/icon-category.svg',
				name: '类别管理',
				page: 'PAGES_CATEGORY_MAN'
			}
		]
	})

	function toPage(page) {
		go.to(page)
	}
	onLoad(()=>{
		$getStockOperate({
			page:0,
			size:10,
			createdAt:[]
		})
	})
</script>

<style lang="scss" scoped>
	.list {
		padding: 28rpx;
	}

	.top {
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;

		/* #endif */
		.menus {
			padding: 0 44rpx;
		}

		.lh30 {
			line-height: 30px;
		}

		.menus-icon {
			width: 64rpx;
			height: 64rpx;
		}

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

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

		.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;
			}
		}
	}

	.mask {
		position: fixed;
		z-index: 9;
		background-color: rgba(0, 0, 0, .5);
	}

	.bottom {
		background-color: #fff;
		bottom: 0;
		left: 0;
		right: 0;
		height: 68rpx;

		.u-abso {
			bottom: 84rpx;
			left: 28rpx;
			right: 28rpx;
		}
	}
</style>