<template>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="订单列表" name="first">
			<div style="margin-right:2%;">
				<span>分类：</span>
				<el-select v-model="indentType" style="width:150px;margin-left: 10px;" @change="animeDat1(indentType)">
					<el-option v-for="item in indentTypeList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
				<span>状态：</span>
				<el-select v-model="status" style="width:150px;margin-left: 10px;" @change="animeDat(status)">
					<el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
				<div style="position: relative;display: inline-block;margin: 5px;">
					<span>订单编号：</span>
					<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入订单编号"
						v-model="ordersNo"></el-input>&nbsp;&nbsp;
				</div>
				<!-- <div style="position: relative;display: inline-block;">
					<span>下单人电话：</span>
					<el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入电话"
						v-model="phone"></el-input>&nbsp;&nbsp;
				</div> -->
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>骑手电话：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入骑手电话" v-model="riderPhone">
          </el-input>&nbsp;&nbsp;
        </div>
				<div style="position: relative;display: inline-block;margin: 5px;">
					<el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
						<el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>&nbsp;&nbsp;&nbsp;
					<el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right"
						type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间"
						@change="animeOrder">
					</el-date-picker>
				</div>
				<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">查询
				</el-button>
				<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans">重置
				</el-button>
			</div>
			<el-table v-loading="tableDataLoading" :data="tableData.list">
				<el-table-column  prop="indentId" label="编号" width="80" fixed="left">
				</el-table-column>
				<el-table-column prop="nickName" label="发布人昵称" width="120">
					<template slot-scope="scope">
						<div style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row.userId)">{{scope.row.nickName?scope.row.nickName:'未绑定'}}
						</div>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="phone" label="骑手电话" width="150">
					<template slot-scope="scope">
						<div>{{scope.row.phone?scope.row.phone:'未绑定'}}
						</div>
					</template>
				</el-table-column> -->
				<el-table-column prop="indentType" label="任务类型" width="200">
					<template slot-scope="scope">
						<div v-if="scope.row.indentType=='1'">帮我送</div>
						<div v-if="scope.row.indentType=='2'">帮我取</div>
						<div v-if="scope.row.indentType=='3'">同城帮买</div>
						<div v-if="scope.row.indentType=='4'">同城服务</div>
            <div v-if="scope.row.indentType=='5'">同城外卖</div>
					</template>
				</el-table-column>
				<el-table-column prop="productDetails" label="物品/服务" width="150">
					<template slot-scope="scope">
						<div v-if="scope.row.indentType=='1'">帮送物品：{{scope.row.itemType}}</div>
						<div v-if="scope.row.indentType=='2'">帮取物品：{{scope.row.itemType}}</div>
						<div v-if="scope.row.indentType=='3'">帮买物品：{{scope.row.productDetails}}</div>
						<div v-if="scope.row.indentType=='4'">服务详情：{{scope.row.serviceType}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="serviceDetails" label="物品/服务详情" width="200">
					<template slot-scope="scope">
						<div v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">{{scope.row.itemWeight}}; {{scope.row.itemValue}}; {{scope.row.productDetails}};</div>
						<div v-if="scope.row.indentType=='4'">{{scope.row.serviceDetails}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="deilveryAddressDetail" label="地址" width="300">
					<template slot-scope="scope">
						<div>
							<span v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">取货地址：</span>
							<span v-if="scope.row.indentType=='3'">帮买地址：</span>
              <div v-if="scope.row.indentType!='5'">
                {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
              </div>
							<div v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">
								<div>联系人：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
							</div>
              <div v-if="scope.row.indentType=='5'">
              	<div>取货商铺：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
                <div>
                  <span>商铺地址：</span>
                  {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
                </div>
              </div>
						</div>
						<br />
						<div v-if="scope.row.userName">
							<div><span>收货地址:</span> {{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}{{scope.row.userAddressDetail}}
							</div>
							<div>联系人：{{scope.row.userName}} {{scope.row.userPhone}}</div>
						</div>
					</template>
				</el-table-column>
        <el-table-column prop="riderNickName" label="骑手昵称" width="120">
          <template slot-scope="scope">
            <div style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row.riderUserId)">{{scope.row.riderNickName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="riderPhone" label="骑手电话" width="200"></el-table-column>
				<!-- <el-table-column prop="serviceDetails" label="服务详情"></el-table-column> -->
				<el-table-column prop="sendOutTime" label="送货/取件时间"></el-table-column>

				<el-table-column prop="distance" label="距离"></el-table-column>
				<!-- <el-table-column prop="tool" label="自带配件"></el-table-column> -->
				<el-table-column prop="buyType" label="帮买方式">
					<template slot-scope="scope">
						<div v-if="scope.row.buyType=='0'">就近帮买</div>
						<div v-if="scope.row.buyType=='1'">指定地点帮买</div>
					</template>
				</el-table-column>
				<el-table-column prop="prepayMoney" label="预估商品费用">
				</el-table-column>
				<el-table-column prop="redPacketAmount" label="红包">
				</el-table-column>
				<el-table-column prop="tip" label="小费">
				</el-table-column>
				<el-table-column prop="errandMoney" label="跑腿费">
				</el-table-column>

				<el-table-column prop="platformMoney" label="平台收入">
				</el-table-column>
				<el-table-column prop="riderMoney" label="骑手/师傅收入">
				</el-table-column>
				<el-table-column prop="indentBasicsMoney" label="订单基础价格">
				</el-table-column>
				<el-table-column prop="riderFine" label="骑手取消订单罚金">
				</el-table-column>
				<!-- <el-table-column prop="userFine" label="用户取消订单罚金">
				</el-table-column> -->
				<el-table-column prop="cargoInsurance" label="保价费">
				</el-table-column>
				<el-table-column prop="cargoInsuranceFlag" label="是否保价">
					<template slot-scope="scope">
						<div v-if="scope.row.cargoInsuranceFlag==1">否</div>
						<div v-if="scope.row.cargoInsuranceFlag==0">是</div>
					</template>
				</el-table-column>
				<el-table-column prop="indentMoney" label="总费用">
				</el-table-column>
				<!-- <el-table-column prop="itemCode" label="收货码">
				</el-table-column> -->
				<el-table-column prop="remarks" label="备注" width="200">
				</el-table-column>
				<el-table-column prop="riderlng" label="完成时骑手经度">
				</el-table-column>
				<el-table-column prop="riderlat" label="完成时骑手纬度度">
				</el-table-column>
				<!-- <el-table-column prop="warrantyPeriod" label="保修期" width="160">
				</el-table-column> -->
				<el-table-column prop="createTime" label="创建时间" width="160">
				</el-table-column>
				<el-table-column prop="state" label="状态" fixed="right" width="160">
					<template slot-scope="scope">
						<div v-if="scope.row.indentState=='0'">未支付</div>
						<div v-if="scope.row.indentState=='1'">未支付</div>
						<div v-if="scope.row.indentState=='2'">待接单</div>
						<div v-if="scope.row.indentState=='3'">已接单</div>
						<div v-if="scope.row.indentState=='4'">已取货/购买</div>
						<!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
						<div v-if="scope.row.indentState=='6'">订单已完成</div>
						<!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
						<div v-if="scope.row.indentState=='8'">用户取消订单</div>
						<div v-if="scope.row.indentState=='9'">骑手取消订单</div>
						<div v-if="scope.row.indentState=='10'">已下架</div>
					</template>
				</el-table-column>
        <el-table-column prop="isRider" label="是否是转单" fixed="right" width="80">
        	<template slot-scope="scope">
        		<div v-if="scope.row.isRider==1">是</div>
        		<div v-if="scope.row.isRider==2">否</div>
        	</template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center" fixed="right">
        	<template slot-scope="scope">
        		<!-- <el-button size="mini" type="danger" :disabled="!isAuth('orderCenter:delete')"
        			@click="deletes(scope.row)">删除</el-button> -->
        			<el-button size="mini" type="primary" v-if="scope.row.indentState == '3'||scope.row.indentState == '4'"
        				:disabled="!isAuth('orderCenterRun:zhuandan')" @click="zhuandan(scope.row)"
        				style="margin: 3px;">转单</el-button>
        	</template>
        </el-table-column>
			</el-table>
			<div style="text-align: center;margin-top: 10px;float:right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
					layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
				</el-pagination>
			</div>
		</el-tab-pane>
    <!-- 骑手列表 -->
    <el-dialog title="骑手列表" :visible.sync="dialogFormVisible" center>
    	<div style="margin:2% 0;display: inline-block;">
    		<span>手机号:</span>
    		<el-input style="width: 150px;" @keydown.enter.native="selectU" clearable placeholder="请输入手机号"
    			v-model="phoneU"></el-input>
    	</div>&emsp;&emsp;
    	<div style="margin:2% 0;display: inline-block;">
    		<span>昵称:</span>
    		<el-input style="width: 150px;" @keydown.enter.native="selectU" clearable placeholder="请输入昵称"
    			v-model="campus"></el-input>
    	</div>&emsp;&emsp;
    	<div style="display: inline-block;">
    		<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="selectU">查询
    		</el-button>
    		<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleansU">重置
    		</el-button>
    	</div>
    	<el-table v-loading="tableDataLoadingU" :data="userData.list">
    		<el-table-column prop="userId" label="编号" width="80">
    		</el-table-column>
    		<el-table-column prop="nickName" label="用户昵称" width="120">
    			<template slot-scope="scope">
    				　<span style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row)"
    					v-text="scope.row.nickName"></span>
    			</template>
    		</el-table-column>
    		<el-table-column prop="avatar" label="用户头像" width="100">
    			<template slot-scope="scope">
    				　　<img v-if="scope.row.avatar && scope.row.avatar!=''" :src="scope.row.avatar" width="40"
    					height="40" />
    				<span v-else>暂无图片</span>
    			</template>
    		</el-table-column>
    		<el-table-column prop="phone" label="手机号">
    		</el-table-column>
    		<el-table-column prop="createTime" label="创建时间" width="180">
    		</el-table-column>
    		<el-table-column label="操作" prop="id" width="100" fixed='right' align="center">
    			<template slot-scope="scope">
    				<el-button size="mini" type="primary"
    					@click="userBtns(scope.row)">确认
    				</el-button>
    			</template>
    		</el-table-column>
    	</el-table>
    	<div style="text-align: center;margin-top: 10px;">
    		<el-pagination @size-change="handleSizeChangeU" @current-change="handleCurrentChangeU"
    			:page-sizes="[10, 20, 30, 40]" :page-size="limit1" :current-page="page1"
    			layout="total,sizes, prev, pager, next,jumper" :total="userData.totalCount">
    		</el-pagination>
    	</div>
    </el-dialog>
	</el-tabs>
</template>
<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				classify: 1,
				ordersNo: '',
				imageUrl: '',
				url: '',
				status: '',
				activeName: 'first',
				tableDataLoading: true,
        tableDataLoadingU:false,
				tableData: [],
				checkBoxData: [], //多选框选择的值
				statesnum: [{
          value: '',
          label: '全部'
        },{
          value: 0,
          label: '待支付'
        }, {
          value: 2,
          label: '待接单'
        }, {
          value: 3,
          label: '已接单'
        }, {
          value: 4,
          label: '已取货/购买'
        }, {
          value: 6,
          label: '已完成'
        }, {
          value: 8,
          label: '已取消'
        }, {
          value: 10,
          label: '已下架'
        }
				],
				indentType: '',
				indentTypeList: [{
						label: '全部',
						value: ''
					},
					{
						label: '帮我送',
						value: 1
					},
					{
						label: '帮我取',
						value: 2
					},
					{
						label: '同城帮买',
						value: 3
					},
					{
						label: '同城服务',
						value: 4
					},
				],
				flag: '',
				info: {
					stockDate: this.getNowTime(), //日期
				},
				flags: [{
					value: 'day',
					label: '按天查询'
				}, {
					value: 'month',
					label: '按月查询'
				}, {
					value: 'year',
					label: '按年查询'
				}],
				phone:'',
        riderPhone:'',
        // ····
        userData:{},
        phoneU:'',
        campus:'',
        ordersId:'',
        limit1: 10,
        page1: 1,
        dialogFormVisible: false,
			}
		},
		methods: {
			// 多选
			changeFun(val) {
				this.checkBoxData = val
			},
			//处理默认选中当前日期
			getNowTime () {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() //得到月份
				var date = now.getDate() //得到日期
				var hh = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
				var mm = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
				var ss = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			// tabs切换
			handleClick(tab, event) {
				if (tab._props.label == '订单列表') {
					this.page = 1
					this.limit = 10
					this.classify = 1
					this.dataSelect()
				}
			},
			handleSizeChange(val) {
				this.limit = val
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.dataSelect()
			},
      handleSizeChangeU(val) {
      	this.limit1 = val;
      	this.dataSelectUser()()
      },
      handleCurrentChangeU(val) {
      	this.page1 = val;
      	this.dataSelectUser()
      },
			// 查询资源列表
			select() {
				this.page = 1
				this.limit = 10
				this.dataSelect()
			},
			// 重置资源列表
			cleans() {
				this.ordersNo = ''
				this.status = ''
				this.phone = ''
        this.riderPhone = ''
				this.indentType = ''
				this.page = 1
				this.flag = ''
				this.info.stockDate = this.getNowTime()
				this.dataSelect()
			},
			// select选择事件
			animeDat(state) {
				this.page = 1
				this.status = state
				console.log(state)
				this.dataSelect()
			},
			animeDat1(state) {
				this.page = 1
				this.indentType = state
				this.dataSelect()
			},
			// 删除banner图
			deletes(row) {
				let delid = row.ordersId
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`order/deleteOrders?ids=${delid}`),
						method: 'get',
						data: this.$http.adornData({})
					}).then(({
						data
					}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					})
				}).catch(() => {})
			},
			// 获取数据列表
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('admin/tbindent/findallIndent'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
            'riderUserId': '',
            'shopId': '',
						'indentType': this.indentType,
						'ordersNo': this.ordersNo,
						'status': this.status,
            'riderPhone':this.riderPhone
						// 'date': this.info.stockDate,
						// 'dateType': this.flag,
						// 'phone':this.phone
					})
				}).then(({
					data
				}) => {
					console.log(data)
					if (data && data.code === 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.tableData = returnData
					}
				})
			},
			// 详情跳转
			updates(userId) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: userId
					}
				})
			},
			// 订单分析选择日期
			animeOrder() {
				console.log('info',this.info)
				this.dataSelect()
				// this.colonel()
			},
			// 订单分析年月日
			orderfenxi(value) {
				this.page = 1
				let vanumber = value
				// if (vanumber === 1) {
					this.flag = value
					this.dataSelect()
					// this.colonel()
				// }
				// if (vanumber === 2) {
				// 	this.flag = 2
				// 	this.taskData()
				// 	this.colonel()
				// }
				// if (vanumber === 3) {
				// 	this.flag = 3
				// 	this.taskData()
				// 	this.colonel()
				// }
			},
      // 转单弹框
      zhuandan(row){
      	this.ordersId = row.indentId
        this.page1 = 1
        this.phoneU = ''
        this.campus = ''
      	this.dataSelectUser()
      	this.dialogFormVisible = true
      },
      // 确认选择
      userBtns(row){
      	this.$http({
      		url: this.$http.adornUrl('admin/tbindent/transferOfOrder'),
      		method: 'post',
      		params: this.$http.adornParams({
      			'riderUserId': row.userId,
      			'indentId': this.ordersId,
      		})
      	}).then(({
      		data
      	}) => {
      		if (data.code == 0) {
      			this.$message({
      				message: '操作成功',
      				type: 'success',
      				duration: 1500,
      				onClose: () => {
      					this.dataSelect()
      					this.dialogFormVisible = false
      				}
      			})
      		} else {
      			this.$message({
      				message: data.msg,
      				type: 'warning',
      				duration: 1500,
      				onClose: () => {}
      			})
      		}


      	})
      },
      // 获取数据列表
      dataSelectUser() {
      	this.tableDataLoadingU = true
      	this.$http({
      		url: this.$http.adornUrl('user/selectUserList'),
      		method: 'get',
      		params: this.$http.adornParams({
      			'page': this.page1,
      			'limit': this.limit1,
      			// 'member': this.member,
      			'phone': this.phoneU,
      			'nickName': this.campus,
      			'type': 2,
      			'isVip':'',
      			'platform':'',
            'shopAdminFlag': this.shopAdminFlag,

      		})
      	}).then(({
      		data
      	}) => {
      		this.tableDataLoadingU = false
      		let returnData = data.data
      		this.userData = returnData
      	})
      },
      // 查询
      selectU() {
      	this.page = 1
      	this.dataSelectUser()
      },
      // 重置
      cleansU() {
      	this.page1 = 1
      	this.campus = ''
      	this.phoneU = ''
      	this.dataSelectUser()
      },
		},
		mounted() {
			this.dataSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}
</style>
