<template>
	<view class="orderCardCss usuallyCard">
		<view class="flex justify-between">
			<view class="text-gray">
				订单编号：{{orderObj.fDddh || ""}}
			</view>
			<view class="themeColor">
				{{orderObj.fDdzt || ""}}
			</view>
		</view>
		<view class="margin-top">
			<u-line></u-line>
		</view>
		<view class="shopItemCss flex" v-for="(item,index) in orderObj.ddxqList" :key="index">
			<view class="">
				<u-image :src="item.image" width="55px" height="55px"></u-image>
			</view>
			<view class="flex flex-direction  margin-left w100">
				<view class="flex justify-between">
					<view class="text-lg text-bold">
						{{item.fSpmc || ""}}
					</view>
					<view class="">
						<u-tag :text="orderObj.fPsfs" :bgColor="orderObj.fPsfs==='自提'?'#E6F7F7':'#FFF6E6'"
							borderColor="#fff" :color="orderObj.fPsfs==='自提'?'#00AEAA':'#FFA500'"></u-tag>
					</view>
				</view>
				<view class="text-grey margin-top">
					{{item.fMs || ""}}
				</view>
				<view class="flex justify-between align-center margin-top">
					<view class="text-lg text-bold">
						￥{{item.fDj || "0"}}
					</view>
					<view class="flex text-grey">
						X {{item.fSl || "0"}}
					</view>
				</view>
			</view>
		</view>
		<view>
			<u-line></u-line>
		</view>
		<view class="flex justify-between w100 margin-top align-center" v-if="mode === 'home' || mode ==='order'">
			<view class="text-grey" v-if="orderObj.fDdzt === '待配送'">
				下单人：{{orderObj.fShlxr || ""}}({{orderObj.fShlxrdh || ''}})
			</view>
			<view class="" @click="handlePhone" v-if="orderObj.fDdzt === '待配送'">
				<u-image src="/static/images/home/dianhua.png" width="18px" height="18px"></u-image>
			</view>
			<view class="text-grey" v-if="orderObj.fDdzt === '已完成'">
				安装时间：{{orderObj.fSjwcsj || ""}}
			</view>
		</view>
		<view class="flex justify-between w100 align-center" v-if="mode === 'home' || mode ==='order'">
			<view class="text-grey w80 flex align-start margin-top" v-if="orderObj.fDdzt === '待配送'">
				<u-icon name="map-fill" color="#8799AC" class="" style="margin:3px 5px 0 0;"></u-icon>
				<view class="">
					{{orderObj.fShsf || ""}} {{orderObj.fShs || ""}} {{orderObj.fShq || ""}} {{orderObj.fShjd || ''}}
					{{orderObj.fShxxdz || ""}}

				</view>
			</view>
			<view class="" @click="handleMap" v-if="orderObj.fDdzt === '待配送'">
				<u-image src="/static/images/home/daohang.png" width="18px" height="18px"></u-image>
			</view>
		</view>
		<!-- <view class="flex justify-between w100 margin-top align-center" v-if="mode === 'order'">
			<view class="text-grey" v-if="orderObj.fDdzt === '待配送'">
				下单人：{{orderObj.fShlxr || ""}}({{orderObj.fShlxrdh || ''}})
			</view>
			<view class="text-grey" v-else-if="orderObj.fDdzt === '已完成'">
				安装时间：{{orderObj.fSjwcsj || ""}}
			</view>
		</view> -->
		<view class="flex justify-between w100 margin-top align-center">
			<view class="text-grey">
				备注信息：{{orderObj.fMjly || "-"}}
			</view>
			<view class="">
			</view>
		</view>
		<view class="flex justify-end margin-top-sm" v-if="mode === 'order' && orderObj.fMjly !== '无单配送'">
			<view class="text-grey">
				共{{orderObj.fddsl || "0"}}件商品 合计：
				<text class="themeColor text-lg	">￥{{orderObj.fDdje || "0"}}</text>
			</view>
		</view>
		<view class="flex justify-end align-center margin-top-lg">
			<!-- <view class="" v-if="orderStatus === 0" @click="goToDetailPage">
				<u-button shape="circle" :customStyle="{color:'#666666'}">查看详情</u-button>
			</view> -->
			<!-- 查看详情 -->
			<view class="margin-left" @click="goToDetailPage">
				<u-button shape="circle" :customStyle="{color:['配送中','已完成'].includes(orderObj.fDdzt)?'#fff':'#666666'}"
					:color="['配送中','已完成'].includes(orderObj.fDdzt)?'#EA5504':''">查看详情</u-button>
			</view>
			<!-- 员工订单配送（去配送） -->
			<view class="margin-left" v-if="orderObj.fDdzt === '待配送' && orderStatus === 0 && orderObj.fPsfs === '配送'"
				@click="goToAjPage">
				<u-button shape="circle" color="#EA5504">去配送</u-button>
			</view>
			<!-- 管理自提 -->
			<view class="margin-left" v-if="orderObj.fPsfs==='自提' && orderObj.fDdzt !=='已完成'" @click="goToZtPage">
				<u-button shape="circle" color="#EA5504">确认自提</u-button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {
			mode: {
				type: String,
				default: ""
			},
			orderStatus: {
				type: Number,
				default: 0
			},
			orderObj: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {};
		},
		async mounted() {
			this.loadImages();
		},
		watch: {
			orderObj: {
				handler() {
					this.$nextTick(() => {
						this.loadImages();
					});
				},
				// immediate:true,
				deep: true, // 深度监听orderList的变化
			},
		},
		methods: {
			async loadImages() {
				let that = this;
				if (this.orderObj.ddxqList && this.orderObj.ddxqList.length > 0) {
					for (let i = 0; i < this.orderObj.ddxqList.length; i++) {
						let JsonParse = JSON.parse(this.orderObj.ddxqList[i].fTp);
						let photoUrl = await this.$getPhotoUrl(JsonParse[0].response.fileId);
						this.orderObj.ddxqList[i].image = photoUrl;
						// console.log('组件data', JSON.parse(JSON.stringify(this.orderObj)));
						this.$forceUpdate();
						// this.$set(this.orderObj.ddxqList[i], 'image', photoUrl);
					}
				}
			},
			goToDetailPage() {
				console.log(this.orderObj);
				let Json = JSON.stringify(this.orderObj)
				uni.navigateTo({
					url: '/pages/home/appList/orderDelivery/orderDetail?detail=' + Json
				})
			},
			// 自提
			goToZtPage() {
				console.log("自提", this.orderObj);
				let Json = JSON.stringify(this.orderObj)
				// let ddid = this.orderObj.id;
				uni.navigateTo({
					url: `/pages/home/appList/orderManagement/gasCylinderSelfPickup?ddObj=${Json}`
				})
			},
			handleMap(item) {
				console.log('orderObj', JSON.parse(JSON.stringify(this.orderObj)));
				this.$viewMapLocation(this.orderObj.fShdzjd, this.orderObj.fShdzwd, this.orderObj.fCzmc);
			},
			handlePhone() {
				// console.log('电话详情',JSON.parse(JSON.stringify(this.orderObj)));
				uni.makePhoneCall({
					phoneNumber: this.orderObj.fShlxrdh, // 电话号码
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function(err) {
						console.log('拨打电话失败：' + JSON.stringify(err));
					}
				});
			},
			goToAjPage() {
				console.log('订单详情', JSON.parse(JSON.stringify(this.orderObj)));
				let orderParams = {
					ddid: this.orderObj.id,
					khlxdzsf: this.orderObj.fShsf,
					khlxdzs: this.orderObj.fShs,
					khlxdzq: this.orderObj.fShq,
					khlxdzjd: this.orderObj.fShjd,
					ddxqList: this.orderObj.ddxqList
				}
				// console.log('orderParams', JSON.parse(JSON.stringify(orderParams)));
				uni.navigateTo({
					url: '/pages/home/appList/securityCheck/securityCheck?type=0&orderParams=' + JSON.stringify(
						orderParams)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderCardCss {
		padding: 12px 15px;

		.shopItemCss {
			height: 108px;
			margin: 15px 0 0 0;
		}
	}
</style>