<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 fixed prop="id" label="编号" width="80" fixed="left">
					<template slot-scope="scope">
						<div>{{scope.$index +1}}</div>
					</template>
				</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.riderUserId)">{{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.remarks}}</div>
						<div v-if="scope.row.indentType=='2'">帮取物品：{{scope.row.remarks}}</div>
						<div v-if="scope.row.indentType=='3'">帮买物品：{{scope.row.productDetails}}</div>
						<div v-if="scope.row.indentType=='4'">服务详情：{{scope.row.serviceDetails}}</div>
            <div v-if="scope.row.indentType=='5'">外卖详情：{{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="serviceType" 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="riderMoney" 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="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 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>
					</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-tabs>
</template>
<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				classify: 1,
				ordersNo: '',
				imageUrl: '',
				url: '',
				status: '',
				activeName: 'first',
				tableDataLoading: true,
				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:'',
			}
		},
		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()
			},
			// 查询资源列表
			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()
				// }
			},
		},
		mounted() {
			this.dataSelect()
		}
	}
</script>

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