<!--
 * @Author: zwq
 * @Date: 2023-08-01 13:52:10
 * @LastEditors: zwq
 * @LastEditTime: 2024-09-03 14:52:51
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		v-if="visible"
		@keyup.enter.native="dataFormSubmit()"
		label-width="100px"
		label-position="top">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="成本名称" prop="label">
					<el-input v-model="dataForm.label" clearable disabled />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="自动计算策略" prop="type">
					<el-radio-group v-model="dataForm.type" @input="setType">
						<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.type === 1" key="one">
				<el-form-item label="价格" prop="price">
					<el-input-number
						:min="0"
						style="width: 80%"
						v-model="dataForm.price"
						clearable />
					(元)
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="dataForm.type === 2" key="two">
				<el-form-item label="总价" prop="price">
					<el-input-number
						:min="0"
						style="width: 80%"
						v-model="dataForm.price"
						clearable />
					(元)
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="dataForm.type === 2" key="three">
				<el-form-item label="年折旧率" prop="ratio">
					<el-input-number
						:min="0"
						style="width: 80%"
						v-model="dataForm.ratio"
						clearable />
					(%)
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="dataForm.type === 2" key="four">
				<el-form-item label="折旧年限" prop="timeLimit">
					<el-input-number
						:min="0"
						style="width: 80%"
						v-model="dataForm.timeLimit"
						clearable />
					(年)
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="备注" prop="remark">
					<el-input
						@input="$forceUpdate()"
						v-model="dataForm.remark"
						clearable
						placeholder="请输入备注" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import {
	updateRawOthercostRule,
	getRawOthercostRule,
} from '@/api/cost/deepOthercostRule';

export default {
	data() {
		return {
			urlOptions: {
				updateURL: updateRawOthercostRule,
				infoURL: getRawOthercostRule,
			},
			dataForm: {
				label: undefined,
				type: 1,
				price: 0,
				ratio: 0,
				timeLimit: 1,
				remark: '',
			},
			visible: false,
			dataRule: {
				price: [{ required: true, message: '价格不能为空', trigger: 'blur' }],
				ratio: [{ required: true, message: '折旧率不能为空', trigger: 'blur' }],
				timeLimit: [
					{ required: true, message: '折旧年限不能为空', trigger: 'blur' },
				],
			},
		};
	},
	created() {},
	methods: {
		init(val) {
			this.dataForm = {
				label: undefined,
				type: 1,
				price: 0,
				ratio: 0,
				timeLimit: 1,
				remark: '',
			};
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();
				this.dataForm = JSON.parse(JSON.stringify(val));
			});
		},
		setType(val) {
			if (val === 1) {
			} else {
			}
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				// 修改的提交
				this.urlOptions.updateURL(this.dataForm).then((response) => {
					this.$modal.msgSuccess('修改成功');
					this.visible = false;
					this.$emit('refreshDataList');
				});
			});
		},
		/** 清空form */
		formClear() {
			if (this.$refs.dataForm !== undefined) {
				this.$refs.dataForm.resetFields();
			}
		},
	},
};
</script>
