<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>
					<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>
					<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="salesmanRate">
						<el-input-number v-model="dataForm.salesmanRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col>
					<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>
					<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="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>
					<el-form-item label="邀请业务员推广海报背景图" prop="salesmanImage">
						<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.salesmanImage"
								:action="uploadUrl"
								:show-file-list="false"
								:on-success="handleSalesmanImageSuccess"
								:on-progress="onSalesmanImageProgress"
							>
								<img
									v-if="dataForm.salesmanImage != ''"
									:src="dataForm.salesmanImage"
									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>
					<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,
				salesmanRate: "",
				artificerRate: "",
				agentRate: "",
				type: 1,
				salesmanImage: "",
			},
			dataRule: {
				isOpen: [ defReqRule('请选择是否启用') ],
				isApprove: [ defReqRule('请选择是否审核') ],
				salesmanRate: [ defReqRule('请输入业务员返佣') ],
				artificerRate: [ defReqRule('请输入技师承担') ],
				agentRate: [ defReqRule('请代理商承担') ],
				type: [ defReqRule('业务员与渠道商分佣关系') ],
				salesmanImage: [ defReqRule('请上传邀请业务员推广海报背景图') ],
			},
		}
	},
	methods: {
		handleSelect() {
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
				if (this.dataForm.id) {
					this.$http({
						url: this.$http.adornUrl("commission/ywyConfig/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/ywyConfig/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)
						}
					})
				}
			})
		},
		handleSalesmanImageSuccess(file) {
			this.dataForm.salesmanImage = file.data;
		},
		onSalesmanImageProgress(event, file, fileList) {
			this.dataForm.salesmanImage = parseInt(event.percent);
		},
	},
	mounted() {
		this.handleSelect();
	},
}
</script>
