<template>
	<view>
		<!-- 转单弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view style="width: 100%;">
					<view class="close-text" @click="closePopup">关闭</view>
				</view>
				<uni-search-bar class="uni-mt-10" v-model="searchStr" @input='searchLbg' radius="5" placeholder="输入手机号或姓名查询" clearButton="auto" cancelButton="none" />
				<view v-for="(item,index) in conditionList" :key="index">
					<view class="lbg-list" @tap.stop="transOrder(item)">
						<view>姓名：{{item.workerName}}</view>
						<view>进行中：{{item.orderCount == null ? '0':item.orderCount}}单</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 复制地址弹窗 -->
		<uni-popup ref="addressPopup" background-color="#fff">
			<view class="popup-content" style="width:400rpx;height: auto;">
				<view style="width: 100%;">
					<view class="close-text" @tap="$refs.addressPopup.close()">关闭</view>
					<view style="width: 100%;margin-top:50rpx;text-align: center;font-size: 40rpx;">您要复制的地址？</view>
				</view>
				<view style="display: flex;width: 95%;margin: 100rpx auto 10rpx; ">
					<button @click="getAddress('send')" class="call-btn">发货人信息</button>
					<button @click="getAddress('put')" class="call-btn" v-if="signPerson == 2">收货人信息</button>
				</view>
			</view>
		</uni-popup>
		<!-- 打电话弹窗 -->
		<uni-popup ref="callPopup" background-color="#fff">
			<view class="popup-content" style="width:400rpx;height: auto;">
				<view style="width: 100%;">
					<view class="close-text" @tap="$refs.callPopup.close()">关闭</view>
					<view style="width: 100%;margin-top:50rpx;text-align: center;font-size: 40rpx;">您要拨打的电话？</view>
				</view>
				<view style="display: flex;width: 95%;margin: 100rpx auto 10rpx; ">
					<button @click="connect('dCall')" class="call-btn">店铺</button>
					<button @click="connect('wCall')" class="call-btn">物流</button>
				</view>
			</view>
		</uni-popup>
		<!-- type 订单类型 1帮送  2帮取 3帮买 4 帮排队 5帮办-->
		<view v-for="(item,index) in list" class="cell column">
			<!-- 时间状态 -->
			<!-- 35分钟内送达 8:00到达  尽快送达 尽快购买 尽快取件 服务中 -->
			<view class="section1 row">
				<image class="section1-shijian" src="../../static/image/shijian.png"></image>
				<block v-if="item.type == 4 || item.type == 5">
					<view v-if="item.status == 4" class="section1-time row">
						<view>{{i18n.order.fuwuzhong}}</view>
					</view>
					<view v-else class="section1-time row">{{123456}}
						<view style="color: #323232;">{{i18n.order.daoda}}</view>
					</view>
				</block>
				<block v-else>
					<!--          时间-->
					<view class="section1-time row">{{item.createTime}}
						<view v-if="item.type == 1 || item.type == 2" style="color: #323232;">{{i18n.order.qujian}}
						</view>
						<view v-if="item.type == 3" style="color: #323232;">{{i18n.order.songda}}</view>
						<block v-if="item.type == 4 || item.type == 5">
							<view v-if="item.status == 3" style="color: #323232;">{{i18n.order.daoda}}</view>
							<view v-if="item.status == 4">{{i18n.order.fuwuzhong}}</view>
						</block>
					</view>
				</block>


				<!-- <block v-if="selectedIndex == 0">
					<view class="section1-price row">
						<view style="font-size: 20px;height: 20px;line-height: 22px;">{{item.orderBkge || 100}}</view>
						<view style="font-size: 16px;height: 20px;">¥</view>
					</view>
				</block> -->
				<block>
					<view class="section1-price row">
						<view style="font-size: 14px;height: 20px;line-height: 30px;" @tap.stop="total('address',item)">一键复制地址</view>
					</view>
				</block>
				<block v-if="selectedIndex !=0">
					<view v-if=" item.reminder_count > 0" class="section1-price row">
						<view style="font-size: 20px;height: 20px;line-height: 22px;">{{i18n.order.cuidan}}</view>
					</view>
					<!--					<image @tap.stop="navigation(item)" class="daohangimgage" src="../../static/image/daohang.png">-->
					<!--					</image>-->
				</block>
			</view>
			<view class="section2 row">
				<view class="section2-left column">
					<image src="../../static/image/qu.png"></image>
					<image v-if="item.type == 3" src="../../static/image/mai.png"></image>
					<image v-if="item.type == 4" src="../../static/image/pai.png"></image>
					<image v-if="item.type == 5" src="../../static/image/ban.png"></image>
					<block v-if="item.type == 3">
						<text v-if="item.f_lng != ''">{{item.myDistance}}</text>
					</block>
					<block v-else>
						<text>{{item.myDistance}}</text>
					</block>
					<!-- <text v-if="item.type !=3 && item.extra.type != 2" >{{item.myDistance}}</text> -->
				</view>
				<view class="section2-right column">
					<block v-if="item.type != 4 && item.type != 5">
						<block v-if="item.type == 3">
							<block v-if="item.extra.type == 2">
								<view class="section2-right-title oneline">
									{{i18n.order.jiujingoumai}}
								</view>
							</block>
							<block v-else>
								<view class="section2-right-title oneline">
									{{item.orderDescribe}}
								</view>
							</block>
						</block>
						<!--            mark 取-->
						<block v-else>
							<view class="section2-right column">
								<view class="section2-right-title oneline" style="">
									{{item.shopName}} - {{item.orderId | orderSplit}}
								</view>
								<view class="section2-right-des oneline">
									{{item.getOrderAddress}}
									<!-- {{item.orderDescribe}} -->
								</view>
							</view>
						</block>

						<view class="section2-right-des oneline">
							{{item.orderDescribe}}
						</view>
					</block>
					<!--            mark-->
					<block v-else>
						<view class="section2-right-title oneline">
							{{item.orderDescribe}}
						</view>
						<view class="section2-right-des oneline">
							{{item.orderDescribe}}
						</view>
					</block>
				</view>
			</view>
			<view v-if="item.type != 4 && item.type != 5" class="line"></view>
			<!--            mark 送-->
			<view v-if="item.type != 4 && item.type != 5" class="section3 row">
				<view class="section2-left column">
					<image src="../../static/image/song.png"></image>
					<text v-if="item.allDistance">{{item.allDistance}}</text>
				</view>
				<view class="section2-right column" v-if="signPerson == 1">
					<view class="section2-right-title oneline">
						{{item.orderAddress | splitStr}}
						<!-- {{item.orderDescribe}} -->
					</view>
				</view>
				<view class="section2-right column" v-if="signPerson == 2">
					<view class="section2-right-title oneline" style="">
						{{item.province+'-'+item.city+'-'+item.area}}
					</view>
					<view class="section2-right-title oneline" style="">
						{{item.orderAddress | splitStr1}}
					</view>
				</view>
			</view>
			<!--            mark 取-->
			<!-- 任务类型 -->
			<!-- 帮我办 帮我送 帮我买 帮我排队 -->
			<view class="section4 row">
				<view v-if="item.type_t" class="section4-type1">{{item.type_t}}</view>
				<view v-if="item.tips" class="section4-type2" :style="item.ispre == 1?'background-color: #FDC208;':''">
					{{item.tips}}
				</view>
				<view class="section4-service_time" v-if="selectedIndex == 2 && (item.type == 4 || item.type == 5)">
					{{item.service_time+i18n.order.daoda}}
				</view>
			</view>
			<!--			<view v-if="item.des.length > 0" class="section7">-->
			<!--				<view class="sectionbeizhu">{{item.des}}</view>-->
			<!--			</view>-->
			<image class="zhuandan" v-if="item.istrans == 1" src="../../static/image/zhuandan.png"></image>
			<!-- 按钮状态 -->
			<!-- 拒绝接单 抢单 -->
			<block v-if="selectedIndex == 0">
				<view class="section5 row">
					<!--					<view class="section5-type1" @tap.stop="RefuseOrders(item)">{{i18n.order.jujuejiedan}}</view>-->
					<view class="section5-type2" @tap.stop="GrabOrder(item)">{{i18n.order.qiangdan}}</view>
				</view>
			</block>
			<!-- 已取件 开始服务 已购买 -->
			<block v-if="selectedIndex == 1">
				<view class="section6 row">
					<view class="section6-type1" @tap.stop="total('call',item)">{{i18n.order.lianxi}}</view>
					<view v-if="item.type == 4 || item.type == 5" class="section6-type2" @tap.stop="StartService(item)">
						{{i18n.order.kaishifuwu}}
					</view>
					<view class="section6-type2" style="width: calc(30% - 58px);" @tap.stop="transferOrder(item)">{{i18n.order.zhuandan}}</view>
					<view class="section6-type2" style="width: calc(70% - 58px);" @tap.stop="pickSure(item)">{{i18n.order.querenqujian}}</view>
					<view v-if="item.type == 3" class="section6-type2" @tap.stop="BuySure(item)">
						{{i18n.order.querengoumai}}</view>
				</view>
			</block>
			<!-- 确认送达  服务完成 -->
			<block v-if="selectedIndex == 2">
				<view class="section6 row">
					<view class="section6-type1" @tap.stop="total('call',item)">{{i18n.order.lianxi}}</view>
					<view v-if="item.type == 4 || item.type == 5" class="section6-type2"
						@tap.stop="serviceCompleted(item)">{{i18n.order.fuwuwancheng}}</view>
					<view v-else class="section6-type2" @tap.stop="serviceCompleted(item)">{{i18n.set.tupianshangchuan}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectedIndex: {
				type: Number,
				default: 0
			},
			// list: {
			// 	type: Array,
			// 	default: []
			// }
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
		},
		data() {
			return {
				list: [],
				searchStr:'',
				conditionList:[],
				data:{},
				isOnLine:uni.getStorageSync('isOnLine'),
				signPerson:uni.getStorageSync('signPerson') || ''
			}
		},
		filters:{
			splitStr(str){
				var data
				if(str.indexOf(" ") != -1){
					data = str.split(" ")[0]
				}else{
					data = str
				}
				return data
			},
			splitStr1(str){
				var data
				if(str.indexOf(" ") != -1){
					data = str.split(" ")[3]
				}else{
					data = str
				}
				return data
			},
			orderSplit(str){
				return str.slice(-4);
			}
		},
		created() {
			console.log(this.signPerson)
		},
		methods: {
			reload(list) {
				this.list = list
				console.log('list', list)
				this.$forceUpdate()
			},
			//服务完成
			serviceCompleted(item) {
				this.$emit('serviceCompleted', item)
			},
			//拒绝接单
			RefuseOrders(item) {
				this.$emit('RefuseOrders', item)
			},
			//接单
			GrabOrder(item) {
				this.$emit('GrabOrder', item)
			},
			//去详情
			gotomapdetail(item) {
				// if (item.istrans == 0){
				this.$emit('gotomapdetail', item)
				// }
			},
			//开始服务-完成服务
			StartService(item) {
				this.$emit('StartService', item)
			},
			pickSure(item) {
				this.$emit('StartService', item)
			},
			BuySure(item) {
				this.$emit('StartService', item)
			},
			closePopup(){
				this.$refs.popup.close()
			},
			total(type,item){
				if(type == 'call'){
					this.callData = item;
					this.$refs.callPopup.open()
				}else if(type=='address'){
					this.addressData = item;
					this.$refs.addressPopup.open()
				}else if(type == 'online'){
					this.$refs.onlinePopup.open()
				}
			},
			//联系
			connect(type) {
				var phone;
				if(type=='dCall'){
					phone = this.callData.mobile + ''
				}else{
					phone = this.callData.transCompanyPhone + ''
				}
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!', JSON.stringify(res))
					}
				})
			},
			searchLbg(){
				console.log('变化',this.searchStr)
				this.getCondition();
			},
			//跳转导航
			navigation(item) {
				if (this.selectedIndex == 1) {
					if (item.type == 1 || item.type == 2 || item.type == 3) {
						this.openLocation('__UNI__7350749', item.f_lng, item.f_lat, item.f_name)
					} else {
						this.openLocation('__UNI__7350749', item.t_lng, item.t_lat, item.t_name)
					}
				} else {
					this.openLocation('__UNI__7350749', item.t_lng, item.t_lat, item.t_name)
				}
			},
			//一键复制地址
			getAddress(type){
				console.log('地址',this.addressData)
				let data;
				if(type == 'send'){
					data = this.addressData.shopName+'-'+this.addressData.mobile+'-河北省沧州市运河区明珠商贸城'+this.addressData.getOrderAddress
				}else{
					data = this.addressData.orderAddress.split('-')[1] +'-'+ this.addressData.userName + this.addressData.userMobile
				}
				uni.setClipboardData({
					data:data,
					success: function () {
						uni.showToast({
							title: "复制成功",
							icon: 'none'
						})
					}
				});
			},
			//转单
			transferOrder(data){
				console.log('转单',data)
				this.data = data
				this.getCondition();
				this.$refs.popup.open('center')
			},
			//点击拉包工转单
			transOrder(item){
				this.NB.sendRequest('/order/ow/transferOrder', {
					orderId:this.data.orderId,
					orderByWorker:item.workerId,
					workerName:item.workerName
				}, false, 'POST', 'application/json').then(data => {
					uni.showToast({
						title: data.message,
						icon: 'none'
					});
					this.closePopup();
				})
			},
			getCondition(){
				this.NB.sendRequest('/worker/getByCondition', {
					ownerCompany: uni.getStorageSync('ownerCompany'), //公司id，如果是快递公司，才需要传
					searchStr: this.searchStr,
					pageNum: 1,
					pageSize: 10
				}, false, 'POST', 'application/json').then(data => {
					this.conditionList = data.result.content
				})
			},
			openLocation(appid, lng, lat, name) {
				var farray = this.NB.wgs84togcj02(lng, lat)
				lng = farray[0]
				lat = farray[1]
				console.log(farray)
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lng),
					success: function() {
						console.log('success');
					},
					fail(err) {
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style>
	@import url("./index.css");
</style>