<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9">
		<view class="u-p-32 box u-font-28">
			<view class="u-flex u-relative u-row-center">
				<view class="u-font-32">编辑</view>
				<view class="u-absolute close">
					<up-icon @click="close" :size="16" color="#000" name="close-circle-fill"></up-icon>
				</view>
			</view>
			<view class="u-m-t-36" >
				<view>排序方式：</view>
				<up-radio-group v-model="data.sortMode" placement="row" @change="groupChange">
					<up-radio shape='circle' :customStyle="{marginBottom: '8px',marginRight: '30rpx'}" v-model:checked="ele.hasPermission"
						usedAlone v-for="(ele, index) in pageData.sortType" :key="index" :name="ele.value" :label="ele.label"
						style="margin-right: 40rpx;font-size: 28rpx;">
					</up-radio>
				</up-radio-group>
			</view>
			<view class="u-m-t-36">
				<view>修改排序：</view>
				<view class="u-m-t-38">
					<view class="u-m-b-32">
						<view class="u-m-t-16">
							<up-input type="number" v-model="sort"></up-input>
						</view>
					</view>

					<view class="u-m-t-60">
						<my-button type="primary" shape="circle" @tap="save">
							<view class="u-font-32">
								保存
							</view>
						</my-button>

					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { reactive, ref, watch, computed } from 'vue';
	
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		category: {
			type: Array,
			default: () => []
		},
		item: {
			type: Object,
			default: () => {
				sort:''
			}
		}
	})
	const pageData = reactive({
		sortType: [
			{label: '默认', value: '0'},
			{label: '价格从高到低', value: '1'},
			{label: '价格从低到高', value: '2'},
			{label: '销量由高到低', value: '3'},
			{label: '销量由低到高', value: '4'},
		],
	})
	const data = ref(props.item)
	const emits = defineEmits(['update:show', 'save'])
	
	let popShow = ref(props.show)
	let sort=ref('')
	
	watch(()=>props.item.sort,(newval)=>{
		sort.value=newval
	})
	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = props.item
		}
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})

	function close() {
		popShow.value = false
	}

	function open() {

	}

	function save() {
		emits('save', {
			...data.value,
			sort:sort.value
		})
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 556rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
	}

	.close {
		position: absolute;
		right: 0;
	}

	.number {
		color: #EE4646;
	}
</style>