<template>
	<view class="ConsumablesTop">
		<view @tap="showStatus = !showStatus" style="display: flex;align-items: center;">
			{{datas.title}}<up-icon name="arrow-down" size="12"></up-icon>
		</view>
		<view>
			<input v-model="datas.conName" @input="inputEvent" type="text" placeholder="请输入耗材名称" />
		</view>
		<view @tap="toUrl('PAGES_ADD_TYPE') ">
			新增类别
		</view>
	</view>

	<view :style="{height:showStatus?statusHeight:0}" class="tranistion status  overflow-hide">
		<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
			v-for="(item,index) in datas.typeLists" :key="index">
			<view :class="{'color-main':nowStatusIndex===index}">{{item}}</view>
			<uni-icons v-if="nowStatusIndex===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
		</view>
		<view :style="{height: '14px'}"></view>
	</view>

	<view class="ConsumablesConent" v-if="datas.list.length">
		<view v-for="(item,index) in datas.list" :key="index">
			<view> {{item.conName}}
				<view> {{item.consGroupName}} </view>
			</view>
			<view>
				<view>
					<view style="color: #333333;"> {{item.conUnit}} </view>
					<view> 耗材单位 </view>
				</view>
				<view>
					<view style="color: #318AFE;"> {{item.stockNumber}} </view>
					<view> 剩余库存 </view>
				</view>
			</view>
			<view>
				<view style="background-color: #fff;" @tap="show=true;showData = filtersSproductId(item.product)">
					所属商品:
					{{ filtersSproductId(item.product).length>7?filtersSproductId(item.product).substring(0,6)+'...':filtersSproductId(item.product)}}
				</view>
				<view class="">
					<up-button shape="circle" type="primary" size="mini" color="#999"
						@tap="toUrl('PAGES_VIEWRECORDS',{item:JSON.stringify(item)})" :plain="true"
						text="查看记录"></up-button>&nbsp;&nbsp;
					<up-button type="primary" shape="circle" size="mini" @click="toggle(item)" :plain="true"
						text="更多操作"></up-button>
				</view>
			</view>
		</view>
		<view style="background-color: rgba(0,0,0,0); height: 200rpx;"></view>
	</view>
	<view v-else style="text-align: center;">
		<image src="./bg.png" style="width: 325rpx;height: 335rpx;" mode=""></image>
		<view style="font-size: 28rpx;color: #999;">暂无数据</view>
	</view>
	<view class="ConsumablesBottom">
		<view @tap="toUrl('PAGES_ADD_CONSUMABLES')">
			新增耗材
		</view>
		<view @tap="toUrl('PAGES_SUPPLIER')">
			供应商管理
		</view>
	</view>
	<my-action-sheet @itemClick="sheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
	<my-reportDamage ref="reportDamage" title="耗材报损" :item="report.data" @affirm="affirm"></my-reportDamage>

	<up-popup :show="show" :round="18" mode="center" >
		<view class="zhezhaopop">
			<view class="">
				<span></span>
				<span></span>
				<up-icon @tap="show=false" name="close-circle-fill"></up-icon>
			</view>
			<view class="">
				{{showData}}
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref, reactive, computed } from 'vue';
	import myActionSheet from './components/my-action-sheet';
	import myReportDamage from './components/my-reportDamage';
	import color from '@/commons/color.js';
	import go from '@/commons/utils/go.js';
	import { hasPermission } from '@/commons/utils/hasPermission.js';
	import { getConsPage,getConsGrpupList } from '@/api/cons.js';
	
	let reportDamage = ref(null)
	let refMoreSheet = ref(null)
	let show = ref(false)
	let showData = ref()
	const report = reactive({
		data: {
			// thumbnail: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240918/a17a62b7b55a4b65a2a2542050672b34.png',
			name: "美式咖啡",
			// title: "商品报损",
			unit: "杯",
		},
	})
	let datas = reactive({
		list: [],
		conName: "",
		showtwo: false,
		status: '0',
		// 类型列表
		typeList: [],
		// 类型列表渲染数组
		typeLists: ['全部'],
		title: '耗材类型'
	})
	const statusHeight = computed(() => {
		return 30 * datas.typeLists.length + 14 + 'px'
	})

	const actionSheet = reactive({
		list: ['报损', '编辑', '清点', '入库', '出库', ],
		activeId: null,
		active: ""
	})
	let showStatus = ref(false)
	let nowStatusIndex = ref(0)
	onShow(() => {
		getList()
		// 获取分类列表
		gettbConsTypeList()
	})

	/**
	 * 获取耗材列表
	 */
	async function getList(d = "") {
		getConsPage({
			conName: datas.conName,
			conTypeId: d,
			size: 100,
			page: 0
		}).then(res => {
			datas.list = res.records
		})
	}
	
	/**
	 * 获取耗材类别
	 */
	let gettbConsTypeList = () => {
		datas.typeLists = ['全部']
		getConsGrpupList({
			page: 0,
			size: 30,
			shopId: uni.getStorageSync("shopId"),
		}).then(res => {
			datas.typeList = res
			res.forEach(ele => {
				datas.typeLists.push(ele.name)
			})
		})
	}
	function changeNowStatusIndex(i) {
		nowStatusIndex.value = i
		showStatus.value = false
		if (i == 0) {
			datas.title = '全部'
			getList()
		} else {
			datas.title = datas.typeList[i - 1].conTypeName
			getList(datas.typeList[i - 1].id)
		}
	}

	/**
	 * 报损确认
	 */
	function affirm() {
		uni.showToast({
			title:'操作成功',
			icon:'none'
		})
		getList()
		// 获取分类列表
		gettbConsTypeList()
	}

	let toggle = (d) => {
		refMoreSheet.value.open()
		actionSheet.active = d
		actionSheet.activeId = d.id
		report.data.consId = d.id
	}

	let sheetClick = (index) => {
		if (index == 0) {
			// 权限
			hasPermission('允许提交报损').then(ele => {
				if (ele) {
					//打开报损弹窗
					reportDamage.value.open(actionSheet.activeId);
					report.data.name = actionSheet.active.conName
					report.data.unit = actionSheet.active.conUnit
				}
			})
		} else if (index == 1) {
			toUrl('PAGES_EDIT_CONSUMABLES', {
				item: JSON.stringify(actionSheet.active)
			})
		} else if (index == 2) {
			hasPermission('允许耗材盘点').then(ele => {
				if (ele) {
					toUrl('PAGES_SALES_INVENTORYCHECK', {
						item: JSON.stringify(actionSheet.active)
					})
				}
			})
		} else if (index == 3) {
			hasPermission('允许耗材入库').then(ele => {
				if (ele) {
					toUrl('PAGES_SALES_WAREHOUSEENTRY', {
						consId: actionSheet.activeId,
						item: JSON.stringify(actionSheet.active)
					})
				}
			})
		} else if (index == 4) {
			hasPermission('允许耗材出库').then(ele => {
				if (ele) {
					toUrl('PAGES_SALES_OUTBOUND', {
						consId: actionSheet.activeId,
						item: JSON.stringify(actionSheet.active)
					})
				}
			})
		}
	}
	// async function viewpermission(d) {
	// 	let res = await hasPermission(d)
	// 	return res
	// }
	
	function inputEvent(d) {
		datas.conName = d.detail.value.replace(/\s*/g, "");
		getList()
	}

	function filtersSproductId(d) {
		if (!d) return ''
		// const dataArr = d.split(',')
		let str = ''
		d.forEach(ele => {
			// str += ele.name
			// const startIndex = ele.indexOf('_')
			// const productId = ele.slice(0, startIndex)
			// const productName = ele.slice(startIndex + 1, ele.length)
			str = ele.name + ',' + str
		})
		return str
	}
	let toUrl = (url, d) => {
		go.to(url, d)
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="less">
	ul,
	li {
		list-style: none;
		padding: 0;
	}

	.ConsumablesTop {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: 22rpx;
		background-color: #fff;

		>view:first-child,
		>view:last-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}

		>view:last-child {
			color: #318AFE;
		}

		>view:nth-child(2) {
			width: 414rpx;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;

			background: #F9F9F9;
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;

		}
	}

	.ConsumablesConent {
		min-height: 80vh;
		background-color: #f9f9f9;
		padding-top: 1rpx;

		>view {
			width: 694rpx;
			height: 332rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 32rpx 16rpx;
			box-sizing: border-box;
			margin: 32rpx auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			>view:first-child {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				.df;

				>view {
					// width: 90rpx;
					padding: 2rpx 10rpx;
					height: 36rpx;
					line-height: 36rpx;
					background: #EBF4FC;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					text-align: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #318AFE;
					margin-left: 12rpx;
				}
			}

			>view:nth-child(2) {
				width: 662rpx;
				height: 128rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				.df;
				justify-content: space-around;
				text-align: center;

				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}

			>view:last-child {
				.df;
				justify-content: space-between;

				>view:last-child {
					.df;

					>button {
						width: 128rpx;
						height: 48rpx;
						background: #FFFFFF;
						// border-radius: 28rpx 28rpx 28rpx 28rpx;
					}

					>button:last-child {
						margin-left: 24rpx;
					}
				}
			}
		}
	}

	.ConsumablesBottom {
		.df;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);

		>view {
			width: 346rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #318AFE;

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
		}

		>view:first-child {
			border-radius: 56rpx 0rpx 0rpx 56rpx;
			color: #318AFE;
			background-color: #fff;
		}

		>view:last-child {
			border-radius: 0 56rpx 56rpx 0;
			background-color: #318AFE;
			color: #fff;
		}
	}

	.popup-content {
		padding: 15px;
		background-color: #fff;
		margin: 0 auto;

		>view {
			height: 88rpx;
			line-height: 88rpx;
			width: 660rpx;
			border-top: 10rpx solid #f9f9f9;
			text-align: center;
		}

		.operate {
			>view {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				width: 660rpx;
				border-bottom: 2rpx solid #E5E5E5;

			}
		}
	}

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

	.zhezhaopop {
		padding: 34rpx 32rpx;
		width: 594rpx;

		>view:first-child {

			.df;
			justify-content: space-between;

			>span:nth-child(2) {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}

	}

	.df() {
		display: flex;
		align-items: center;
	}
</style>