<template>
	<div class="whole">
		<view class="bbox">
			<up-cell-group>
				<up-cell v-for="it in list" :key="it.type" :title="it.title" isLink :label="it.desc" center @click="toPage(it.type)" />
			</up-cell-group>
		</view>
		
		<view class="red" @click="toMine">我的反馈</view>
	</div>
	
</template>

<script>
	import { reactive, toRefs } from 'vue'
	
	export default {
		setup() {
			const data = reactive({
				order_id: 0,
				list: [
					{ type: 1, title: '商品问题', desc: '若遇商品质量、发货物流、订单支付退款等问题，可选此项进行提问' },
					{ type: 2, title: '服务问题', desc: '若遇管家服务不当，可反馈我们处理' },
					{ type: 3, title: '系统问题', desc: '反馈系统功能问题或建议' }
				]
			})
			
			function toPage(type) {
				uni.navigateTo({
					url: '/pages/mine/msg/complaint?type=' + type + '&order_id=' + data.order_id
				})
			}
			
			function toMine() {
				uni.navigateTo({
					url: '/pages/mine/msg/feedback'
				})
			}
			
			return {
				...toRefs(data),
				toPage,
				toMine
			}
		},
		async onLoad(options) {
			this.order_id = options.order_id || 0
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		min-height: 100vh;
		background-color: $uni-bg-color;
	}
	.red{
		width: 160rpx;
		margin: 40rpx auto 0;
		color: #f00;
		font-size: 30rpx;
		text-align: center;
	}
	.bbox{
		background-color: #fff;
	}
</style>

<style scoped>
	.bbox ::v-deep .u-cell__title-text{
		display: block;
	}
</style>
