<template>
	<div>
		<!-- 添加或修改店铺对话框 -->
		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
			<el-form-item label="名称" prop="name">
				<el-input v-model="form.name" placeholder="请输入店铺名称" />
			</el-form-item>
			<el-form-item label="编码" prop="code">
				<el-input v-model="form.code" placeholder="请输入店铺编码" />
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="店铺经度" prop="lng">
						<el-input v-model="form.lng" placeholder="请输入店铺位置经度" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="店铺纬度" prop="lat">
						<el-input v-model="form.lat" placeholder="请输入店铺位置纬度" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="区域" prop="province">
				<el-cascader style="width:100%" v-model="form.province" placeholder="地区" :options="piovince" filterable>
				</el-cascader>
			</el-form-item>
      <el-form-item label="详细地址" prop="address">
				<el-input v-model="form.address" placeholder="请输入详细地址" />
			</el-form-item>
			<el-form-item label="营业时间" prop="time">
        <el-time-picker
          is-range
          v-model="form.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围" format="HH:mm" value-format="HH:mm">
        </el-time-picker>     
			</el-form-item>			
			<el-form-item label="备注" prop="remarks">
				<el-input v-model="form.remarks" placeholder="请输入备注" />
			</el-form-item>
		</el-form>
		<div class="dialog-footer">
			<el-button type="primary" @click="submitForm">确 定</el-button>
			<el-button @click="cancel">取 消</el-button>
		</div>
	</div>
</template>

<script>
import {
	getShop,
	addShop,
	updateShop,
} from "@/api/system/shop";
import moment from 'moment';
import piovince from '@/utils/piovince';
export default {
	props: ['shopId'],
	watch: {
		shopId(id) {
			this.reset()
			if (id) {
				this.getShopInfo(id)
			}
		}
	},
	mounted() {
		if (this.shopId) {
			this.getShopInfo(this.shopId)
		}
	},
	data() {
		return {
			piovince,
			form: {},
			// 是否显示弹出层
			open: false,
			// 表单校验
			rules: {
				name: [
					{ required: true, message: "不能为空", trigger: "change" },
				],
				code: [
					{ required: true, message: "不能为空", trigger: "change" },
				],
				lng: [
					{ required: true, message: "不能为空", trigger: "change" },
				],
				lat: [
					{ required: true, message: "不能为空", trigger: "change" },
				],
				address: [
					{ required: true, message: "不能为空", trigger: "change" },
				],
				province: [
					{ required: true, message: "不能为空", trigger: "change" },
				],			
				time: [
					{ required: true, message: "不能为空", trigger: "change" },
				],

			},
		}
	},
	methods: {
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate((valid) => {
				if (valid) {
					const { time, province, ...surplus } = this.form
					surplus.startTime = time[0]
					surplus.endTime = time[1]
					surplus.province = province[0]
					surplus.city = province[1]
					surplus.zone = province[2]
          console.log("surplus",surplus);
					if (surplus.id != null) {
						updateShop(surplus).then((res) => {
              if(res.code=="200"){
							  this.$modal.msgSuccess("修改成功");
                this.$emit('getList')
              }
						});
					} else {
						addShop(surplus).then(({ data }) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('setShopId', data)
						});
					}
				}
			});
		},
		// 取消按钮
		cancel() {
      this.$emit('closeDialog');
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				name: null,
				code: null,
				lng: null,
				lat: null,
				remarks: null,
				address: null,
				province: null,
				city: null,
				zone: null,
				state: null,
				time: null
			};
			this.resetForm("form");
		},
		/** 修改按钮操作 */
		getShopInfo(id) {
			getShop(id).then(({ data }) => {
				const { startTime, endTime, province, city, zone, ...surplus } = data
				surplus.time = [startTime, endTime]
				surplus.province = [province, city, zone]
				this.form = surplus;

				this.open = true;

			});
		},
	}
}
</script>

<style lang="scss" scoped>
.row_input {
	display: flex;
	justify-content: space-between;
}

.col12 {
	width: 48%;

}
</style>