<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="close">
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="95px">
                    <el-form-item label="标题:" prop="title" v-if="type === 1">
                        <el-input placeholder="请输入" v-model="ruleForm.title" maxLength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="描述:" prop="des" v-if="type === 1">
                        <el-input placeholder="请输入" v-model="ruleForm.des" type="textarea" maxLength="300"></el-input>
                    </el-form-item>
                    <el-form-item label="图片描述:" prop="picUrl" class="plate-icon pic" v-if="type === 1">
                        <Upload
                        :fileList="fileList"
                        @changeUploadFile="changeUploadFile"
                        @validateUpload="validateUpload"
                        :limitUpload="1"
                        :maximumSize="maximumSize"
                        :uploadType="1"
                        ref="upload"
                        ></Upload>
                    </el-form-item>
                    <el-form-item
                        label="处罚金额"
                        prop="punishAmount"
                        v-if="type === 1"
                        class="classify-input"
                    >
                        <el-input v-model="ruleForm.punishAmount" class="file-input"></el-input>
                    </el-form-item>
                    <el-form-item label="红包" prop="redEncelopId" v-if="type === 2">
                        <el-select v-model="ruleForm.redEncelopId" placeholder="请选择红包">
                            <el-option
                                v-for="item in options"
                                :key="item.name"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="padding-left:30%;margin-top:50px;">
                        <el-button @click="close()">取消</el-button>
                        <el-button
                            type="primary"
                            @click="submitForm('ruleForm')"
                            :disabled="submitBtndisabled"
                        >确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import Upload from '@/apps/mobile/components/uploadAuto/index';
import { validPositiveInteger } from '@/apps/mobile/utils/validate';
import { queryCouponsList, sendRedEnvelopes, expertsPunishments } from '@/apps/mobile/api/expert/index';
export default {
    components: {
        Upload,
    },
    data() {
        // 排序校验
        var checkMoney = (rule, value, callback) => {
            if (value && !validPositiveInteger(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            submitBtndisabled: false,
            expertId: null,
            chargeId: null,
            redEncelopId: null,
            ruleForm: {
                title: '',
                des: null,
                picUrl: null,
                punishAmount: '',
                redEncelopId: '',
            },
            fileList: [], // 图片列表
            maximumSize: 3, //图片大小  不超过3MB
            limitUpload: 1,
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    {
                        max: 50,
                        message: '长度最大50个字符',
                        trigger: 'blur',
                    },
                ],
                des: [
                    { required: true, message: '请输入描述', trigger: 'blur' },
                    {
                        max: 300,
                        message: '长度最大300个字符',
                        trigger: 'blur',
                    },
                ],
                punishAmount: [
                    { required: true, message: '请输入金额', trigger: 'blur' },
                    { validator: checkMoney, message: '请输入正整数', trigger: 'blur' },
                ],
                redEncelopId: [{ required: true, message: '请选择红包', trigger: 'change' }],
            },
            options: [],
            page: {
                pageNum: 1,
                pageSize: 1000,
            },
            type: null,
            title: null,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.type === 1) {
                        let imgUrl = null;
                        if (this.fileList.length > 0) {
                            console.log(this.fileList, 'this.fileList');
                            imgUrl = this.fileList[0].response.data.pathUrl;
                        }
                        let obj = {
                            chargeId: this.chargeId,
                            picUrl: imgUrl,
                            des: this.ruleForm.des,
                            title: this.ruleForm.title,
                            punishAmount: this.ruleForm.punishAmount
                        };
                        expertsPunishments(obj)
                            .then(res => {
                                console.log(res);
                                let message = '操作成功';
                                this.completeOperation(message);
                                this.ruleForm.punishAmount = "";
                            })
                            .catch();
                    } else {
                        sendRedEnvelopes(this.ruleForm.redEncelopId, this.expertId)
                            .then(res => {
                                console.log(res);
                                let message = '操作成功';
                                this.completeOperation(message);
                            })
                            .catch();
                    }
                } else {
                    return false;
                }
            });
        },
        validateUpload(data) {
            this.changeUploadFile(data.fileList);
            // console.log(data,'data');
            this.ruleForm.picUrl = data.validateValues;
            this.$refs['ruleForm'].validateField('picUrl');
        },
        changeUploadFile(fileList) {
            this.fileList = fileList;
            console.log(this.fileList, 'this.fileList');
        },
        close() {
            this.dialogVisible = false;
            this.ruleForm.title = "";
            this.ruleForm.des = "";
            this.ruleForm.punishAmount = "";
            this.$refs.upload.clearFiles(); // 清空已上传的文件列表
            this.fileList = [];
            this.$refs["ruleForm"].clearValidate();
        },
        open(data) {
            console.log(data);
            if (data.type === 1) {
                this.title = '处罚';
            } else {
                this.title = '发红包';
                this.getCouponsList();
            }
            this.expertId = data.id;
            this.chargeId = data.id;
            this.type = data.type;
            this.dialogVisible = true;
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
        getCouponsList() {
            let obj = {
                checkFalg: 1,
                type: 2,
                statuz: 1,
                ...this.page,
            };
            queryCouponsList(obj)
                .then(res => {
                    console.log(res);
                    this.options = res.data.records;
                })
                .catch();
        },
    },
    watch: {
        fileList(val) {
            this.$nextTick(() => {
                this.$refs.upload.changeHideUpload();
            });
        },
    },
};
</script>


<style lang="stylus" scoped></style>