<style>
    .diy-rubik .layout {
        width: 750px;
        position: relative;
    }
    .diy-rubik .layout .rubik {
        position: absolute;
        top: 0;
        left: 0;
        border: 1px dashed #c9c9c9;
        cursor: pointer;
        color: #c9c9c9;
        z-index: 11;
    }
    .diy-component-preview{
        background-color: #fff;
    }
    .diy-component-preview:hover {
        box-shadow: inset 0 0 10000px rgba(0, 0, 0, .03);
    }
</style>
<template>
    <div :class="{'active':rubData.isCked}">
        <div class="diy-component-options" v-if="rubData.isCked">
            <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
            <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
            <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button>
            <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
        </div>
        <div class="diy-rubik">
            <div class="diy-component-preview">
                <div class="layout" style="height:360px;">
                    <div class="rubik" style="width:100%;height:100%;z-index:16;"></div>
                    <!-- <div flex="main:center cross:center" class="rubik" style="x: 0px; y: 0px; width: calc(100% - 0px); height: calc(100% - 0px); left: 0%; top: 0%;">
                        <span>宽度为750，不限高度</span>
                    </div> -->
                </div>
            </div>
            <div class="diy-component-edit" v-if="rubData.isCked">

            </div>
        </div>
    </div>
</template>
<script>
  export default {
    props: ["rubData","index","dataLeng"],
    data() {
      return {

      };
    },
    created() {

    },
    methods: {
        // 魔方展示样式(preview)
        blockStyle(index) {
            // if (index === 8) {
            //     let per = 750 / this.data.w;
            //     this.data.height = this.data.h * 750 / this.data.w;
            //     return `height: ${this.data.height}px;background-image: url('${this.img}');background-size: ${per}px ${per}px;`;
            // } else {
            //     if (index === 0) {
            //         this.data.height = 'auto';
            //         return `height: ${this.data.list[0].pic_url ? 'auto' : '360px'}`;
            //     }
            //     return `height: ${this.style_list[index] ? this.style_list[index].height : 360}px`;
            // }
        },

    },
    mounted() {

    }
  };

</script>
