<template>
	<view class="item bg-fff border-r-12">
		<view class="u-flex u-text-left u-row-left">
			<view class="name">名称</view>
			<view class="category u-flex u-m-l-10">
				<view class="tag">分类</view>
			</view>
			<view class="id color-999 u-font-24 bg-gray u-m-l-10">
				ID:1234
			</view>
		</view>
		<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
			<view class="u-text-right">
				<view>
					<text>货品编码</text>
					<text class="u-m-l-10">3</text>
				</view>
				<view class="u-m-t-10">
					<text>供应商名称</text>
					<text class="u-m-l-10">2</text>
				</view>
			</view>
			<view class="u-flex-1 u-flex u-row-right">
				<view>
					<view class="color-main font-bold">22</view>
					<view class="u-m-t-10">剩余库存</view>
				</view>

			</view>
		</view>

		<view class="u-flex u-row-right u-m-t-20">
			<view class="u-flex u-m-r-30">
				<my-button shape="circle" height="70" type="default" @tap="toRcored">查看记录</my-button>
			</view>
			<view class="u-flex">
				<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import myButton from '@/components/my-components/my-button';
	import go from '@/commons/utils/go.js'
	function toRcored(){
		go.to('PAGES_TYPE_RECORD',{
			title:'测试分类',
			id:1
		})
	}
	const props = defineProps({
		index: {
			type: Number
		},
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const emits = defineEmits(['more'])

	function more() {
		emits('more', props.index)
	}
</script>

<style lang="scss">
	.item {
		padding: 32rpx 32rpx 28rpx 28rpx;

		.tag {
			color: $my-main-color;
			background-color: rgb(234, 244, 255);
			border-radius: 8rpx;
			padding: 2rpx 10rpx;
			font-size: 24rpx;
		}

		.id {
			padding: 2rpx 10rpx;
			border-radius: 8rpx;
		}

		.info {}
	}
</style>