<template>
	<el-dialog title="违章查询" :visible.sync="isVisible">
		<el-form>
			<!-- <el-row>
				<el-col :span="24">
					<el-form-item label="订单号">
						<span>{{row.no}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="订单金额">
						<span>{{row.realAmount}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车牌号">
						<span>{{row.vehicleNumberPlat}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="用户ID/实名">
						<span>{{row.userId}}</span>/
						<span>{{row.username}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="取车">
						<span>{{dateFormat(row.orderRentVehicleDetail.startTime)}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="交车公司">
						<span>{{row.startCompanyName}}</span>
						<span>({{row.orderRentVehicleDetail.startCityName}}{{row.orderRentVehicleDetail.startAddr}})</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="还车">
						<span>{{dateFormat(row.orderRentVehicleDetail.endTime)}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="收车公司">
						<span>
							<span>{{row.endCompanyName}}</span>
							<span>({{row.orderRentVehicleDetail.endCityName}}{{row.orderRentVehicleDetail.endAddr}})</span>
						</span>
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-row>
				<el-col>
					<el-form-item label="违章截图" :style="{display:'block'}">
						<!--<el-upload-->
						<!--:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"-->
						<!--list-type="picture-card"-->
						<!--:headers="getHeaderWithToken"-->
						<!--:on-success="handleSuccess"-->
						<!--:on-remove="handleRemove">-->
						<!--<i class="el-icon-plus"></i>-->
						<!--</el-upload>-->
						<!--<el-dialog v-model="dialogVisible" size="tiny">-->
						<!--<img width="100%" :src="dialogImageUrl" alt="">-->
						<!--</el-dialog>-->
						<el-upload
							class="upload-demo"
							:headers="getHeaderWithToken"
							:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
							:on-remove="handleRemove"
							:file-list="fileList2"
							:on-success="handleSuccess"
							list-type="picture-card"
						>
							<!--<div slot="tip" class="el-upload__tip">最多上传5张</div>-->
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-form-item label="违章罚款" style="display: inline-block;width:100%">
					<el-input style="width:300px" v-model="price" type="number" placeholder="请输入违章罚款金额"></el-input><span style="margin-left:10px">元</span>
				</el-form-item>
			</el-row>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="cancel">取 消</el-button>
			<el-button type="primary" @click="okHandler('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { page, saveOrderViolation } from 'api/order/rentVehicle'
import { mapGetters } from 'vuex'
import { formatDate } from '../../../utils/dateFormattor'
import { getToken } from '../../../utils/auth'
import { getOneIllegalRow } from 'api/order/rentVehicle'
import ElRow from 'element-ui/packages/row/src/row'
import ElInput from '../../../../node_modules/element-ui/packages/input/src/input.vue'
import ElCol from 'element-ui/packages/col/src/col'
import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item.vue'
import ElForm from '../../../../node_modules/element-ui/packages/form/src/form.vue'
export default {
	props: ['row'],
	name: 'illegalDialog',
	components: {
		ElForm,
		ElFormItem,
		ElCol,
		ElInput,
		ElRow
	},
	data() {
		return {
			BASE_API: process.env.BASE_API,
			price: undefined, //违章罚款金额
			isVisible: false,
			fileList2: [] //违章截图
		}
	},
	created() {},
	watch: {
		isVisible(newValue, oldValue) {
			if (!newValue) {
				this.$emit('illegalEvent', false)
			}
		}
	},
	mounted() {
		let that = this
		//      if(that.row.refundStatus == 3) {
		//refundStatus退款状态  0、未退款  1、已退还所有（取消订单时）2、 已退还部分（保留违章预备金）3、已退还所有押金（扣除该扣除的）
		that.getOne(that.row.detailId)
		//      }
		this.isVisible = true
	},
	computed: {
		...mapGetters(['elements']),
		getHeaderWithToken() {
			return { Authorization: getToken() }
		}
	},
	methods: {
		/**
		 * 根据id查询一条记录
		 * */
		getOne(id) {
			let t = this
			getOneIllegalRow(id).then(response => {
				if (response.status == 200) {
					let arr = response.data.picture.split(',')
					let fileList2 = []
					let p = {}
					arr.map(function(item) {
						p = {
							url: item
						}
						fileList2.push(p)
					})
					t.price = parseFloat(response.data.price)
					t.fileList2 = fileList2
					t.id = response.data.id ? response.data.id : undefined
				} else {
					this.$notify({
						title: '失败',
						message: response.menu,
						type: 'error',
						duration: 2000
					})
				}
			})
		},
		/**
		 * 上传成功
		 * */
		handleSuccess(res, file) {
			let c = { url: res.data }
			this.fileList2.push(c)
			this.showLoadingBody = false
		},
		/**
		 * 删除违章图片
		 * */
		handleRemove(file, fileList) {
			this.fileList2 = fileList
		},
		/**
		 * 确定
		 * */
		okHandler() {
			let arr = []
			this.fileList2.map(function(item) {
				arr.push(item.url)
			})
			let params = {
				picture: arr.join(','),
				price: this.price,
				detailId: this.row.detailId,
				id: this.id
			}
			saveOrderViolation(params).then(response => {
				if (response.status === 200) {
					this.$notify({
						title: '成功',
						message: '创建成功',
						type: 'success',
						duration: 2000
					})
					this.$emit('illegalEvent', false)
				} else {
					this.$notify({
						title: '创建失败',
						message: '操作失败！',
						type: 'error',
						duration: 2000
					})
				}
			})
		},
		/**
		 * 弹框-取消
		 * */
		cancel() {
			this.$emit('illegalEvent', false)
		},
		/**
		 * 格式化时间
		 * @param timestamp
		 * @returns {*}
		 */
		dateFormat(timestamp) {
			let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
		}
	}
}
</script>
<style>
.el-form-item__content {
	display: inline-block;
}
</style>
