<template>
	<view class="shop-car-item">
		<view class="title u-f u-f-jcfs u-f-aic mg-bot-20">
			<text style="width: 32rpx;height: 32rpx;" :class="['mg-right-16', isChecked ? 'check' : 'uncheck']" @click="handleCheck"></text>
			<text class="fs24 fw400 light-black mg-right-10">{{item.storeName}}</text>
			<text class="fs24 fw400 light-gray mg-right-10">共{{item.storeNum}}家店通用</text>
			<image style="width: 16rpx;height: 16rpx;" src="../.././static/common/sg_right_arrow.png" />
		</view>
		<view class="u-f u-f-jcfs u-f-aic">
			<text  style="width: 32rpx;height: 32rpx;" :class="['mg-right-16', isChecked ? 'check' : 'uncheck']" @click="handleCheck"></text>
			<view>
				<image
					:src="item.goodsImage"
					style="width: 128rpx;height: 128rpx;background-color:#F9F9F9"
					:mode="'scaleToFill'"
					class="mg-right-10 border-radius-9"
				></image>
			</view>
			<view class="u-f u-f-fdc" style="flex: calc(100% - 186rpx)">
				<view class="fs28 light-black fw400 mg-bot-10 one-line-ellipsis">{{item.goodsName}}</view>
				<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
					<text class="light-gray fs24 mg-right-8">{{item.goodsSpecification}}</text>
					<text class="gray-down-arrow"></text>
				</view>
				<view class="u-f u-f-aic u-f-jcsb">
					<view class="u-f u-f-jcfs u-f-aic">
						<view class="mg-right-10">
							<text class="fs24 main-color">￥</text>
							<text class="fs32 main-color">{{item.commodityPrice}}</text>
						</view>
						<view class="fs24 light-gray delete-line">
							<text>￥</text>
							<text>{{item.goodsOriginalPrice}}</text>
						</view>
					</view>
					<view>
						<uni-number :min="1" :value="item.goodsNum" @change="handleChangeNum"></uni-number>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumber from "../.././components/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			uniNumber
		},
		emits: ['checked', 'change-num'],
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				isChecked: this.item.isChecked
			}
		},
		methods: {
			handleCheck() {
				this.isChecked = !this.isChecked
				this.$emit('checked', { shopCarId: this.item.shopCarId, isChecked: this.isChecked })
			},
			handleChangeNum(value) {
				this.$emit('change-num', { shopCarId: this.item.shopCarId, goodsId: this.item.goodsId, goodsNum: value })
			}
		},
		watch: {
			'item.isChecked': function(newVal, oldVal) {
				this.isChecked = newVal
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-car-item {
		padding: 20rpx 10rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}
	.gray-down-arrow {
		width: 16rpx;
		height: 16rpx;
		// background: url(../.././static/common/gray_down_arrow.png) no-repeat center center;
		background-size: 100%;
	}
	.small-gray-right-arrow {
		width: 16rpx;
		height: 16rpx;
		background: url(../.././static/common/sg_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}
	.uncheck {
		color: #ffffff;
		border-radius: 50%;
		border: 1rpx solid #999999;
		background-color: #ffffff;
		position: relative;
	}
	.check {
		color: #ffffff;
		border-radius: 50%;
		position: relative;
		&:before {
			content: '';
			width: 32rpx;
			height: 32rpx;
			border: 1rpx solid #FF4502;
			background-color: #FF4502;
			display: inline-block;
			border-radius: 50%;
			vertical-align: middle;
		}
		&:after {
			content: '';
			width: 20rpx;
			height: 10rpx;
			border: 4rpx solid #ffffff;
			border-top: transparent;
			border-right: transparent;
			text-align: center;
			display: block;
			position: absolute;
			top: 12rpx;
			left: 6rpx;
			vertical-align: middle;
			transform: rotate(-45deg);
		}
	}
</style>