<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2024-09-05 15:35:07
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-position="top"
		label-width="80px">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="成本名称" prop="name">
					<el-select
						v-model="dataForm.name"
						filterable
						clearable
						:style="{ width: '100%' }"
            @change="setLabel"
						placeholder="请选择成本名称">
						<el-option
							v-for="item in nameArr"
							:key="item.name"
							:label="item.label"
							:value="item.name"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="成本金额" prop="price">
					<el-input-number
						:min="0"
						style="width: 80%"
						v-model="dataForm.price"
						clearable
						placeholder="请输入成本金额" />
					(元)
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="所属日期" prop="recTime">
					<el-date-picker
						v-model="dataForm.recTime"
						type="date"
						value-format="timestamp"
						:style="{ width: '100%' }"
						placeholder="选择所属日期"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="备注" prop="remark">
					<el-input
						v-model="dataForm.remark"
						clearable
						placeholder="请输入备注" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import basicAdd from '@/mixins/basic-add';
import {
	createRawOthercostLog,
	updateRawOthercostLog,
	getRawOthercostLog,
} from '@/api/cost/costOthercostLogDeep';
import moment from 'moment';

const nowData = moment().format('YYYY-MM-DD').valueOf()
export default {
	mixins: [basicAdd],
	props: {
		nameArr: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			urlOptions: {
				createURL: createRawOthercostLog,
				updateURL: updateRawOthercostLog,
				infoURL: getRawOthercostLog,
			},
			dataForm: {
				id: undefined,
				price: undefined,
				name: undefined,
				recTime: new Date().getTime(),
				remark: undefined,
			},
			dataRule: {
				price: [
					{ required: true, message: '成本金额不能为空', trigger: 'blur' },
				],
				name: [
					{ required: true, message: '	成本名称不能为空', trigger: 'blur' },
				],
				recTime: [
					{
						required: true,
						message: '所属日期不能为空',
						trigger: 'change',
					},
				],
			},
		};
	},
	methods: {
    setLabel(val){
      this.dataForm.label = this.nameArr.find(item=>item.name===val).label
    }
  },
};
</script>
