<template>
	<div>
		<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
			<el-form-item prop="orderId">
				<el-input v-model="dataForm.name" placeholder="商户名称" size="medium" clearable="clearable" />
			</el-form-item>
			<el-form-item>
				<el-date-picker
					v-model="dataForm.merchHours"
					type="daterange"
					range-separator="~"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					size="medium"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-select
					v-model="dataForm.type"
					class="input"
					placeholder="商户类型"
					size="medium"
					clearable="clearable"
				>
					<el-option label="洗车" value="1" />
					<el-option label="验车" value="2" />
					<el-option label="代驾" value="3" />
					<el-option label="道路救援" value="4" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table
			:data="dataList"
			border
			v-loading="dataListLoading"
			cell-style="padding: 4px 0"
			style="width: 100%;"
			size="medium"
		>
			<el-table-column type="index" header-align="center" align="center" width="100" label="序号">
				<template #default="scope">
					<span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="id" header-align="center" align="center" min-width="200" label="商户编号" />
			<el-table-column prop="name" header-align="center" align="center" min-width="130" label="商户名称" />
			<el-table-column prop="address" header-align="center" align="center" min-width="130" label="商户地址" />
      <el-table-column prop="merchHours" header-align="center" align="center" min-width="150" label="商户营业时间" />
      <el-table-column prop="type" header-align="center" align="center" min-width="150" label="商户类型" />
			<el-table-column prop="phoneNumber" header-align="center" align="center" min-width="100" label="商户联系电话" />
      <el-table-column prop="phoneNumber" header-align="center" align="center" min-width="100" label="商户评分" />
			<el-table-column header-align="center" align="center" width="150" label="操作">
				<template #default="scope">
					<el-button
						type="text"
						size="medium"
						@click="edit(scope.row.id)"
					>
						编辑
					</el-button>
					<el-button
						type="text"
						size="medium"
						@click="deleteById(scope.row.id)"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			:current-page="pageIndex"
			:page-sizes="[10, 20, 50]"
			:page-size="pageSize"
			:total="totalCount"
			layout="total, sizes, prev, pager, next, jumper"
		></el-pagination>
		<order-bill ref="orderBill"></order-bill>
		<order-close ref="orderClose" @refreshDataList="loadDataList"></order-close>
	</div>
</template>

<script>
import OrderBill from './order_bill.vue';
import OrderClose from './order-close.vue';

import $ from 'jquery';
import { calculateCarPlateCity } from '../utils/car_plate.js';
export default {
	components: {
		OrderBill,
		OrderClose
	},
	data() {
		return {
			dataForm: {
				orderId: null,
				driverId: null,
				customerId: null,
				date: [],
				status: null
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalCount: 0,
			dataListLoading: false,
			dataRule: {
			},
			panel: {
				id: null,
				customer: {
					id: null,
					sex: null,
					tel: null
				},
				driver: {
					id: null,
					name: null,
					tel: null
				},
				order: {
					carPlate: null,
					carType: null,
					city: null,
					acceptTime: null,
					arriveTime: null,
					startTime: null,
					endTime: null,
					waitingMinute: null,
					driveMinute: null,
					realMileage: null,
					realFee: null,
					status: null,
					chargeRule: null,
					cancelRule: null,
					profitsharingRule: null
				}
			},
			getRowKeys(row) {
				return row.id;
			},
			gpsTimer: null
		};
	},
	methods: {
		loadDataList: function() {
			let that = this;
			that.dataListLoading = true;
			let data = {
				page: that.pageIndex,
				length: that.pageSize,
        name: that.dataForm.name == '' ? null : that.dataForm.name,
				type: that.dataForm.type == '' ? null : that.dataForm.type,
        merchHours: that.dataForm.merchHours == '' ? null : that.dataForm.merchHours
			};
			if (that.dataForm.merchHours != null && that.dataForm.merchHours.length == 2) {
				let startDate = that.dataForm.merchHours[0];
				let endDate = that.dataForm.merchHours[1];
				data.startDate = dayjs(startDate).format('YYYY-MM-DD');
				data.endDate = dayjs(endDate).format('YYYY-MM-DD');
			}
			that.$http('wash-car/merchant/searchMerchantByPage', 'POST', data, true, function(resp) {
				let result = resp.result;
				let list = result.list;
				for (let one of list) {
					one.status = status[one.status + ''];
					if (!one.hasOwnProperty('realMileage')) {
						one.realMileage = '--';
					}
					if (!one.hasOwnProperty('realFee')) {
						one.realFee = '--';
					}
				}
				that.dataList = list;
				that.totalCount = Number(result.totalCount);
				that.dataListLoading = false;
			});
		},
		sizeChangeHandle(val) {
			this.pageSize = val;
			this.pageIndex = 1;
			this.loadDataList();
		},
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.loadDataList();
		},
		searchHandle: function() {
			this.$refs['dataForm'].validate(valid => {
				if (valid) {
					this.$refs['dataForm'].clearValidate();
					this.loadDataList();
				} else {
					return false;
				}
			});
		},
		loadPanelData: function(ref, row) {
			let data = {
			};
			ref.$http('wash-car/merchant/searchMerchantByPage', 'POST', data, true, function(resp) {
				let result = resp.result;
				let content = result.list;
        console.log(resp)
			});
		},
	},
	created: function() {
		this.loadDataList();
	}
};
</script>
<style lang="less" scoped="scoped">
@import url('order.less');
</style>
