<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="800" draggable destroy-on-close @closed="$emit('closed')">
		<el-form class="form" :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="130px" label-position="right">
			<el-row :gutter="1" justify="start">
				<el-col :span="11">
					<el-form-item label="费用类型" prop="type_code">
						<el-select class="input" v-model="form.type_code" placeholder="请选择费用类型" clearable @visible-change="getSelectType">
							<el-option v-for="(item,index) in setMap.typeList" :key="index" :value="item.value" :label="item.label"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="费用类别" prop="category_code">
						<el-select class="input" v-model="form.category_code" placeholder="请选择费用类别" clearable @visible-change="getSelectCategory">
							<el-option v-for="(item,index) in setMap.categoryList" :key="index" :value="item.value" :label="item.label"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="单号" prop="identifier">
						<el-input v-model="form.identifier" :disabled="mode!='add'?true:false" placeholder="请填写单号" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="地址" prop="location">
						<el-input v-model="form.location" placeholder="请填写地址" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="单位" prop="unit">
						<el-input v-model="form.unit" placeholder="请填写单位" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="数量" prop="quantity">
						<el-input v-model="form.quantity" placeholder="请填写数量" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="流水金额" prop="amount">
						<el-input v-model="form.amount" placeholder="请填写流水金额" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="交付/快递日期" prop="time">
						<el-date-picker class="input" type="date" value-format="YYYY-MM-DD" v-model="form.time" placeholder="请选择日期" clearable></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="22">
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" :row="2" v-model="form.remark" placeholder="请填写备注" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSave" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增费用',
				edit: '编辑费用',
				show: '费用详情'
			},
			visible: false,
			isSave: false,
			setMap:{
				categoryList:[],
				typeList:[]
			},
			//表单数据
			form: {
				id:"",
				type_code: "",
				category_code:"",
				amount:"",
				time:"",
				location:"",
				identifier: "",
				unit:"",
				quantity: "",
				remark: ""
			},
			//验证规则
			rules: {
				type_code:[
					{required: true, message: '费用类型不能为空'}
				],
				category_code: [
					{required: true, message: '费用类别不能为空'}
				],
				amount:[
					{required: true, message: '金额不能为空'}
				],
				time:[
					{required: true, message: '时间不能为空'}
				],
				location:[
					{required: true, message: '地点不能为空'}
				],
				unit:[
					{required: true, message: '单位不能为空'}
				],
				quantity:[
					{required: true, message: '数量不能为空'}
				],
				identifier:[
					{required: true, message: '单号不能为空'}
				]
			},
		}
	},
	mounted() {

	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this
		},
		async getSelectType() {
			const res = await this.$API.finance.cost.typeList.post({type_code:this.form.type_code,category_code:this.form.category_code});
			if (res.code == 200) {
				this.setMap.typeList = res.data;
			}
		},
		async getSelectCategory() {
			const res = await this.$API.finance.cost.categoryList.post({type_code:this.form.type_code,category_code:this.form.category_code});
			if (res.code == 200) {
				this.setMap.categoryList = res.data;
			}
		},
		//表单提交方法
		submit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSave = true;
					const res = await this.$API.finance.cost.add.post(this.form);
					this.isSave = false;
					if(res.code == 200){
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					}
				}else{
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			await this.getSelectType();
			await this.getSelectCategory();

			let params = {
				id:data.id
			}
			const res = await this.$API.finance.cost.info.post(params);
			if(res.code == 200){
				this.form.id=res.data.id;
				this.form.type_code=res.data.type_code;
				this.form.category_code=res.data.category_code;
				this.form.amount=res.data.amount;
				this.form.time=res.data.time;
				this.form.location=res.data.location;
				this.form.identifier=res.data.identifier;
				this.form.unit=res.data.unit;
				this.form.quantity=res.data.quantity;
				this.form.remark=res.data.remark;
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.input{
		width: 100%;
	}
</style>
