<template>
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="220px">
			<el-row>
				<el-col style="background: #ff00001f;line-height: 40px;padding-left: 10px;margin-bottom: 10px;">
					<span>分销员的佣金应该由该笔订单服务技师和该技师绑定的上级代理承担</span>
				</el-col>
				<el-col :span="12">
					<el-form-item label="启用分销员功能" prop="isOpen">
						<el-radio-group v-model="dataForm.isOpen">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="分销员审核" prop="isApprove">
						<el-radio-group v-model="dataForm.isApprove">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="分销提成方式" prop="type">
						<el-radio-group v-model="dataForm.type">
							<el-radio :label="1">按人员来提成</el-radio>
							<el-radio :label="2">按服务项目来提成</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="一级分销返佣(%)" prop="oneRate">
						<el-input-number v-model="dataForm.oneRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="二级分销返佣(%)" prop="twoRate">
						<el-input-number v-model="dataForm.twoRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="技师承担(%)" prop="artificerRate">
						<el-input-number v-model="dataForm.artificerRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="技师所属代理承担(%)" prop="agentRate">
						<el-input-number v-model="dataForm.agentRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="邀请用户/下级返佣最高比例(%)" prop="mostRate">
						<el-input-number v-model="dataForm.mostRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="邀请用户推广海报背景图" prop="userImage">
						<div style="width: 148px;height: 148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
							<el-upload
								class="avatar-uploader"
								v-model="dataForm.userImage"
								:action="uploadUrl"
								:show-file-list="false"
								:on-success="handleUserImageSuccess"
								:on-progress="onUserImageProgress"
							>
								<img
									v-if="dataForm.userImage != ''"
									:src="dataForm.userImage"
									class="avatar"
									style="border-radius: 6px; width: 148px; height: 148px"
								/>
								<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
							</el-upload>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="邀请分销员推广海报背景图" prop="fxyImage">
						<div style="width: 148px;height: 148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
							<el-upload
								class="avatar-uploader"
								v-model="dataForm.fxyImage"
								:action="uploadUrl"
								:show-file-list="false"
								:on-success="handleFxyImageSuccess"
								:on-progress="onFxyImageProgress"
							>
								<img
									v-if="dataForm.fxyImage != ''"
									:src="dataForm.fxyImage"
									class="avatar"
									style="border-radius: 6px; width: 148px; height: 148px"
								/>
								<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
							</el-upload>
						</div>
					</el-form-item>
				</el-col>
				<el-col style="background: rgb(0,161,255,0.12);line-height: 40px;padding-left: 10px;margin-bottom: 10px;">
					<span>分销员付费申请设置</span>
				</el-col>
				<el-col :span="12">
					<el-form-item label="一级分销员门槛费" prop="oneFee">
						<el-input-number v-model="dataForm.oneFee" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="一级推荐提成(%)" prop="oneRecommendRate">
						<el-input-number v-model="dataForm.oneRecommendRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="二级分销员门槛费" prop="twoFee">
						<el-input-number v-model="dataForm.twoFee" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="二级推荐提成(%)" prop="twoRecommendRate">
						<el-input-number v-model="dataForm.twoRecommendRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col style="background: rgb(0,161,255,0.12);line-height: 40px;padding-left: 10px;margin-bottom: 10px;">
					<span>其他设置</span>
				</el-col>
				<el-col>
					<el-form-item label="分销码时效性" prop="fxmLimit">
						<el-radio-group v-model="dataForm.fxmLimit">
							<el-radio :label="1">永久性</el-radio>
							<el-radio :label="2">限制时效天数</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col v-if="dataForm.fxmLimit == 2">
					<el-form-item label="" prop="fxmLimitDays">
						<el-input-number v-model="dataForm.fxmLimitDays" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col>
					<el-button type="primary" @click="dataFormSubmit()">提交</el-button>
				</el-col>
			</el-row>
		</el-form>
</template>

<script>
let defReqRule = (message = '不能为空') => { return { required: true, message, trigger: 'blur' } };
import {serverPaths} from '@/utils/enumData'
export default {
	data() {
		return {
			uploadUrl: serverPaths.uploadUrl,
			tableDataLoading: false,
			openValue: 1,
			closeValue: 0,
			dataForm: {
				id: 1,
				isOpen: 1,
				isApprove: 1,
				type: 1,
				oneRate: "",
				twoRate: "",
				artificerRate: "",
				agentRate: "",
				mostRate: "",
				userImage: "",
				fxyImage: "",
				oneFee: "",
				oneRecommendRate: "",
				twoFee: "",
				twoRecommendRate: "",
				fxmLimit: 1,
				fxmLimitDays: "",
			},
			dataRule: {
				isOpen: [ defReqRule('请选择是否启用') ],
				isApprove: [ defReqRule('请选择是否审核') ],
				type: [ defReqRule('请选择提成方式') ],
				oneRate: [ defReqRule('请输入一级分销返佣！') ],
				twoRate: [ defReqRule('请输入二级分销返佣') ],
				artificerRate: [ defReqRule('请输入技师承担') ],
				agentRate: [ defReqRule('请代理商承担') ],
				mostRate: [ defReqRule('请输入返佣最高比例') ],
				userImage: [ defReqRule('请上传邀请用户推广海报背景图') ],
				fxyImage: [ defReqRule('请上传邀请分销员推广海报背景图') ],
				oneFee: [ defReqRule('请输入一级分销员门槛费') ],
				oneRecommendRate: [ defReqRule('请输入一级推荐提成') ],
				twoFee: [ defReqRule('请输入二级分销员门槛费') ],
				twoRecommendRate: [ defReqRule('请输入二级推荐提成') ],
				fxmLimit: [ defReqRule('请选择分销码时效性') ],
			},
		}
	},
	methods: {
		handleSelect() {
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
				if (this.dataForm.id) {
					this.$http({
						url: this.$http.adornUrl("commission/fxyConfig/info"),
						method: 'get',
						params: this.$http.adornParams({
							id: this.dataForm.id,
						}),
					}).then(({ data }) => {
						if (data && data.code === 0) {
							if(data.data!=null){
								this.dataForm = data.data
							}
						}
					})
				} else {
					//重置表单
					Object.keys(this.dataForm).forEach(x => {
						this.dataForm[x] = '';
					})
				}
			})
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					let saveData = Object.assign({}, this.dataForm);
					this.$http({
						url: this.$http.adornUrl("commission/fxyConfig/save"),
						method: 'post',
						params: this.$http.adornParams(saveData)
					}).then(({data}) => {
						if (data && data.code === 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.handleSelect();
								}
							})
						} else {
							this.$message.error(data.msg)
						}
					})
				}
			})
		},
		handleUserImageSuccess(file) {
			this.dataForm.userImage = file.data;
		},
		onUserImageProgress(event, file, fileList) {
			this.dataForm.userImage = parseInt(event.percent);
		},
		handleFxyImageSuccess(file) {
			this.dataForm.fxyImage = file.data;
		},
		onFxyImageProgress(event, file, fileList) {
			this.dataForm.fxyImage = parseInt(event.percent);
		},
	},
	mounted() {
		this.handleSelect();
	},
}
</script>
