<template>
	<div class="expenseManagementEdit-wrap">
		<a-page-header :ghost="false" @back="handleBack" class="expenseManagementEdit-back">
			<!-- 自定义的二级文字标题 -->
			<template slot="subTitle">
				<a id="expenseManagementEdit-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
			</template>
		</a-page-header>
		<a-card :bordered="false" class="expenseManagementEdit-table-page-wrapper">
			<a-form-model
				id="expenseManagementEdit-form"
				ref="ruleForm"
				:model="form"
				:rules="rules"
				:label-col="formItemLayout.labelCol"
				:wrapper-col="formItemLayout.wrapperCol" >
        <a-form-model-item label="费用类型" prop="distributionType">
        	<v-select code="DISPATCH_FASHION" id="expenseManagementEdit-distributionType" v-model="form.distributionType" allowClear placeholder="请选择费用类型" ></v-select>
        </a-form-model-item>
        <a-form-model-item label="费用金额" prop="name">
          <a-input-number id="expenseManagementEdit-name" v-model="form.name" :precision="0" :min="0" :max="999999" placeholder="请输入费用金额(0~999999)" allowClear style="width: 90%;" /> 元
        </a-form-model-item>
        <a-form-model-item label="结算方式" prop="distributionType">
        	<v-select code="DISPATCH_FASHION" id="expenseManagementEdit-distributionType" v-model="form.distributionType" allowClear placeholder="请选择结算方式" ></v-select>
        </a-form-model-item>
        <a-form-model-item label="关联单号" prop="mobile">
          <a-input id="expenseManagementEdit-mobile" :maxLength="30" v-model="form.mobile" placeholder="请输入关联单号(最多30个字符)" allowClear />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remarks">
        	<a-textarea id="expenseManagementEdit-remarks" :maxLength="500" v-model="form.remarks" placeholder="请输入备注(最多500个字符)" allowClear />
        </a-form-model-item>
				<a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
					<a-button type="primary" @click="handleSave" id="expenseManagementEdit-btn-save" style="padding: 0 60px;margin: 0 30px;">保存</a-button>
					<a-button type="danger" @click="handleSubmit" id="expenseManagementEdit-btn-submit" style="padding: 0 60px;margin: 0 30px;">提交</a-button>
				</a-form-model-item>
			</a-form-model>
		</a-card>
	</div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { custSave, custFindById } from '@/api/customer'
export default {
	name: 'expenseManagementEdit',
	components: { STable, VSelect },
	data() {
		return {
			formItemLayout: {
				labelCol: { span: 4 },
				wrapperCol: { span: 16 }
			},
			form: {
				name: '', // 客户名称
				mobile: '', //  联系手机
				contact: '', //  联系人
				provinceId: undefined, //  省
				province: '',
				cityId: undefined, // 市
				city: '',
				areaId: undefined, // 区
				area: '',
				address: '', //  详细地址
				fax: '', //  客户传真
				distributionType: '', //  配送方式
				remarks: '', //  是否卫星仓客户
				custType: undefined, //  客户类型
				priceType: '', //  价格类型
				payType: '', //  支付方式
				paymentType: '', //  收款方式
				contactTel: '' //  联系电话
			},
			rules: {
				name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
				mobile: [{ required: true, message: '请输入联系手机', trigger: 'blur' }],
				provinceId: [{ required: true, message: '请选择省', trigger: 'change' }],
				cityId: [{ required: true, message: '请选择市', trigger: 'change' }],
				areaId: [{ required: true, message: '请选择区/县', trigger: 'change' }],
				custType: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
				priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
				payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
				paymentType: [{ required: true, message: '请选择收款方式', trigger: 'change' }]
			},
		}
	},
	methods: {
		//  详情
		getDetail() {
			// custFindById({ id: this.$route.params.id }).then(res => {
			// 	if (res.status == 200) {
			// 		// this.detailsData = res.data
			// 	} else {
			// 		this.$refs.ruleForm.resetFields()
			// 	}
			// })
		},
		//  保存
		handleSubmit(e) {
			e.preventDefault()
			const _this = this
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
          const form = _this.form
          form.id = this.$route.params.id ? this.$route.params.id : null
          console.log(form,'-----提交信息')
          // custSave(form).then(res => {
          //   if (res.status == 200) {
          //     _this.$message.success(res.message)
          //     setTimeout(() => {
          //       _this.$router.push({ path: '/financialManagement/expenseManagement/list' })
          //     }, 1000)
          //   }
          // })
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
    //  提交
    handleSave(){},
		//  返回列表
		handleBack() {
			this.$router.push({ path: '/financialManagement/expenseManagement/list' })
		},
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			vm.$refs.ruleForm.resetFields()
			if (vm.$route.params.id) {
				//  编辑页
				vm.getDetail()
			}
		});
	}
};
</script>

<style lang="less">
.expenseManagementEdit-wrap {
	.expenseManagementEdit-back {
		margin-bottom: 15px;
	}
}
</style>
