<template>
    <div class="content">
        <div class="dragContent" :style="{top:bgPosition.top+'px',left:bgPosition.left+'px'}">
            <img :src="mapImage" class="bgImg" :style="{height:totalHeight-180+'px'}" alt="">
            <div class="gridInfo">
                <div class="grid-item" @mousedown="addStart(index)" @mouseover="changeMap(index)" v-for="(item,index) in mapInfo" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:color[item]}">

                    <el-tooltip v-if="checkInMap(index)" class="item" effect="dark" :content="tooltipContent(index)" placement="right">
                        <i class="el-icon-location-outline"></i>
                    </el-tooltip>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'
export default {
    name: 'MapInfo',
    props: {
        Mapstyle: {
            type: String,
            default: 'Content'
        }
    },
    created() {

        if (this.$route.query.id) {
            this.$http.get({
                url: '/landMark/getOne',
                data: {
                    id: this.$route.query.id
                }
            }).then(res => {
                if (res.success) {


                    this.width = res.data.mapWidth || 20;
                    this.height = res.data.mapHeight || 20;
                    this.mapRate = res.data.mapRate || 1;
                    if (res.data.mapInfo) {
                        this.mapInfo = res.data.mapInfo.split('');
                    }

                    this.mapImage = res.data.mapSprite || require('../assets/demo_picture.jpg');


                }
            })

            this.getPoint()




        }



    },
    data() {
        return {
            isDown: false,
            bgMove: true,
            bgPosition: {
                left: 0,
                top: 0
            },
            width: 32,
            height: 22,
            rate: 1,
            mapRate: 1,
            mapInfo: [],
            color: ['rgba(111, 189, 39,0.5)', 'rgba(227,98,100,0.4)', 'rgba(83,147,255,0.4)'],
            nowAdd: 0,
            startMoveIndex: 0,
            nowMoveIndex: 0,
            nowMapInfo: [],
            mapImage: '',
            aimPlaceContents: [],

        }
    },
    mounted() {

    },
    computed: {
        ...mapState(['totalHeight']),
    },
    methods: {
        getPoint() {
            if (this.Mapstyle == 'Content') {
                this.$http.get({
                    url: '/aimPlaceContent/all',
                    data: {
                        ownedLandMarkId: this.$route.query.id
                    }
                }).then(res => {
                    if (res.success) {
                        this.aimPlaceContents = res.data;
                    }
                })
            }
            else {
                this.$http.get({
                    url: '/aimPlacePosition/all',
                    data: {
                        ownedLandMarkId: this.$route.query.id
                    }
                }).then(res => {
                    if (res.success) {
                        this.aimPlaceContents = res.data;
                    }
                })
            }

        },
        createMap() {
            var sum = this.width * this.rate * this.height * this.rate
            var list = []
            for (var i = 0; i < sum; i++) {
                list.push(0)
            }
            this.mapInfo = list
            this.nowAdd = 0
        },
        addStart(index) {
            // this.nowMapInfo = [...this.mapInfo]
            // this.startMoveIndex = index
            // this.mapInfo.splice(index, 1, this.nowAdd)
            // this.addField(index);
            var val = this.checkInMap(index)
            if (val) {
                delete val.aimPlaceContentChildList
                this.$emit('editPoint', val)
            }
            else {
                this.$emit('addPoint', {
                    index: index,
                    X: this.getX(index),
                    Y: this.getY(index)
                })
            }

        },
        changeMap(index) {
            if (this.isDown) {
                this.nowMoveIndex = index
                console.log(this.getChangeList(this.startMoveIndex, index))
                this.mapInfo = [...this.nowMapInfo]
                this.getChangeList(this.startMoveIndex, index).forEach(item => {
                    this.mapInfo.splice(item, 1, this.nowAdd)
                })
            }

        },
        getX(index) {
            return index % (this.width * this.rate)
        },
        getY(index) {
            return parseInt(index / (this.width * this.rate))
        },
        getChangeList(index1, index2) {
            var list = []
            var list1 = [this.getX(index1), this.getX(index2)].sort((a, b) => { return a - b })
            var list2 = [this.getY(index1), this.getY(index2)].sort((a, b) => { return a - b })
            for (var i = list1[0]; i <= list1[1]; i++) {
                for (var j = list2[0]; j <= list2[1]; j++) {
                    if (list.indexOf(this.getIndex(i, j)) == -1) {
                        list.push(this.getIndex(i, j))
                    }
                }
            }
            return list
        },
        getIndex(x, y) {
            return y * (this.width * this.rate) + x
        },
        saveMapInfo() {

            if (this.$route.query.id) {


                var data = {
                    id: this.$route.query.id,
                    mapWidth: this.width,
                    mapHeight: this.height,
                    rate: this.rate,
                    mapInfo: this.mapInfo.join(''),
                };

                this.$http.post({
                    url: '/landMark/update',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.$message.success('成功');
                    } else {
                        this.$message.warning('失败')
                    }
                });

            }
        },
        checkInMap(index) {
            var check = false;
            this.aimPlaceContents.forEach(v => {
                if (index == v.mapIndex) {
                    check = v;
                    return false;
                }
            });

            return check;
        },
        addField(index) {
            // this.aimPlaceContents.push({
            //     mapIndex : index
            // });

            this.$emit('')
        },
        tooltipContent(index) {
            var val = this.checkInMap(index);
            if (val) {
                if (this.Mapstyle == 'Content') {

                    return '名称:' + val.name + ' X:' + val.arKitPosX + ' Y:' + val.arKitPosY
                } else {

                    return '名称:' + val.name + ' X:' + val.posX + ' Y:' + val.posY
                }
            }
        },



    }
}



</script>
<style lang="less" scoped>
.content {
    position: relative;
}
.dragContent {
    position: absolute;
    top: 60px;
    left: 0;
    border: 2px dashed #ccc;
    // cursor: move;
    z-index: 1;
    .gridInfo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: flex;
        flex-wrap: wrap;

        .grid-item {
            background-color: rgba(0, 0, 0, 0.3);
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 1);
        }
    }
}
.bgImg {
    position: relative;
    width: auto;
    z-index: 2;
}
</style>
