<template>
	<view class="user-order-refund" v-if="detail.id">
		<view class="fill-base mt-md ml-md mr-md pd-lg radius-34">
			<view class="flex-between pb-lg b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont icon-dianpu mr-sm"></i>
					<view class="f-title c-title text-bold max-446 ellipsis">{{detail.store_info.title}}</view>
				</view>
				<view class="f-paragraph c-title"
					:class="[{'c-warning': detail.pay_type < 3 && detail.pay_type != -1},{'c-success': detail.pay_type == 3}]">
					{{statusType[detail.pay_type]}}
				</view>
			</view>
			<block v-for="(item,index) in detail.order_goods" :key="index">
				<view @tap="handerRadioChange(index)" class="item-child flex-warp"
					:class="[{'mt-lg':index==0},{'mt-md':index!=0}]">
					<i class="iconfont flex-y-center mr-md"
						:class="[{'icon-xuanze':!item.checked},{'icon-xuanze-fill':item.checked}]"
						:style="{color:item.checked ? primaryColor : ''}"></i>
					<image mode="aspectFill" lazy-load class="goods-img box-shadow-mini radius-16"
						:src="item.goods_cover">
					</image>
					<view class="flex-1 ml-lg">
						<view class="f-paragraph c-title text-bold ellipsis"> {{item.goods_name}} </view>
						<view class="f-caption c-title ellipsis"> {{item.spe_name}} </view>
						<view class="f-caption c-warning mt-sm" v-if="item.integral_id">{{item.integral}}积分</view>
						<view class="flex-y-baseline mt-sm">
							<view class="flex-1 f-paragraph c-warning">¥{{item.singe_pay_price}} </view>
							<view class="flex-warp" v-if="item.can_refund_num > 1">
								<view class="add-remove-item flex-center">
									<i @tap.stop="changeNum(index,-1)"
										class="iconfont icon-remove-circle c-caption"></i>
									<view class="number flex-center f-desc pl-sm pr-sm">{{item.apply_num}}
									</view>
									<i @tap.stop="changeNum(index,1)" class="iconfont icon-add-circle"
										:style="{color:primaryColor}"></i>
								</view>
							</view>
							<block v-else>
								<view class="c-paragraph">x{{item.apply_num}}</view>
							</block>
						</view>
					</view>
				</view>
			</block>
			<view class="mt-lg pt-lg pb-lg f-paragraph c-title b-1px-tb">
				<view class="flex-between">
					<view>商品金额</view>
					<view>¥{{detail.can_refund_price}}</view>
				</view>
				<block v-if="detail.send_type == 2">
					<view class="flex-between mt-sm">
						<view class="flex-y-baseline">配送费<view class="f-icontext c-warning ml-sm">发货前全部商品退款将退还</view>
						</view>
						<view>¥{{detail.freight}}</view>
					</view>
				</block>
			</view>
			<view class="mt-lg f-paragraph c-title flex-between mt-sm">
				<view>合计</view>
				<view class="f-title c-warning text-bold">
					{{total_refund_integral?`${total_refund_integral}积分+${total_refund_price}元`:`${total_refund_price}元`}}
				</view>
			</view>
		</view>


		<view class="item-child mg-big pd-lg fill-base radius-34">
			<view class="f-title c-title text-bold pb-lg">退款原因</view>
			<view class="fill-body f-paragraph c-title radius-34">
				<textarea v-on:input="subForm.text = subForm.text.length>200?subForm.text.substring(0,200):subForm.text"
					v-model="subForm.text" class="pd-lg f-paragraph" style="width: 580rpx;" maxlength="200"
					placeholder="请输入退款原因" placeholder-class="c-title" />
				<view class="text-right pb-lg pr-lg">{{`${subForm.text.length}/200`}}
				</view>
			</view>
		</view>

		<view class="item-child mg-big pd-lg fill-base radius-34">
			<view class="f-title c-title text-bold">上传图片</view>
			<view class="mt-sm">
				<upload @del="imgUpload" @upload="imgUpload" :imagelist="subForm.imgs" imgtype="imgs" text="添加照片"
					:imgsize="5"></upload>
			</view>
		</view>

		<view class="space-max-footer"></view>

		<view class="refund-bottom-info fill-base fix pl-lg pr-lg">
			<view class="flex-between">
				<view @tap="selectAllItem" class="flex-y-center"><i class="iconfont mr-sm"
						:class="[{'icon-xuanze':!selectAll},{'icon-xuanze-fill':selectAll}]"
						:style="{color:selectAll?primaryColor : ''}"></i>
					全选
				</view>
				<view class="text-right flex-center">
					<view class="flex-y-center">
						<view class="f-caption c-caption mr-sm">共{{total_refund_num}}件</view>
						退款金额<view class="flex-y-baseline f-caption c-warning">¥<view class="f-title text-bold">
								{{total_refund_price}}
							</view>
						</view>
					</view>
					<view @tap.stop="toSubmit" class="common-btn flex-center ml-lg f-paragraph c-base radius"
						:style="{background:primaryColor}">提交申请</view>
				</view>
			</view>
			<view class="space-safe"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				detail: {},
				statusType: {
					'-1': '已取消',
					1: '待支付',
					2: '待发货',
					3: '待收货',
					7: '已完成',
				},
				total_refund_num: 0,
				total_refund_integral: 0,
				total_refund_price: 0,
				selectAll: false,
				selectAdd: false,
				subForm: {
					text: '',
					imgs: []
				},
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		onUnload() {
			this.$util.back()
		},
		methods: {
			...mapMutations(['updateOrderItem']),
			async initIndex() {
				let {
					id
				} = this.options
				let data = await this.$api.shop.orderInfo({
					id
				})
				let arr = []
				let can_refund_price = 0
				data.order_goods.map(item => {
					item.apply_num = item.can_refund_num
					if (item.apply_num == 0) return
					can_refund_price += item.singe_pay_price * item.apply_num
					arr.push(item)
				})
				data.can_refund_price = can_refund_price.toFixed(2)
				data.order_goods = arr
				this.detail = data
			},
			initRefresh() {
				this.initIndex()
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.subForm[imgtype] = imagelist;
			},
			handerRadioChange(index) {
				let item = this.detail.order_goods[index];
				let newChecked = !item.checked;
				this.detail.order_goods[index].checked = newChecked;
				this.checkIsSelectAll();
			},
			handerAddRadioChange() {
				this.selectAdd = !this.selectAdd
				this.checkIsSelectAll()
			},
			async changeNum(index, mod) {
				let item = this.detail.order_goods[index];
				let num = item.apply_num + mod;
				if (num < 1) {
					this.$util.showToast({
						title: `此商品最少可退1件`
					})
					return;
				}
				if (num > item.can_refund_num) {
					this.$util.showToast({
						title: `此商品最多可退${item.can_refund_num}件`
					})
					return;
				}
				this.detail.order_goods[index].apply_num = num;
				this.countPrice();
			},
			selectAllItem() {
				this.detail.order_goods.map((item) => {
					item.checked = !this.selectAll
				})
				this.checkIsSelectAll();
			},
			checkIsSelectAll() {
				let list = []
				this.detail.order_goods.map(item => {
					list.push(item)
				})
				this.selectAll = list.every((item) => {
					return item.checked
				})
				this.countPrice();
			},
			countPrice() {
				let price = 0
				let num = 0
				let integral = 0
				let list = []
				this.detail.order_goods.map(item => {
					list.push(item)
				})
				list.map(item => {
					if (item.checked) {
						num += item.apply_num
						integral += item.integral * item.apply_num
						price += item.singe_pay_price * item.apply_num
					}
				})
				let {
					freight,
					pay_type,
					all_goods_num
				} = this.detail
				let freight_price = all_goods_num == num && pay_type == 2 ? freight * 1 : 0
				this.total_refund_num = num
				this.total_refund_integral = integral
				this.total_refund_price = price.toFixed(2) * 1 + freight_price
			},
			// 提交申请
			async toSubmit() {
				let {
					id: order_id,
					order_goods
				} = this.detail
				let list = []
				order_goods.filter(item => {
					if (item.checked) {
						list.push({
							id: item.id,
							num: item.apply_num
						})
					}
				})
				if (list.length < 1) {
					this.$util.showToast({
						title: `请选择商品`,
					});
					return
				}
				let param = this.$util.deepCopy(this.subForm)
				if (!param.text) {
					this.$util.showToast({
						title: `请输入退款原因`,
					});
					return
				}
				param.imgs = param.imgs.length > 0 ? param.imgs.map(item => {
					return item.path
				}) : []
				param = Object.assign({}, param, {
					order_id,
					list
				})

				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.shop.applyOrder(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功`,
					});
					this.updateOrderItem({
						key: 'haveOperItem',
						val: true
					})
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
						this.lockTap = false
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
		}
	}
</script>


<style lang="scss">
	.user-order-refund {


		.item-child {

			.icon-xuanze,
			.icon-xuanze-fill {
				font-size: 38rpx;
				height: 130rpx;
			}

			.goods-img {
				width: 130rpx;
				height: 130rpx;
			}

			.ellipsis {
				max-width: 412rpx;
			}

			.goods-spe {
				height: 44rpx;
				line-height: 44rpx;
				background: #F7F7F7;
			}

			.goods-num {
				width: 200rpx;
			}


			.textarea-info {
				background: #F7F7F7;

				.input-textarea {
					width: 570rpx;
					height: 300rpx;
				}
			}


		}

		.refund-bottom-info {
			bottom: 0;
			min-height: 110rpx;

			.iconfont {
				font-size: 38rpx;
			}

			.text-right {
				height: 110rpx;

				.order {
					margin-top: 0;
				}
			}

		}
	}
</style>
