<template>
    <el-dialog custom-class="explain-dialog-wrap"
        :visible.sync="showExplain"
        :close-on-click-modal="false"
        :append-to-body="true"
        center
        width="976px"
        v-dialogDrag
        top="8vh"
        title="操作说明"
        @close="$emit('close')"
    >
        <div class="dialog-container">
            <div class="explain-text" v-for="text,index in textArray" :key="index" v-html="text">
            </div>
        </div>
        <div class="dialog-btn">
            <el-button type="primary" @click="$emit('close')">知道了</el-button>
        </div>
        
    </el-dialog>
</template>

<script>
import * as explainText from './explainText'
export default {
    props:{
        showExplain:{
            type:Boolean,
            default:false
        },
        textArrName:{
            type:String,
            default:'chartrelevanceTextArr'
        }
    },
    computed:{
        textArray(){
            return explainText[this.textArrName]
        }
    },
    data() {
        return {

        };
    },
    methods: {

    },
};
</script>

<style scoped lang="scss">
.explain-dialog-wrap{
    .dialog-container{
        .explain-text{
            font-size: 16px;
            padding-bottom: 20px;
            &:not(:last-child){
                border-bottom:1px solid #D9D9D9;
            }
            &:not(:first-child){
                padding-top: 20px;
            }
        }
    }
    .dialog-btn{
        margin-top: 25px;
        padding-bottom: 25px;
        text-align: center;
    }
}
</style>
