<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-form>
				<el-row>
					<el-col :span="5">
						<el-form-item label="车辆编码" prop="code">
							<el-input
								type="number"
								style="width: 200px;"
								v-model.number="listQuery.code"
								placeholder="请输入车辆编码"
							></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="5">
						<el-form-item label="车牌号" prop="code">
							<el-input
								@keyup.enter.native="handleFilter"
								style="width: 200px;"
								class="filter-item"
								placeholder="车牌号"
								v-model="listQuery.numberPlate"
							></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="5">
						<el-form-item label="出车日期" prop="startTime">
							<el-date-picker
								v-model="listQuery.startTime"
								type="date"
								:editable="false"
								format="yyyy-MM-dd"
								prop="startTime"
								placeholder="请选择出车日期"
							></el-date-picker>
						</el-form-item>
					</el-col>

					<el-col :span="5">
						<el-form-item label="还车日期" prop="endTime">
							<el-date-picker
								v-model="listQuery.endTime"
								type="date"
								:editable="false"
								format="yyyy-MM-dd"
								prop="endTime"
								placeholder="请选择还车日期"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="5">
						<el-form-item label="出车公司" prop="departureId">
							<el-autocomplete
								class="inline-input"
								v-model="state1"
								:fetch-suggestions="querySearch"
								placeholder="请输入内容"
								@select="handleSelect"
							></el-autocomplete>
						</el-form-item>
					</el-col>

					<el-col :span="5">
						<el-form-item label="收车公司">
							<el-autocomplete
								class="inline-input"
								v-model="arrivalBranchCompanyId"
								:fetch-suggestions="querySearch"
								placeholder="请输入内容"
								@select="putCompanyChange"
							></el-autocomplete>
						</el-form-item>
					</el-col>

					<el-col :span="5">
						<el-form-item label="用途">
							<el-select v-model="useData" filterable placeholder="请选择车辆用途" @change="changeUse">
								<el-option label="全部" value>全部</el-option>
								<el-option
									v-for="item in useArr"
									:key="item.code"
									:label="item.name"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="5">
						<el-form-item>
							<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
							<el-button class="filter-item" type="primary" v-waves @click="reloadPage">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div v-show="statisticVisiable">
			<el-row style="text-align: center;margin-top: 10px;margin-bottom: 10px">
				<el-col :span="8">
					<span class="statistic_number">{{statisticData.departureCount}}</span>
					<br />
					<br />
					<span class="statistic_title">出行次数</span>
				</el-col>
				<el-col :span="8">
					<span class="statistic_number">{{statisticData.departureDay}}</span>
					<br />
					<br />
					<span class="statistic_title">出行天数</span>
				</el-col>
				<el-col :span="8">
					<span class="statistic_number">{{statisticData.departureMileage}}</span>
					<br />
					<br />
					<span class="statistic_title">公里</span>
				</el-col>
			</el-row>
		</div>

		<el-button
			class="filter-item"
			type="primary"
			:icon=" showMoreMoreCol ? 'caret-left' : 'caret-right' "
			v-waves
			@click="showMoreMoreCol=!showMoreMoreCol"
		>更多列</el-button>
		<el-table
			:key="tableKey"
			:data="list"
			v-loading.body="listLoading"
			border
			fit
			highlight-current-row
			style="width: 100%"
		>
			<el-table-column type="index" label="编号" width="65"></el-table-column>
			<!--      <el-table-column align="center" label="编号" width="65">
			-->
			<!--<template scope="scope">-->
			<!--<span>{{scope.row.id}}</span>-->
			<!--</template>-->
			<!--</el-table-column>-->
			<el-table-column align="center" label="车牌号" width="120">
				<template scope="scope">
					<span>{{scope.row.numberPlate}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="预约出/收车时间">
				<template scope="scope">
					<p>出:{{scope.row.bookStartDate}}</p>
					<p>收:{{scope.row.bookEndDate}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" label="实际出/收车时间">
				<template scope="scope">
					<p>出:{{scope.row.departureTime}}</p>
					<p>收:{{scope.row.arrivalTime}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" label="出/收车公司">
				<template scope="scope">
					<p>出:{{scope.row.departureName}}</p>
					<p>收:{{scope.row.arrivalName}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" width="100px" label="出/收车人">
				<template scope="scope">
					<p>{{scope.row.checkMan}}</p>
					<p>{{scope.row.recycleMan}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" label="出行天数/公里数">
				<template scope="scope">
					<p>{{scope.row.departureDay}}</p>
					<p>{{scope.row.mileage}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" label="客户/手机号">
				<template scope="scope">
					<p>{{scope.row.user}}</p>
					<p>{{scope.row.userTel}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" label="用途">
				<template scope="scope">
					<span>{{scope.row.use}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="备注">
				<template scope="scope">
					<span>{{scope.row.remark}}</span>
				</template>
			</el-table-column>

			<!-- <el-table-column width="100" align="center" label="使用人">
				<template scope="scope">
					<span>{{scope.row.user}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="出车地点">
				<template scope="scope">
					<span>{{scope.row.departureName}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="还车时间">
				<template scope="scope">
					<span>{{scope.row.arrivalTime}}</span>
				</template>
			</el-table-column>
			<el-table-column width="100" align="center" label="还车人">
				<template scope="scope">
					<span>{{scope.row.recycleMan}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="还车地点">
				<template scope="scope">
					<span>{{scope.row.arrivalName}}</span>
				</template>
			</el-table-column>
			<el-table-column width="150" align="center" label="本次出行天数">
				<template scope="scope">
					<span>{{scope.row.departureDay}}</span>
				</template>
			</el-table-column>
			<el-table-column width="150" align="center" label="本次出行公里">
				<template scope="scope">
					<span>{{scope.row.mileage}}</span>
				</template>
			</el-table-column>
			<el-table-column width="100" align="center" label="验车人">
				<template scope="scope">
					<span>{{scope.row.checkMan}}</span>
				</template>
			</el-table-column>
			<el-table-column width="100" align="center" label="用途">
				<template scope="scope">
					<span>{{scope.row.use}}</span>
				</template>
			</el-table-column>-->

			<!-- <el-table-column width="200" align="center" label="使用人电话" v-if="showMoreMoreCol">
				<template scope="scope">
					<span>{{scope.row.userTel}}</span>
				</template>
			</el-table-column>

			<el-table-column width="200" align="center" label="验车人电话" v-if="showMoreMoreCol">
				<template scope="scope">
					<span>{{scope.row.checkManTel}}</span>
				</template>
			</el-table-column>

			<el-table-column width="100" align="center" label="开始公里数" v-if="showMoreMoreCol">
				<template scope="scope">
					<span>{{scope.row.mileageStart}}</span>
				</template>
			</el-table-column>
			<el-table-column width="100" align="center" label="结束公里数" v-if="showMoreMoreCol">
				<template scope="scope">
					<span>{{scope.row.mileageEnd}}</span>
				</template>
			</el-table-column>-->
		</el-table>

		<div v-show="!listLoading" class="pagination-container">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="listQuery.page"
				:page-sizes="[10,20,30, 50]"
				:page-size="listQuery.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>

		<!--    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
		<!--      <el-form :model="form" :rules="rules" ref="form" label-width="100px">-->
		<!--        <el-form-item label="姓名" prop="name">-->
		<!--          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>-->
		<!--        </el-form-item>-->
		<!--      </el-form>-->
		<!--      <div slot="footer" class="dialog-footer">-->
		<!--        <el-button @click="cancel('form')">取 消</el-button>-->
		<!--        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>-->
		<!--        <el-button v-else type="primary" @click="update('form')">确 定</el-button>-->
		<!--      </div>-->
		<!--    </el-dialog>-->
	</div>
</template>
<style>
.statistic_number {
	font-size: x-large;
	font-weight: bolder;
}

.statistic_title {
	font-size: x-large;
}
</style>
<script>
import { mapGetters } from 'vuex'
import {
	page,
	statistic,
	findReserveType
} from '../../../api/vehicle/departureLog'
import { getAllCompany, getAll } from 'api/base_info/branch_company/'
import { getAllZone } from 'api/base_info/constant/'
import { getAllBranchCompanyByZoneId } from 'api/order/rentVehicle'
import {
	toEast8Date,
	deepCopyDate,
	newEast8Date,
	getYMD_date
} from 'utils/dateUtils'
export default {
	name: 'vehicleDepartureLog',
	data() {
		return {
			purpose:null,
			showMoreMoreCol: false,
			form: {
				id: null,
				numberPlate: null,
				vehicleId: null,
				use: null,
				user: null,
				userTel: null,
				checkMan: null,
				checkManTel: null,
				recycleMan: null,
				recycleManTel: null,
				departureTime: null,
				arrivalTime: null,
				mileageStart: null,
				mileageEnd: null,
				state: null,
				allCompaniesArr: [],
				selectArry: []
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入用户',
						trigger: 'blur'
					}
				]
			},
			list: null,
			total: null,
			listLoading: true,
			allBranchCompany: [],
			baranchQuery: {
				zoneId: null
			},
			allZoneArr: [], //全部片区
			state1: '',
			arrivalBranchCompanyId:null,
			useArr:[],//用途
			useData:null,
			listQuery: {
				page: 1,
				limit: 20,
				startTime: undefined,
				endTime: undefined,
				numberPlate: undefined,
				departureId: undefined,
				arrivalBranchCompanyId: null,
				use:this.useData
			},
			dialogStatus: '',
			textMap: {
				update: '编辑',
				create: '创建'
			},
			tableKey: 0,
			dialogFormVisible: null,
			statisticVisiable: true,
			statisticData: {
				departureCount: null,
				departureDay: null,
				departureMileage: null
			}
		}
	},
	created() {
		let t = this
		const numberPlate = this.$route.query.numberPlate
		if (numberPlate) {
			this.listQuery.numberPlate = numberPlate
		}
		getAll().then(response => {
			this.allCompaniesArr = response.data
			let query = localStorage.getItem('vehicleDepartureLog')
			if (query != 'null' && query && !numberPlate) {
				this.listQuery = JSON.parse(query)
				if (t.listQuery.departureId) {
					t.allCompaniesArr.map(function(item) {
						if (item.id == t.listQuery.departureId) {
							t.state1 = item.name
						}
					})
				}
			}
			t.handleFilter()
		})
		findReserveType().then(data=>{
			this.useArr = JSON.parse(data.data).type
		})
	},
	computed: {
		...mapGetters(['elements']),
		//获取大区列表
		getAllZoneList() {
			return getAllZone()
		}
	},
	methods: {
		//收车公司筛选
		putCompanyChange(val) {
			if (val) {
				this.listQuery.arrivalBranchCompanyId = val.id
			} else {
				this.listQuery.arrivalBranchCompanyId = null
			}
		},
		changeUse(val){
			if(!val){
				 this.listQuery.use = null
			}else{
				 this.listQuery.use = val
			}
		},
		/**
		 * 重置
		 * */
		reloadPage() {
			this.state1 = ''
			this.arrivalBranchCompanyId = null
			this.listQuery = {
				page: 1,
				limit: 20,
				startTime: undefined,
				endTime: undefined,
				numberPlate: undefined,
				departureId: undefined,
				arrivalBranchCompanyId: undefined,
				use:undefined
			}
			if (this.listQuery) {
				localStorage.setItem(
					'vehicleDepartureLog',
					JSON.stringify(this.listQuery)
				)
			}
			this.handleFilter()
		},
		handleFilter() {
			this.listQuery.page = 1
			if (this.listQuery) {
				localStorage.setItem(
					'vehicleDepartureLog',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
			if (this.listQuery.numberPlate) {
				statistic({ numberPlate: this.listQuery.numberPlate }).then(
					response => {
						if (response.status == 200) {
							this.statisticData = response.data
							this.statisticVisiable = true
						} else {
							this.$message(response.message)
						}
					}
				)
			}
		},
		dateToString: function(date) {
			var year = date.getFullYear()
			var month = (date.getMonth() + 1).toString()
			var day = date.getDate().toString()
			if (month.length == 1) {
				month = '0' + month
			}
			if (day.length == 1) {
				day = '0' + day
			}
			var dateTime = year + '-' + month + '-' + day
			return dateTime
		},
		getList() {
			this.listLoading = true
			if (!this.listQuery.numberPlate) {
				this.statisticVisiable = false
			}
			if (this.listQuery.startTime) {
				this.listQuery.startTime = getYMD_date(
					new Date(this.listQuery.startTime)
				)
			}
			if (this.listQuery.endTime) {
				this.listQuery.endTime = getYMD_date(
					new Date(this.listQuery.endTime)
				)
			}
			if (!this.state1) {
				this.listQuery.departureId = undefined
			}
			page(this.listQuery).then(response => {
				this.list = response.data.list
				this.total = response.data.total
				this.listLoading = false
			})
		},
		querySearch(queryString, cb) {
			let selectArry = []
			let iitem = {
				value: '全部',
				name: '全部'
			}
			selectArry.push(iitem)
			this.allCompaniesArr.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			this.selectArry = selectArry
			var results = queryString
				? selectArry.filter(this.createFilter(queryString))
				: selectArry
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.name.indexOf(queryString.toLowerCase()) != -1
			}
		},
		handleSelect(item) {
			if (item.value == '全部') {
				this.listQuery.departureId = undefined
			} else {
				this.listQuery.departureId = item.id
			}
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			if (this.listQuery) {
				localStorage.setItem(
					'vehicleDepartureLog',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			if (this.listQuery) {
				localStorage.setItem(
					'vehicleDepartureLog',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		}
	}
}
</script>
