<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="价格类型" prop="pricingType">
						<el-radio-group v-model="dataForm.pricingType" :disabled="isDisabled">
							<el-radio :label="1">固定价格</el-radio>
							<el-radio :label="2">动态价格</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="出行方式" prop="travelType">
						<el-radio-group v-model="dataForm.travelType" :disabled="isDisabled">
							<el-radio :label="1">公交</el-radio>
							<el-radio :label="2">出租</el-radio>
							<el-radio :label="3">免费</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.pricingType == 2">
					<el-form-item label="时令" prop="seasonsType">
						<el-radio-group v-model="dataForm.seasonsType" :disabled="isDisabled">
							<el-radio :label="1">夏令时</el-radio>
							<el-radio :label="2">冬令时</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.pricingType == 2">
					<el-form-item label="时段" prop="timeIntervalType">
						<el-radio-group v-model="dataForm.timeIntervalType" :disabled="isDisabled">
							<el-radio :label="1">白天</el-radio>
							<el-radio :label="2">夜间</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="夜间出行费（元）" prop="nightTravelExpenses">
						<el-input-number v-model="dataForm.nightTravelExpenses" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.pricingType == 2">
					<el-form-item label="起步价（元）" prop="startingPrice">
						<el-input-number v-model="dataForm.startingPrice" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.pricingType == 2">
					<el-form-item label="每公里价格（元）" prop="pricePerKilometer">
						<el-input-number v-model="dataForm.pricePerKilometer" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.pricingType == 2 && dataForm.travelType != 1">
					<el-form-item label="起步公里数" prop="freeKilometers">
						<el-input-number v-model="dataForm.freeKilometers" controls-position="right" :precision="2" :min="0" :step="1" label="起步公里数"/>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.pricingType == 1">
					<el-form-item label="固定价格类型" prop="fixedType">
						<el-radio-group v-model="dataForm.fixedType">
							<el-radio :label="1">往返</el-radio>
							<el-radio :label="2">单程</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dataForm.pricingType == 1">
					<el-form-item label="固定价格（元）" prop="fixedPrice">
						<el-input-number v-model="dataForm.fixedPrice" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	let defReqRule = (message = '不能为空') => { return { required: true, message, trigger: 'blur' } };

	export default {
		data() {
			return {
				visible: false,
				dataForm: {
					id: '',
					createTime: '',
					updateTime: '',
					pricingType: '',
					travelType: '',
					seasonsType: '',
					timeIntervalType: '',
					startingPrice: '',
					freeKilometers: '',
					nightTravelExpenses: '',
					pricePerKilometer: '',
					fixedType: '',
					fixedPrice: '',
					remark: '',
				},
				dataRule: {
					pricingType: [ defReqRule('请选择价格类型！') ],
					travelType: [ defReqRule('请选择出行方式') ],
					seasonsType: [ defReqRule('请选择时令') ],
					timeIntervalType: [ defReqRule('请选择时段') ],
					startingPrice: [ defReqRule('请输入起步价！') ],
					freeKilometers: [ defReqRule('请输入免费公里数') ],
					nightTravelExpenses: [ defReqRule('请输入夜间出行费') ],
					pricePerKilometer: [ defReqRule('请输入每公里价格') ],
					fixedType: [ defReqRule('请选择固定价格类型') ],
					fixedPrice: [ defReqRule('请输入固定价格') ],
				},
				index: 0
			}
		},
		computed: {
			isEdit() {
				return !(this.dataForm || {}).id;
			},
			isDisabled() {
				return !this.isEdit;
			},
		},
		methods: {
			init(index, id) {
				this.index = index
				this.dataForm.id = id
				this.visible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					if (this.dataForm.id) {
						this.$http({
							url: this.$http.adornUrl(`travelConf/info/${this.dataForm.id}`),
							method: 'get',
							params: this.$http.adornParams()
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.dataForm = data.data
							}
						})
					} else {
						//重置表单
						Object.keys(this.dataForm).forEach(x => {
							this.dataForm[x] = '';
						})
					}
				})
			},
			// 表单提交
			dataFormSubmit() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						let saveData = Object.assign({}, this.dataForm);
						//清空多余内容
						let cleanField = [];
						if(saveData.pricingType == 1){
							cleanField = [ 'seasonsType', 'timeIntervalType', 'startingPrice', 'freeKilometers',  'pricePerKilometer' ];
						}else if(saveData.pricingType == 2) {
							cleanField = [ 'fixedType', 'fixedPrice' ];
						}
						if(cleanField.length){
							cleanField.forEach(key => {
								delete saveData[key];
							});
						}

						console.log(cleanField);

						this.$http({
							url: this.$http.adornUrl(`travelConf/${!saveData.id ? 'add' : 'update'}`),
							method: 'post',
							data: this.$http.adornData({
								...saveData,
								'id': saveData.id || undefined,
							})
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.visible = false
										console.log('this.index', this.index)
										if (this.index == 1) {
											this.$emit('refreshDataList')
										} else {
											this.$emit('refreshDataLister')
										}

									}
								})
							} else {
								this.$message.error(data.msg)
							}
						})
					}
				})
			}
		}
	}
</script>
