<template>
	<el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" @close="close">
		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
			<el-form-item label="场站" prop="stationid">
				<el-cascader ref="cascaderRef" @change="cascaderChange" v-model="form.stationid" :options="options"
					style="width: 200px" :props="{ checkStrictly: true, label: 'name', value: 'id', children: 'children' }"
					clearable />
			</el-form-item>
			<el-form-item label="录入时间" prop="createtime">
				<el-date-picker style="width: 200px" v-model="form.createtime" type="datetime" placeholder="选择日期时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="指标" prop="kay">
				<el-select style="width: 200px" v-model="form.kay" placeholder="请选择" clearable
					:disabled="!idAdd ? true : false">
					<el-option v-for="item in standardList" :key="item.uniformcode" :label="item.name" :value="item.uniformcode">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="值" prop="value">
				<el-input style="width: 200px" class="inputs" v-model="form.value" placeholder="请输入"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="handleSave()">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import api from '@/api/table'
import dayjs from "dayjs";
export default {
	name: 'TableEdit',
	props: {
		stationList: {
			type: Array,
			default: []
		},
		options: {
			type: Array,
			default: []
		},
		standardList: {
			type: Array,
			default: []
		},
	},
	data() {
		return {
			keyList: [{ name: '发电量' }, { name: '平均功率' }, { name: '最优功率' }],
			form: {
				kay: '',
				createtime: '',
				stationid: '',
				stationname: '',
				stationidArr: '',
				stationnameArr: '',
				value: '',
			},
			rules: {
				stationid: [{ required: true, trigger: 'blur', message: '请选择' }],
				kay: [{ required: true, trigger: 'blur', message: '请选择' }],
				value: [{ required: true, trigger: 'blur', message: '请输入' }],
				createtime: [{ required: true, trigger: 'blur', message: '请选择' }],
			},
			title: '',
			dialogFormVisible: false,
			idAdd: true,
		}
	},
	created() { },
	methods: {
		cascaderChange(data) {
			this.form.stationidArr = data
			this.form.stationnameArr = this.$refs["cascaderRef"].getCheckedNodes()[0].pathLabels
		},
		showEdit(row) {
			if (!row) {
				this.title = '添加'
				this.idAdd = true
			} else {
				this.title = '编辑'
				this.idAdd = false
				this.form = Object.assign({}, row)
				this.form.stationid = row.stationid.split(",")
			}
			this.dialogFormVisible = true
		},
		close() {
			this.$refs['form'].resetFields()
			this.form = this.$options.data().form
			this.dialogFormVisible = false
			this.$emit('fetch-data')
		},
		handleSave() {
			this.$refs['form'].validate(async (valid) => {
				if (valid) {
					this.form.stationid = this.form.stationid.join(",")
					this.form.stationname = this.form.stationnameArr[this.form.stationnameArr.length - 1]
					this.form.createtime = dayjs(this.form.createtime).format("YYYY-MM-DD HH:mm:ss")
					api.addIndicators(this.form).then(res => {
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: '添加成功!'
							});
							this.$emit('handleSuccess');
							this.dialogFormVisible = false
						}
					})
				} else {
					return false
				}
			})
		},
	},
}
</script>
<style lang="less" scoped>
.inputs {
	width: 200px;
}
</style>
