<template>
	<!-- popup -->
	<view>
		<uni-popup ref="deliveryOrderPopup" type="bottom" @change="changePopup">
			<view class="text-bold text-gray text-lg text-center left-top-sm-bar" style="position: absolute;top: 15px;right: 20px;" data-popup="deliveryOrderPopup" @click="closePopup"><text
					class="cuIcon-close"></text></view>
			<view class="bg-white padding" style="padding-top: 30rpx;width: 100%;">
				<view class="text-center">
					<text class="text-black" style="font-size: 34upx;">包安装/包服务商品安装确认</text>
				</view>
				<view>
					<view class="solid-bottom padding-bottom-sm">
						<view v-if="columnTitleArr.length" class="flex justify-between margin-tb-sm">
							<view class="basis-df">{{columnTitleArr[0]}}</view>
							<view class="flex justify-end text-center basis-df">
								<view v-for="(title, index) in columnTitleArr" v-if="index >= 1" class="basis-df">{{title}}</view>
							</view>
						</view>
						<view class="flex justify-between margin-tb-xs align-center" v-for="(item,index) in pickedList" :key="index">
							<view class='cu-tag padding basis-lg'>{{item.goodsName}}</view>
							<view class="flex justify-end basis-df text-center align-center">
								<view class="basis-df">{{item.goodsNum}}</view>
								<view class="basis-df">{{item.goodsNum}}
								</view>
							</view>
						</view>
					</view>
					<view class="padding-top-sm padding-bottom-xs flex justify-between align-center">
						<text class="margin-right-sm">本单可派服务金额：<text class="text-red text-lg">{{curOrder.serverMoney}}</text></text>
					</view>
					<view class="padding-bottom-sm flex justify-between align-center">
						<text class="margin-right-sm" style="width: 150rpx;">服务金额</text>
						<input type="digit" class="line-input radius-input" v-model="dispatchTotalPrice" placeholder="请输入服务总金额 (你对服务单跟进负责)"></input>
					</view>
				</view>
				
				<view class="padding-tb" v-if="serviceShop">
					<view class="text-black text-bold flex justify-between">
						<text>安装/服务/施工门店</text>
						<text @click="goChooseShop">更多></text>
					</view>
					<view class="flex-sub flex margin-top-sm" @click="openShopLocation(serviceShop)">
						<view style="width: 150rpx;height: 150rpx;margin-right:10px;">
							<image style="width: 100%;height: 100%;" :src="serviceShop.imageUrl" mode="aspectFill"></image>
						</view>
						<view class="flex-sub">
							<view class="text-bold" style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
							客户已选: {{serviceShop.shopName}}
							</view>
							<view class="padding-tb-xs" style="position: relative;">
								<!-- <view class='cu-tag round bg-orange light'>
									<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 1">到店服务</text>
									<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 2">到店+配送（服务）</text>
									<text class="text-black" v-if="pickedProductList[0].product[0].storeService == 3">到店+上门（服务）</text>
								</view> -->
								<view class="margin-lr-sm" style="display: inline-block;" v-if="serviceShop.distance">
									<view class="cu-tag bg-red" style="padding: 0 2px;height: auto;">距离客户</view>
									<text class="text-gray" style="vertical-align: middle;">{{serviceShop.distance}}</text>
								</view>
								<image src="/static/navigation.png" style="width: 50rpx;height: 50rpx;display: inline-block;position: absolute;top: 5px;right: -10px;"></image>
							</view>
							<view style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{serviceShop.provinceName + serviceShop.cityName + serviceShop.countryName + serviceShop.streetName + serviceShop.address}}</view>
							<view class="flex justify-between align-center margin-bottom-xs padding-top">
								<view>
									<text class="text-bold text-lg margin-lr-xs">店长：{{serviceShop.phone}}</text>
								</view>
								<button class="cu-btn line-main-color" @click.stop="makePhoneCall(serviceShop.phone)">拨打</button>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-black" @tap="closePopup">取消</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" @click="assignWork">提交</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		emits: ['confirmFeedback', 'close'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => {}
			},
			product: {
				type: Object,
				default: {}
			},
			orderType: {
				type: Number,
				default: 0
			}
		},
		watch: {
			show: {
				handler(newVal) {
					if(newVal) {
						this.$nextTick(() => {
							this.$refs.deliveryOrderPopup.open()
							this.loadData(this.data)
						})
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				dispatchTotalPrice: null,
				showDispatchPriceModal: false,
				columnTitleArr: ['购买机型', '待派单', '派单量'],
				curOrder: {},
				pickedList: [],
				workerName: null,
				curUserInfo: null,
				serviceShop: null,
				serviceCancelled: null
			}
		},
		onReady() {
			uni.$on('chooseShop', this.chooseShop)
		},
		onUnload() {
			uni.$off('chooseShop');
		},
		methods: {
			changePopup(e) {
				console.log(e);
				if(!e.show) {
					this.closePopup()
				}
			},
			closePopup() {
				this.$emit('close')
			},
			dateChange(e) {
				this.date = e.detail.value;
				this.changeExpectTime();
			},
			openShopLocation(item) {
				// const gcj02Coord = wgs84ToGcj02(item.shop.longitude, item.shop.latitude)
				// const gcj02Coord = wgs84ToGcj02(102.80154676649306, 24.969456922743056)
				// const gcj02Coord = [102.82868680950929, 24.864792838337802]
				const gcj02Coord = [item.longitude, item.latitude]
				wx.openLocation({
				  latitude: gcj02Coord[1],
				  longitude: gcj02Coord[0],
				  scale: 18,
				  name: item.shopName,
				  address: `${item.provinceName}${item.cityName}${item.countryName}${item.streetName}${item.address}`
				})
			},
			showModal(e) {
				this[e.currentTarget.dataset.modal] = true;
			},
			hideModal(e) {
				this[e.currentTarget.dataset.modal] = false;
			},
			changePiecesNum(curNum, curItem) {
				curItem.toAssignNum = curNum;
			},
			resetData() {
				this.dispatchTotalPrice = null;
				this.pickedList = [];
				this.curOrder = {};
				this.curUserInfo = null;
			},
			loadData(order) {
				this.resetData();
				this.curUserInfo = this.$request.getCurUserInfo();
				this.getCanAssignList(order);
				// init defalut shop
				this.initShop()
			},
			async getCanAssignList(order) {
				// 获取最新的订单信息
				let getOrderRes = await this.$request.getOrderMasterDetail({
					id: order.orderMasterId,
				});
				let res = await this.$request.getCanAssignList({
					orderMasterId: order.orderMasterId,
					generateServiceOrder: getOrderRes.data.serviceCancelled
				});
				this.serviceCancelled = getOrderRes.data.serviceCancelled;
				let pickedList = res.data;
				this.curOrder = getOrderRes.data;
				this.pickedList = pickedList;
			},
			async initShop() {
				const {provinceName, cityName, countryName, streetName, address, serviceShopId} = this.data
				let res = await this.$request.getShopDetailWithDistance({
					shopId: serviceShopId,
					provinceName,
					cityName,
					countryName,
					streetName,
					address
				});
				this.serviceShop = res.data;
			},
			chooseShop(shopInfo) {
				this.serviceShop = shopInfo;
			},
			goChooseShop() {
				const {provinceName, cityName, countryName, streetName, address, goodsId, goods, serviceShopId} = this.data
				const addressFullObj = {
					provinceName,
					cityName,
					countryName,
					streetName,
					address
				}
				const gotGoodsId = goods ? goods.goodsId : goodsId
				uni.navigateTo({
					url: '/pages/order-manage/choose-shop?goodsId='+gotGoodsId+'&addressFullObj='+JSON.stringify(addressFullObj)+'&shopId='+serviceShopId
				})
			},
			async assignWork() {
				if (this.dispatchTotalPrice) {
					let res = await this.$request.allocateServiceMoney({
						id: this.data.orderMasterId,
						serverGoodsMoney: this.dispatchTotalPrice,
						serviceShopId: this.serviceShop.shopId
					});
					if (res && res.code === 0) {
						setTimeout(() => {
							uni.showToast({
								icon: 'success',
								title: this.serviceCancelled == 1 ? '已安装确认' : '现已安装确认，请操作接单',
								duration: 2000
							})
						}, 1500)
						this.$emit('confirmFeedback');
						return;
					}
				} else {
					uni.showToast({
						title: '请输入服务总金额',
						icon: 'none'
					})
				}
			},
			makePhoneCall(customerPhone) {
				uni.makePhoneCall({
					phoneNumber: customerPhone
				})
			},
		}
	}
</script>

<style scoped>
	
	.relative-view {
		position: relative;
	}
	
	.input-arrow {
		position: absolute;
		right: 10rpx;
		top: 25%;
	}
</style>