<template>
    <div class="robot-tools">
        <div class="robot-reanswer" @click="reAnswer(listData)">
            <i class="el-icon-refresh-right"></i>
            重新回答
        </div>
        <div class="stopMsg" style="color: #cfcfcf; cursor: default" v-if="type !== 'error'">已停止生成</div>
        <div class="stopMsg" v-if="type !== 'error'">
            停止输出
        </div>
        <div class="right-tools">
            <el-tooltip content="赞" effect="light" placement="top">
                <div class="tools-icon" @click="doZan(listData)">
                    <img src="../static/zan.png" alt="" v-if="listData.feedback !== 1">
                    <img alt="" src="../static/zan-active.png" v-else>
                </div>
            </el-tooltip>
            <el-popover v-model="popover" placement="top-start" trigger="manual">
                <div slot="reference">
                    <el-tooltip content="踩" effect="light" placement="bottom">
                        <div class="tools-icon" @click="openPopover" v-if="listData.feedback !== 2">
                            <img alt="" src="../static/cai.png">
                        </div>
                        <div class="tools-icon" v-else @click="doCai(listData)">
                            <img alt="" src="../static/cai-active.png">
                        </div>
                    </el-tooltip>
                </div>
                <div class="popover-box">
                    <div class="pop-title">
                        你的反馈将 <br/>
                        帮助智能批阅优化进步
                    </div>
                    <i class="el-icon-close" style="font-size: 2rem"
                       @click="cancelPopover()"></i>
                    <div class="error-list">
                        <el-checkbox-group v-model="errors">
                            <el-checkbox v-for="item in errorList"
                                         :key="item.code"
                                         :label="item.code"
                                         border
                                         class="check">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                        <el-input v-model="input" :rows="4"
                                  maxlength="30"
                                  placeholder="其他"
                                  resize="none"
                                  show-word-limit
                                  type="textarea" />
                        <div class="sumit-button">
                            <el-button :disabled="canSubmit" @click="doCai(listData)">提交</el-button>
                        </div>
                    </div>
                </div>
            </el-popover>
        </div>
    </div>
</template>
<script>
import {errorList} from "../utils/config";
import {setFeedback} from '../api/index';

export default {
    name: 'ChatTools',
    props: {
        type: {
            type: String,
            default: 'chart'
        },
        detailData: {
            type: Object,
            default: () => {}
        },
    },
    data() {
        return {
            input: "",
            popover: false,
            errors: [],
            errorList: errorList,
        }
    },
    computed: {
        canSubmit() {
            return this.errors.length === 0 && this.input === "";
        },
        listData() {
            return this.detailData;
        },
    },
    methods: {
        cancelPopover() {
            this.popover = false;
        },
        openPopover() {
            this.popover = true;
        },
        reAnswer(list) {
            this.$emit('on-reanswer', list);
        },
        async doZan(list) {
            list.feedback = list.feedback === 1 ? 0 : 1;
            const param = {
                commentId: list.id,
                feedbackId: list.feedbackId,
                type: list.feedback,
            }
            list.feedbackId = await setFeedback(param);
            this.$forceUpdate();
        },
        async doCai(list) {
            let caiOption = {};
            if (!list.cai) {
                caiOption = {
                    desc: this.input,
                    tags: this.errors
                }
            }
            list.feedback = list.feedback !== 2 ? 2 : 0;
            const param = {
                commentId: list.id,
                feedbackId: list.feedbackId,
                type: list.feedback,
            }
            list.feedbackId = await setFeedback(param, caiOption);
            this.$forceUpdate();
            if (list.feedback === 2) {
                this.$message.success('感谢您的反馈');
            }
            this.popover = false;
            this.input = '';
            this.errors = [];
        }
    }
}
</script>
<style lang="scss" scoped>
.robot-tools {
    position: relative;
    margin-top: 8px;
    .robot-reanswer {
        width: 104px;
        height: 32px;
        background-color: rgba(32, 40, 64, 0.078);
        border-radius: 16px;
        font-size: 13px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;

        &:hover {
            background: #ced0f0;
        }

        i {
            font-size: 18px;
            vertical-align: middle;
        }
    }
    .stopMsg {
        cursor: pointer;
        height: 20px;
        width: 100px;
        font-size: 16px;
        color: #316cff;
    }
    .tools-icon {
        width: 40px;
        height: 32px;
        background-color: rgba(32, 40, 64, 0.078);
        border-radius: 16px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
        margin-right: 8px;

        &:hover {
            background: #ced0f0;
        }
    }
    .right-tools {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
    }
}
.popover-box {
    width: 380px;
    height: 450px;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;

    .pop-title {
        width: 220px;
        height: 60px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 22px;
        color: #333333;
        line-height: 30px;
        text-align: left;
        font-style: normal;
    }

    .el-icon-close {
        position: absolute;
        right: 0;
        top: 0;
        color: #333333;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
            transform: rotate(-180deg);
        }
    }

    .error-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        .el-textarea__inner {
            resize: none;
        }

        .sumit-button {
            margin-top: 20px;
            margin-left: 114px;

            .el-button {
                width: 112px;
                height: 42px;
                background: linear-gradient(180deg, #5fa5ff 0%, #316cff 100%);
                border-radius: 21px;
                color: #fff;
            }
        }

        label {
            text-align: center;
        }

        .check.is-bordered {
            margin-right: 0;
            width: 165px;
            height: 42px;
            background: #f3f7ff;
            border-radius: 6px;
            margin-left: 0;
            margin-bottom: 10px;

            &:nth-child(2n-1) {
                margin-right: 10px;
            }

            ::v-deep .el-checkbox__inner {
                display: none;
            }
        }
    }

    ::v-deep .el-checkbox.is-bordered.is-checked {
        border-color: #316cff;
    }

    ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #316cff;
    }
}
</style>