<template>
    <div class="payDialog">
        <el-dialog class="mydialog" title="支付佣金" :visible.sync="dialogVisible" width="550px" @close="cancle" :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item prop="price">
                    <el-input v-model="form.price"></el-input>
                    <span class="tipinfo">请输入要支付的佣金</span>
                </el-form-item>
            </el-form>
            <div class="footerdialog">
                <span class="submit" @click="submit">确 定</span>
                <span class="cancle" @click="cancle">取 消</span>
            </div>
        </el-dialog>

        <el-dialog class="mydialog" title="支付佣金" :visible.sync="doubleOpen" width="550px" @close="cancleDouble" :close-on-click-modal="false">
            <div class="doubleDialog">
                <span class="tipinfo1">你将支付佣金给用户</span>
                <span class="unsername">{{ rowInfo.nick_name }}</span>
                <span class="pricenum">{{ form.price }}元</span>
            </div>
            <div class="footerdialog">
                <span class="submit" @click="submitDouble">确 定</span>
                <span class="cancle" @click="cancleDouble">取 消</span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { payTask } from '@/api/crowdsource/crowdsourceNew'
export default {
    data() {
        const isMoney = (rule, value, callback) => {
            var reg = /^(?!0+(\.0*)?$)\d+(\.\d{0,1})?$/
            if (this.taskprice == 0) {
                if (reg.test(value)) {
                    callback()
                } else {
                    callback(new Error(`请输入最多一位小数的正数`))
                }
            } else {
                if (reg.test(value)) {
                if (value > this.taskprice) callback(new Error('金额必须小于等于' + this.taskprice))
                else callback()
            } else {
                callback(new Error(`必须小于等于${this.taskprice},允许保留一位小数`))
            }
            }
            
        }
        return {
            doubleOpen: false,
            dialogVisible: false,
            form: {},
            rules: {
                price: [
                    { required: true, message: '请输入支付佣金', trigger: 'blur' },
                    { validator: isMoney, trigger: 'blur' },
                ],
            },
            // 行信息
            rowInfo: {},
            taskId: {},
            taskprice: 0,
        }
    },
    methods: {
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.doubleOpen = true
                }
            })
        },
        cancle() {
            this.dialogVisible = false
            this.form = {}
            this.rowInfo = {}
        },
        submitDouble() {
            const data = {
                taskId: this.taskId,
                testerId: this.rowInfo.user_id,
                price: this.form.price,
            }
            payTask(data).then((res) => {
                this.$message.success('支付成功')
                this.cancleDouble()
                this.cancle()
                this.$emit('refresh')
            })
        },
        cancleDouble() {
            this.doubleOpen = false
        },
    },
}
</script>

<style scoped>
.footerdialog {
    width: 100%;
    display: flex;
    justify-content: center;
}
.mydialog >>> .el-dialog__header {
    border-bottom: 1px solid rgba(153, 153, 153, 0.2);
    font-weight: bold;
    font-size: 20px;
    color: #000000;
}
.mydialog >>> .el-select {
    width: 390px;
}
.submit {
    width: 250px;
    height: 44px;
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 22px;
    line-height: 44px;
    text-align: center;
    margin-right: 10px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
}
.cancle {
    width: 250px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid #e0e0e0;
    line-height: 44px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    color: #666666;
    cursor: pointer;
}
.tipinfo {
    font-weight: 500;
    font-size: 16px;
    color: #666666;
}
.doubleDialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}
.tipinfo1 {
    font-size: 16px;
    color: #4d4d4d;
}
.unsername {
    font-weight: bold;
    font-size: 20px;
    color: #1a1a1a;
    margin: 10px 0;
}
.pricenum {
    font-weight: bold;
    font-size: 26px;
    color: #f54444;
}
</style>