<template>
    <div class="Quick-Entry fsize-m2">
        <div class="Quick-Entry-main">
            <el-card class="box-card" @click.native="handleCard(item)" :key="index"
                     v-for="(item, index) of pageData.cardControl"
                     :class="{
                first: index === 0,
                two: index === 1,
                three: index === 2,
                four: index === 3
            }" shadow="always">
                <h3>{{item.name === null ? '自定义入口': item.name}}</h3>
                <p>{{item.intro === null ? '管理员可根据自身实际需求自定义一个快捷入口按键': item.intro}}</p>
                <span @click.stop="cardEditor(index)" class="icon-editor"><i class="el-icon-edit-outline"></i></span>
            </el-card>
        </div>

        <el-dialog
                title="自定义入口"
                :visible.sync="showEditorDl"
                width="60%"
                center>
            <div class="d-wrap">
                <perfect-scrollbar>
                    <div class="d-content">
                        <el-card @click.native="changeControlCard(item)" class="d-box-card" shadow="hover" v-for="(item,index) in pageData.lists" :key="index">
                            <div >
                                <h3>{{item.name}}</h3>
                                <p>{{item.intro === null ? '暂无描述': item.intro}}</p>
                            </div>
                        </el-card>
                    </div>
                </perfect-scrollbar>
            </div>
            <span slot="footer" class="dialog-footer">
                </span>
        </el-dialog>
    </div>
</template>

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

    export default {
        name: "QuickEntry",
        props: {
            busData: {
                type: Object,
                require: true,
            },
        },
        components: {
            PerfectScrollbar
        },
        data() {
            return {
                pageData: {
                    cardControl: [],
                    lists: [],
                },
                cardIndex: null,
                showEditorDl: false
            }
        },
        watch: {
            busData: {
                handler(newVal, oldVal) {
                    this.pageData.lists = newVal.allData;
                    this.pageData.cardControl = newVal.defaultData === null ? [
                        {
                            name: '自定义入口',
                            intro: '管理员可根据自身实际需求自定义一个快捷入口按键',
                            url: '',
                        },
                        {
                            name: '自定义入口',
                            intro: '管理员可根据自身实际需求自定义一个快捷入口按键',
                            url: '',
                        },
                        {
                            name: '自定义入口',
                            intro: '管理员可根据自身实际需求自定义一个快捷入口按键',
                            url: '',
                        },
                        {
                            name: '自定义入口',
                            intro: '管理员可根据自身实际需求自定义一个快捷入口按键',
                            url: '',
                        }
                    ] : newVal.defaultData;
                },
                deep: true
            }
        },
        methods: {
            cardEditor(index) {
                this.showEditorDl = true;
                this.cardIndex = index;
            },
            handleCard(data) {
                this.$emit('change', data);
            },
            changeControlCard(data) {
                this.pageData.cardControl[this.cardIndex] = data;
                this.$emit('getData', this.pageData.cardControl);
                this.showEditorDl = false;
            }
        }
    }
</script>

