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

	<view class="ConsumablesConent" v-if="pageData.list.length">
		<view v-for="(item, index) in pageData.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.productList);
					"
				>
					所属商品:
					{{ filtersSproductId(item.productList).length > 7 ? filtersSproductId(item.productList).substring(0, 6) + '...' : filtersSproductId(item.productList) }}
				</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-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>
	<up-action-sheet :round="10" @select="actionSelect" @close="actions.show = false" cancelText="取消" :actions="actions.list" :show="actions.show"></up-action-sheet>
	<up-picker :show="pageData.show" :columns="pageData.typeList" keyName="name" @cancel="pageData.show = false" @confirm="confirmConsGroup"></up-picker>
	<!-- 批量入库悬浮按钮 -->
	<view class="fixed-in-btn" @click="toBatchPage">
		<image class="img" src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/bd8cde310fc247f6855ad39fbda4d75d.png" mode="widthFix"></image>
	</view>
</template>

<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app';
import { ref, reactive, computed } from 'vue';
import myReportDamage from './components/my-reportDamage';

import go from '@/commons/utils/go.js';
import { hasPermission } from '@/commons/utils/hasPermission.js';
import { getConsPage, getConsGrpupList } from '@/http/api/cons.js';

let reportDamage = ref(null);
let show = ref(false);
let showData = ref();
const report = reactive({
	data: {
		name: '美式咖啡',
		unit: '杯'
	}
});
let pageData = reactive({
	show: false,
	query: {
		conName: '',
		consGroupId: '',
		size: 100,
		page: 1
	},
	list: [],
	// 类型列表
	typeList: [],
	title: '耗材类型'
});

/**
 * 更多操作列表
 */
const actions = reactive({
	list: [
		{ name: '报损', color: 'red', fontSize: '16' },
		{ name: '编辑', color: '#333', fontSize: '16' },
		{ name: '清点', color: '#333', fontSize: '16' },
		{ name: '入库', color: '#333', fontSize: '16' },
		{ name: '出库', color: '#333', fontSize: '16' }
	],
	data: null,
	show: false
});

onShow(() => {
	getList();
	gettbConsTypeList();
});

// 跳转去批量入库
function toBatchPage() {
	uni.navigateTo({
		url: '/pageConsumables/batch_in'
	});
}

/**
 * 获取耗材列表
 */
async function getList() {
	getConsPage(pageData.query).then((res) => {
		pageData.list = res.records;
	});
}

/**
 * 获取耗材类别
 */
let gettbConsTypeList = () => {
	getConsGrpupList({
		page: 1,
		size: 30
	}).then((res) => {
		pageData.typeList = [[{ name: '全部', id: '' }, ...res]];
	});
};

function confirmConsGroup(e) {
	pageData.show = false;
	pageData.query.consGroupId = e.value[0].id;
	pageData.title = e.value[0].name;
	getList();
}

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

let toggle = (d) => {
	// refMoreSheet.value.open()
	actions.show = true;
	actions.actions = d;
	report.data.consId = d.id;
};

let actionSelect = (e) => {
	if (e.name == '报损') {
		// 权限
		hasPermission('允许提交报损').then((ele) => {
			if (ele) {
				//打开报损弹窗
				reportDamage.value.open(actions.actions.id);
				report.data.name = actions.actions.conName;
				report.data.unit = actions.actions.conUnit;
			}
		});
	} else if (e.name == '编辑') {
		toUrl('PAGES_ADD_CONSUMABLES', {
			item: JSON.stringify(actions.actions)
		});
	} else if (e.name == '清点') {
		hasPermission('允许耗材盘点').then((ele) => {
			if (ele) {
				toUrl('PAGES_SALES_INVENTORYCHECK', {
					item: JSON.stringify(actions.actions)
				});
			}
		});
	} else if (e.name == '入库') {
		hasPermission('允许耗材入库').then((ele) => {
			if (ele) {
				toUrl('PAGES_SALES_WAREHOUSEENTRY', {
					consId: actions.actions.id,
					item: JSON.stringify(actions.actions)
				});
			}
		});
	} else if (e.name == '出库') {
		hasPermission('允许耗材出库').then((ele) => {
			if (ele) {
				toUrl('PAGES_SALES_OUTBOUND', {
					consId: actions.actions.id,
					item: JSON.stringify(actions.actions)
				});
			}
		});
	}
};

function inputEvent(d) {
	pageData.query.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;
}
.fixed-in-btn {
	position: fixed;
	right: 20upx;
	bottom: 20%;
	z-index: 999;
	.img {
		width: 120upx;
	}
}
</style>
