<template>
    <el-dialog title="利润配置" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="600px"
        @close="closeDialog">
        <div>
            <el-form ref="dialogForm" :model="dialogForm" :rules="dataRule" label-position="top">
                <el-form-item label="利润类型" prop="profitType">
                    <el-radio-group v-model="dialogForm.profitType" @change="profitTypeChange">
                        <el-radio :label="1">底价</el-radio>
                        <el-radio :label="2">比例</el-radio>
                        <el-radio :label="3">固定</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="利润参数" prop="profitParam">
                    <el-input v-show="dialogForm.profitType != 3" v-model="dialogForm.profitParam" maxlength="100"
                        placeholder="请输入" clearable />
                 <div v-show="dialogForm.profitType == 3" style="text-align: center;">
                    <el-table :data="dialogForm.profitParamVOList" stripe border>
                        <el-table-column label="下限" >
                            <template slot-scope="scope">
                                <el-form-item :prop="'profitParamVOList.' + scope.$index + '.min'" :rules="dataRule['min']">
                                <el-input v-model="scope.row.min" placeholder="请输入" clearable type="number" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="上限" >
                            <template slot-scope="scope">
                                <el-form-item :prop="'profitParamVOList.' + scope.$index + '.max'" :rules="dataRule['max']">
                                <el-input v-model="scope.row.max" placeholder="请输入" clearable type="number" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="利润" >
                            <template slot-scope="scope">
                                <el-form-item :prop="'profitParamVOList.' + scope.$index + '.profit'" :rules="dataRule['profit']">
                                <el-input v-model="scope.row.profit" placeholder="请输入" clearable type="number" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="130">
                            <template slot-scope="scope">
                                <el-button @click="handleProfitParamDelete(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button plain @click="handleAddProfitParam">新增</el-button>
                </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button plain @click="(visible = false)">取消</el-button>
            <el-button v-jclick type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { batchUpdateProfit } from '@/api/sch/classType';

export default {
    name: 'ProfitSettingDialog',
    data() {
        return {
            visible: false,
            canSubmit: true,
            dialogForm: {
                typeIds: undefined,
                profitType: 1,
                profitParam: undefined,
                remark: undefined,
                profitParamVOList: [{
                min: 0,
                max: undefined,
                profit: undefined
            }]
            },
            dataRule: {
                profitType: [{ required: true, message: '利润类型不能为空', trigger: 'blur' }],
                min: [{ required: true, message: '上限不能为空', trigger: 'blur' }],
                max: [{ required: true, message: '下限不能为空', trigger: 'blur' }],
                profit: [{ required: true, message: '利润不能为空', trigger: 'blur' }]

            }
        };
    },
    methods: {
        init(info = undefined) {
            // debugger
            this.visible = true;
            this.canSubmit = true;
            this.$nextTick(() => {
                this.resetDialogForm();
                this.$refs['dialogForm'].resetFields();
                if (info) {
                    this.dialogForm = { ...this.dialogForm, ...info };
                }
            });
        },
        resetDialogForm() {
            this.dialogForm = {
                typeIds: undefined,
                profitType: 1,
                profitParam: undefined,
                remark: undefined,
                profitParamVOList: []
            };
        },
        closeDialog() {
            this.$emit('update:dialogVisible', false);
        },
        handleAddProfitParam() {
            this.dialogForm.profitParamVOList.push({
                min: 0,
                max: undefined,
                profit: undefined
            });
        },
        handleProfitParamDelete(index) {
            console.log(index);
            this.dialogForm.profitParamVOList.splice(index, 1);
        },
        profitTypeChange(type) {
            if (type == 3) {
                this.dialogForm.profitParamVOList.push({
                    min: 0,
                    max: undefined,
                    profit: undefined
                });
            } else {
                this.$set(this.dialogForm, "profitParamVOList", []);
            }
        },
        // 表单提交
        dialogFormSubmit() {
            this.$refs.dialogForm.validate((valid) => {
                if (valid) {
                    this.canSubmit = false;
                    // 校验完成，调接口
                    batchUpdateProfit(this.dialogForm)
                        .then((resp) => {
                            this.canSubmit = true;
                            if (resp.code == 200) {
                                this.$message.success('保存成功');
                                this.$emit('refreshDataList');
                                this.visible = false;
                            }
                        })
                        .catch(() => {
                            this.canSubmit = true;
                        });
                }
            });
        }
    }
};
</script>