<template>
    <div class="reviewDialog">
        <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" label-width="0">
                <el-form-item label="" prop="star">
                    <div class="rateBox">
                        <div class="tipinfo">这次合作还愉快吗，评价一下可以帮助到其他人哦！</div>
                        <el-rate v-model="form.star"></el-rate>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="content">
                    <el-input type="textarea" v-model="form.content" placeholder="说两句吧"></el-input>
                </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="tooltip" :visible.sync="flowerDialog">
            <div class="flower1">
                <img src="/assets/home/flower.png" alt="" />
                感谢您的评价!
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addToCompany, addToUser } from '@/api/review/myreview.js'
export default {
    data() {
        return {
            dialogVisible: false,
            form: {},
            rules: {
                star: [{ required: true, message: '请选择评分', trigger: 'blur' }],
                content: [{ required: true, message: '请填写内容', trigger: 'blur' }],
            },
            taskId: null,
            appraisee: null,
            flowerDialog: false,
        }
    },
    methods: {
        submit() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    if (this.appraisee) {
                        // 公司评价用户
                        const data = {
                            taskId: this.taskId,
                            star: this.form.star,
                            content: this.form.content,
                            appraisee: this.appraisee == 'one' ? null : this.appraisee,
                        }
                        const loading = this.$loading({
                            lock: true,
                            text: '请稍候···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255, 255, 255, 0.1)',
                        })
                        const res = await addToUser(data)
                        if (res.code && res.code == 200) {
                            this.$emit('refresh')
                            this.cancle()
                            this.flowerDialog = true
                            setTimeout(() => {
                                this.flowerDialog = false
                            }, 1000)
                        } else {
                            this.$message.error('评价失败，请联系管理员')
                        }
                        loading.close()

                        // this.$message.success('感谢您的评价')
                    } else {
                        // 用户评价公司
                        const data = {
                            taskId: this.taskId,
                            star: this.form.star,
                            content: this.form.content,
                        }
                        const loading = this.$loading({
                            lock: true,
                            text: '请稍候···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255, 255, 255, 0.1)',
                        })
                        const res = await addToCompany(data)
                        if (res.code && res.code == 200) {
                            this.$emit('refresh')
                            this.cancle()
                            this.flowerDialog = true
                            setTimeout(() => {
                                this.flowerDialog = false
                            }, 1000)
                        } else {
                            this.$message.error('评价失败，请联系管理员')
                        }
                        loading.close()

                        // this.$message.success('感谢您的评价')
                    }
                }
            })
        },
        cancle() {
            this.dialogVisible = false
            this.form = {}
            this.taskId = null
            this.appraisee = null
        },
    },
}
</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;
}
.tipinfo {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}
.rateBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.rateBox >>> .el-rate {
    margin: 15px 0;
}
.rateBox >>> .el-rate__icon {
    font-size: 30px !important;
}
.flower1 {
    width: 500px;
    height: 70px;
    background: #fcf6f0;
    box-shadow: 0px 1px 15px 0px rgba(39, 50, 63, 0.15);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    color: #000000;
}
.flower1 img {
    width: 25px;
    height: 30px;
}
.tooltip >>> .el-dialog {
    width: 500px;
    margin-top: 40vh !important;
}
.tooltip >>> .el-dialog__header {
    display: none;
}
.tooltip >>> .el-dialog__body {
    padding: 0;
}
</style>