<template>
	<!-- 取消订单弹窗 -->
	<view class="">
		<up-popup :show="showCancel" mode="bottom" :round="10" @close="close" catchtouchmove="preventD">
			<view class="cancel">
				<view class="cancel-title">订单取消</view>
				<view class="tip">请选择取消订单原因</view>
				<view class="cancel-list">
					<view class="cancel-list-item" v-for="item in list" :key="item.id" @click="checked = item.id">
						<text>{{item.name}}</text>
						<span class="iconfont icon-checked" v-if="item.id === checked"></span>
						<span class="iconfont icon-circle" v-else></span>
					</view>
				</view>
				<view class="cancel-btn">
					<view class="btn1" @click="close">暂不取消</view>
					<view class="btn2" @click="cancelOrder">确定取消</view>
				</view>
			</view>
		</up-popup>
	</view>

</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { showToast } from '../common.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		props: {
			showCancel: {
				type: Boolean,
				default: false
			}
		},
		setup(props, context) {
			const data = reactive({
				list: [
					{ id: 0, name: '价格有点贵' },
					{ id: 1, name: '规格/款式/数量拍错' },
					{ id: 2, name: '收货地址拍错' },
					{ id: 3, name: '暂时不需要了' },
					{ id: 4, name: '其他' }
				],
				checked: '',
				Color: uni.getStorageSync('theme_color'),
				cartColor: Style[uni.getStorageSync('theme_index') * 1].cartColor
			})

			function change(e) {
				console.log(e)
				data.checked = e.detail
			}

			function cancelOrder() {
				if (data.checked !== '') {
					context.emit('cancelOrder', data.list[Number(data.checked)].name)
					data.checked = ''
				} else {
					showToast('请选择取消订单原因')
				}
			}

			function close() {
				context.emit('close')
				data.checked = ''
			}

			function preventD() {
				return
			}
			return {
				...toRefs(data),
				close,
				change,
				cancelOrder,
				preventD
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cancel {
		font-size: 28rpx;
		padding: 30rpx 30rpx;
		&-title {
			text-align: center;
			padding: 0 0 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			letter-spacing: 5rpx;
		}
		.tip {
			color: #98989f;
			padding: 20rpx 0;
		}
		&-list {
			padding-bottom: 60rpx;
			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
			}
		}

		&-btn {
			display: flex;
			.btn1,
			.btn2 {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
			}
			.btn1 {
				background-color: v-bind('cartColor');
				border-radius: 40rpx 0px 0px 40rpx;
			}
			.btn2 {
				background-color: v-bind('Color');
				border-radius: 0rpx 40rpx 40rpx 0rpx;
			}
		}
	}
	.icon-checked{
		color: v-bind('Color');
	}
</style>
