<template>
    <el-dialog custom-class="classify-delete-wrap"
        :visible.sync="hintDialogShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :append-to-body="false"
        @close="$emit('close')"
        center
        width="400px"
        v-dialogDrag
    >
        <div slot="title" style="display: flex; align-items: center;">
            <i style="color:#FF8A00;font-size: 16px;" class="el-icon-warning"></i>
            <span style="font-size: 16px;color:#333;margin-left: 5px;">提示</span>
        </div>
        <div class="dialog-container">
            <p>该图分类已添加节点链接，不允许删除！</p>
            <div class="frame-list">
                <p class="frame-item" v-for="(item,index) in detailArr" :key="index" @click="goToFrameList(item)">
                    {{index+1}}、{{item.FrameworkName}}({{item.NodeName}})
                </p>
            </div>
        </div>
        <div class="dialog-footer">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button type="primary" @click="$emit('close')">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props:{
        hintDialogShow:{
            type:Boolean,
            default:false
        },
        detailArr:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {

        };
    },
    methods: {
        goToFrameList(item){
            window.open(`/chartframe?frameId=${item.ChartFrameworkId}`);
        }
    },
};
</script>

<style lang="scss">
.classify-delete-wrap{
    .el-dialog__header{
        background-color: transparent;
        border-bottom:1px solid #ECECEC;
        .el-dialog__headerbtn>i{
            color: #C0C4CC;
        }

    }
    .dialog-container{
        .frame-item{
            cursor: pointer;
            text-decoration: underline;
            &:hover{
                color:#0052D9;
            }
        }
    }
    .dialog-footer{
        padding:25px 0;
        text-align: right;
    }
}
</style>
