<template>
    <el-dialog v-if="showDialogType!==2"
               title="提示"
               class="mta-dialog"
               :visible.sync="showDialog"
               :show-close="showBtnClose"
               @close="dialogClose"
               :close-on-click-modal="false"
               center
               :width="dlWidth">
    <span slot="title">
        <div v-if="type===1" class="dialog-img">
            <div>
                <img src="@/assets/images/icons/notice-bell.svg" alt="image">
            </div>
        </div>
        <div v-if="type===2" class="dialog-img">
            <div>
                <img src="@/assets/images/icons/dengDl.svg" alt="image">
            </div>
        </div>
        <div v-if="type===3" class="dialog-img">
            <div>
                <img src="@/assets/images/icons/answerDl.svg" alt="image">
            </div>
        </div>
    </span>
        <!--<p style="line-height: 20px;">
            {{conent.conent}}
        </p>-->

        <perfect-scrollbar>
            <div class="mta-dialog-content">
                <slot></slot>
            </div>
        </perfect-scrollbar>
        <span slot="footer" class="dialog-footer">
        <slot name="footer"></slot>
        <span >
            <el-button @click="handleCancel" size="mini" v-if="cancelFlag===1">取 消</el-button>
             <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </span>
    </el-dialog>
    <el-dialog v-else-if="showDialogType===2"
               :visible.sync="showDialog"
               :show-close="true"
               class="mta-dialog2"
               :close-on-click-modal="false"
               @close="dialogClose"
               center
               width="20%">
        <span slot="title">
        </span>
        <div class="userInfo-box">
            <div class="fsize-m2">
                <span>{{conent.title}}</span>
            </div>
            <div class="fsize-m2 score-box">
                <img src="@/assets/images/icons/gongxi.svg" alt="">
                <div>
                    <span>得分：</span>
                    <span class="score-word">{{conent.score}}分</span>
                </div>
                <img src="@/assets/images/icons/gongxi.svg" alt="" class="xz-img">
            </div>
            <div class="line-div"></div>
            <div class="dialogDiv">
                <label class="dialogLabel">总分：</label>
                <span class="dialogSpan">{{conent.totalPoints}}分</span>
            </div>
            <div class="dialogDiv">
                <label class="dialogLabel">及格分：</label>
                <span class="dialogSpan">{{conent.passPoints}}分</span>
            </div>
            <!--       <div class="dialogDiv">
                       <label class="dialogLabel">得分</label>
                       <span class="dialogSpan">{{conent.score}}分</span>
                   </div>-->
            <div class="dialogDiv">
                <label class="dialogLabel">正确率：</label>
                <span class="dialogSpan">{{conent.correct}}</span>
            </div>
        </div>
        <!--  <slot></slot>-->
        <span slot="footer" class="dialog-footer">
            <slot name="footer"></slot>
            <span>
                 <el-button @click="goPage" size="medium" style="background: #FFA111;border-color: #FFA111;" type="primary">确 定</el-button>
            </span>
      </span>
    </el-dialog>
</template>

<script>
    import { PerfectScrollbar } from 'vue2-perfect-scrollbar';

    export default {
        name:       'mtaDialog',
        components: {
            PerfectScrollbar,
        },
        props:      {
            dialogVisible:  {
                type:    Boolean,
                require: true,
            },
            type:           {
                // 1 是 铃 ， 2 是 灯 ， 3 是 文件 ==> 图片
                type:    Number,
                default: 1,
            },
            showBtnClose: {
                type: Boolean,
                default: true,
            },
            conent:         {
                type: Object,
            },
            showBtn:        {
                type:    Boolean,
                require: true,
                default: false,
            },
            showDialogType: {
                type:    Number,
                default: 1,
            },
            dlWidth:        {
                type:    String,
                default: '20%',
            },
            //取消按钮隐藏显示标志
            cancelFlag:           {
                // 0隐藏 1显示
                type:    Number,
                default: 0,
            },
        },
        data() {
            return {
                showDialog: this.dialogVisible,
                img:        '',
                images:     [
                    '../../../assets/images/icons/notice-bell.svg',
                ],
            };
        },
        watch:      {
            dialogVisible: {
                handler() {
                    this.showDialog = this.dialogVisible;
                },
                immediate: true,
            },
        },
        methods:    {
            handleConfirm() {
                this.$emit('update:dialogVisible', false);
                this.$emit('confirmCallback');
            },
            //取消
            handleCancel() {
                this.$emit('cancleCallback');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            dialogClose() {
                this.$emit('update:dialogVisible', false);
                this.$emit('close');
            },
            goPage() {
                this.$emit('update:dialogVisible', false);
                if(this.conent.personFlag=='kaoshi'){
                    this.$router.push({ path: '/c/personalCenter/lists' });
                }else if(this.conent.personFlag=='kecheng'){
                    this.$router.push({ name: 'kechengDetails' });
                }else {
                    this.$router.push({ path: '/c/exam/lists' });
                }
               // this.$router.push({ path: '/c/exam/lists' });
            },
        },
    };
</script>

