<template>
    <el-dialog title="导出精准提升试题" class="mm_dialog" :visible="visible" width="360px" @close="handleClose">
        <div class="box">
            <div class="item" :class="{ isAnswer: isAnswer === 1 }" @click="isAnswer = 1">
                有答案解析
                <i class="iconfont icon_Check" v-if="isAnswer === 1"></i>
            </div>
            <div class="item" :class="{ isAnswer: isAnswer === 0 }" @click="isAnswer = 0">
                无答案解析
                <i class="iconfont icon_Check" v-if="isAnswer === 0"></i>
            </div>
        </div>
        <span slot="footer" class="dialog_footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="download">下载</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { ExtractFilename, DownloadFile, CreateLoadingInstance } from './tools'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        examId: {
            type: [String, Number],
            required: true
        },
        subjectCode: {
            type: [String, Number],
            required: true
        },
        knowledgeId: {
            type: [String, Number],
            required: true
        },
    },

    data() {
        return {
            isAnswer: 1
        };
    },

    methods: {
        handleClose() {
            this.$emit('update:visible', false);
        },

        download() {
            let downParams ={
                examId: this.examId,
                subjectCode: this.subjectCode,
                knowledgeId: this.knowledgeId, 
                isAnswer: this.isAnswer,
            }
            const loadingInstance = CreateLoadingInstance()
            this.$api.personalProfile.downloadPushQuestion(downParams).then(response => {
                const blob2 = new Blob([response.data], {
                    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                });

                const contentDisposition = response.headers['content-disposition'];
                const fileName = ExtractFilename(contentDisposition)
                DownloadFile(blob2, fileName)
                this.handleClose();
            }).catch(error => {
                this.$message.error('下载失败，请稍后重试');
            }).finally(() => {
                loadingInstance.close();
                this.$store.commit("question/SET_VARIANTION", -1); 
            });
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    display: flex;
    justify-content: space-between;
    .item {
        width: 150px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        color: #909399;
        background: #EDEFF6;
        border-radius: 4px;
        cursor: pointer;

        &.isAnswer {
            color: #2B65FF;
            background: rgba(46,100,250,0.1);
            border: 1px solid #2E64FA;
            box-shadow: 0 2px 6px rgba(43, 101, 255, 0.12);
            position: relative;
            /* 右下角的蓝色三角与对勾 */
            &::after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                border: 12px solid #2B65FF;
                border-top-color: transparent;
                border-left-color: transparent;
            }

            .iconfont {
                position: absolute;
                right: 0;
                bottom: -18px;
                font-size: 16px;
                color: #ffffff;
                z-index: 1;
            }
        }
    }
}
:deep(.el-dialog__headerbtn){
    top: 13px;
    font-size: 20px;
}
:deep(.el-dialog__title){
    font-weight: 500;
    font-size: 16px;
    color: #303133;
}
:deep(.el-button){
    width: 68px;
    height: 36px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    margin-left: 20px;
}
</style>