<template>

	<view class="item bg-fff border-r-12  u-font-28">
		<view class="">
			<view class="">食物</view>
		</view>
		<view class="u-font-24 u-flex u-m-t-10">
			<view class="u-m-r-10">炒面</view>
			<view class="u-m-r-10">米饭</view>
			<view>鸡蛋</view>
		</view>


		<view class="u-flex u-row-right u-m-t-20">
			<view class="u-flex ">
				<my-button shape="circle" height="56" type="cancel" @tap="toRcored">
					<view class="color-999">查看记录</view>
				</my-button>
			</view>
			<view class="u-flex u-m-l-30">
				<my-button shape="circle" height="56"  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'
	import color from '@/commons/color.js'
	import {
		reactive
	} from 'vue';
	function toRcored(){
		go.to('PAGES_CATEGORY_MAN_RECORDS',{
			title:'分类：测试分类',
			id:1
		})
	}
	function retract() {
		console.log('retract');
		uni.showModal({
			title: '提示',
			content: '确定删除该记录?删除后，将恢复改动前的数量',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const props = defineProps({
		index: {
			type: Number
		},
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const emits = defineEmits(['more'])

	function more() {
		emits('more', props.index)
	}

	let state = reactive({
		showRemark: false
	})

	function toggleRemark() {
		state.showRemark = !state.showRemark
	}
</script>

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

		.title-min-width {
			min-width: 132rpx;
		}

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

	.addNumber {
		position: absolute;
		left: 100%;
		top: 50%;
		transform: translateY(-50%);
	}

	.icon-down {
		transform: rotate(90deg);
	}

	.icon-up {
		transform: rotate(-90deg);
	}
</style>