<template>
    <div class="wrap" ref="mapmidbox">
        <!-- <div class="layoutJSON">
            名称<code>[x, y, w, h]</code>:
            <div class="columns">
                <div class="layoutItem" v-for="item in layout" :key="item.i">
                    <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
                </div>
            </div>
        </div> -->
        <div class="setBtns">
            <button @click="addItem">增加</button>
            <button @click="restItem">重置</button>
            <!-- <input type="checkbox" v-model="draggable" /> 拖拽 -->
            <!-- <input type="checkbox" v-model="resizable" /> 大小 -->
        </div>
        <grid-layout :layout.sync="layout"
                     :col-num="colNum"
                     :row-height="30"
                     :is-draggable="draggable"
                     :is-resizable="resizable"
                     :vertical-compact="false"
                     :use-css-transforms="true"
                     :prevent-collision="false"
        >
            <grid-item v-for="item in layout"
                       :static="item.static"
                       :x="item.x"
                       :y="item.y"
                       :w="item.w"
                       :h="item.h"
                       :i="item.i"
                       :key="item.i"
                       :style="{'backgroundColor':item.c,}"
            >
                <span class="text">{{item.i}}</span>
                <span class="remove" @click="removeItem(item.i)">x</span>
            </grid-item>
        </grid-layout>
        <van-grid direction="horizontal" :column-num="2" class="footer">
            风险等级图例:
            <span class="riskTab type1"></span>重大风险
            <span class="riskTab type2"></span>较大风险
            <span class="riskTab type3"></span>一般风险
            <span class="riskTab type4"></span>较小风险
        </van-grid>
    </div>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout"
import screenfull from "screenfull";
import { getFun, postFun } from "@/service/table.js";
// 动态添加/删除
export default {
    name:'riskView',
    components: {
        GridLayout,
        GridItem
    },
    data() {
        return {
            layout: [
                { x: 0, y: 0, w: 2, h: 3, i: "办公室1",c:'#FF4433'},
                { x: 2, y: 0, w: 2, h: 3, i: "办公室2",c:'#FF9800'},
                { x: 4, y: 0, w: 2, h: 3, i: "办公室3",c:'#FFFF00'},
                { x: 6, y: 0, w: 2, h: 3, i: "办公室4",c:'#0091EA'},
                { x: 0, y: 3, w: 2, h: 3, i: "办公室5",c:'#FF4433'},
            ],
            draggable: true,
            resizable: true,
            colNum: 16,
            index: 0,
            isScreenFull :null,
        }
    },
    mounted() {
        // this.$gridlayout.load();
        this.index = this.layout.length;
        // screenfull.toggle(this.$refs.mapbox);
        this.$nextTick(() => {
            // this.rotateBox();
        });
    },
    methods: {
        rotateBox() {
            this.isScreenFull = !this.isScreenFull;//是否全屏状态
            let width = document.documentElement.clientWidth,//页面宽度
                height = document.documentElement.clientHeight,//页面高度
                wrapper = this.$refs.mapmidbox,//需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
                style = "";//样式
            if (height < width) {//注意原来就是宽屏时不用横屏
                return;
            }
            if (this.isScreenFull) {
                // 横屏
                style += "width:" + height + "px;";
                style += "height:" + width + "px;";
                style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
                // 注意旋转中点的处理
                style +=
                "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
                style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
            } else {
                // 竖屏
                style += "width:100%";
                style += "height:100%;";
                style += "-webkit-transform: rotate(0); transform: rotate(0);";
                style += "-webkit-transform-origin: 0 0;";
                style += "transform-origin: 0 0;";
            }
            wrapper.style.cssText = style;
            },

        // 增加
        addItem: function () {
            this.layout.push({
                x: (this.layout.length * 2) % (this.colNum || 12),
                y: this.layout.length + (this.colNum/2 || 12), // puts it at the bottom
                w: 2,
                h: 3,
                i: '办公室' + (this.index +1),
                c: '#eee'
            });
            this.index++;
            console.log('this.layout==>>',this.layout)
        },
        // 重置
        restItem(){
            this.layout =  [
                { x: 0, y: 0, w: 2, h: 3, i: "办公室1",c:'#FF4433'},
                { x: 2, y: 0, w: 2, h: 3, i: "办公室2",c:'#FF9800'},
                { x: 4, y: 0, w: 2, h: 3, i: "办公室3",c:'#FFFF00'},
                { x: 6, y: 0, w: 2, h: 3, i: "办公室4",c:'#0091EA'},
                { x: 0, y: 2, w: 2, h: 3, i: "办公室5",c:'#FF4433'},
            ]
        },
        // 删除
        removeItem: function (val) {
            const index = this.layout.map(item => item.i).indexOf(val);
            this.layout.splice(index, 1);
        },
        rgbColor(){//rgb颜色随机
            const r = Math.floor(Math.random()*256);
            const g = Math.floor(Math.random()*256);
            const b = Math.floor(Math.random()*256);
            return `rgb(${r},${g},${b})`;
        },
    }
}
</script>

<style scoped >
.wrap{
    height: 100vh;
    width: 100vw;
    /* transform: rotate(90deg);
   transform-origin: bottom left; */
}
.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 0.3rem;
    font-weight: 600;
}
.riskTab{
    display: inline-block;
    width: 50px;
    height: 20px;
    margin: 0 10px 0px 15px;
    border-radius: 5px;
}
.type1{
    background-color: #FF4433;
}
.type2{
    background-color: #FF9800;
}
.type3{
    background-color: #FFFF00;
}
.type4{
    background-color: #0091EA;
}
.layoutJSON {
    background: #ddd;
    border: 1px solid black;
    padding: 10px;
}

.columns {
    -moz-columns: 120px;
    -webkit-columns: 120px;
    columns: 120px;
}

/*************************************/
.setBtns{
    padding: 10px;
    vertical-align: middle;
    display: flex;
    align-items: center;
}
.setBtns input, .setBtns button{
    margin-left: 15px;
}
.remove {
    position: absolute;
    right: 2px;
    top: 0;
    cursor: pointer;
}
.vue-grid-item {
    -ms-touch-action: none;
    touch-action: none;
    box-sizing: border-box;
    container-type: inline-size;
}
.vue-grid-layout {
    background: #eee;
}

.vue-grid-item:not(.vue-grid-placeholder) {
    background: #ccc;
    border: 1px solid black;
}

.vue-grid-item .resizing {
    opacity: 0.9;
}

.vue-grid-item .static {
    background: #cce;
}

.vue-grid-item .text {
    writing-mode:vertical-rl;
    font-size: 10cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}

.vue-grid-item .no-drag {
    height: 100%;
    width: 100%;
}

.vue-grid-item .minMax {
    font-size: 12px;
}

.vue-grid-item .add {
    cursor: pointer;
}

.vue-draggable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
    background-position: bottom right;
    padding: 0 8px 8px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: pointer;
}

</style>