<template>
    <div class="pages">
        <div class="image-border image-border1"></div>
        <div class="image-border image-border2"></div>
        <div class="image-border image-border3"></div>
        <div class="image-border image-border4"></div>
        <div class="tabs">
            <ul>
                <li class="active">
                    区域管理
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="tree">
                    <span class="addMain" @click="addMain">
                        <em>添加主建筑
                        <img src="../assets/img/region/add.png" height="18" width="18"/></em>
                    </span>
                <el-tree
                        :data="tree"
                        show-checkbox
                        :props="defaultProps"
                        node-Key="Id"
                        default-expand-all
                        @node-click="handleNodeClick"
                        :expand-on-click-node="false">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                      <span class="treeIcon">
                          <!--第三层不能增加其子区域-->
                      <img src="../assets/img/region/add.png"
                           height="18" width="18"
                           v-if="node.level != 3"
                           @click="addLoft(node)"
                      />
                      <img src="../assets/img/region/edit.png"
                           height="18" width="18"
                           @click="editLoft(node)"
                      />
                      <img src="../assets/img/region/del.png"
                           height="18" width="18"
                           @click="delLoft(node)"
                      />
                      <img src="../assets/img/region/watch.png"
                           height="18" width="18"
                      />
                      </span>
                  </span>
                </el-tree>
            </div>
            <div class="plate">
                <div class="loftList">
                    <div class="plateTitle">
                        {{plateTitle}}
                    </div>
                    <ul class="list" v-if="loftListState">
                        <span v-if="!loftList">没有下属区域,请先添加</span>
                        <li v-for="loft in loftList" @click="seePic(loft)">
                            <img src="../assets/img/region/loft.png" height="22"
                                 width="20"/><em>{{loft.Name}}</em></li>
                    </ul>
                    <div class="plateImg" v-if="plateImg">
                        <!--<img src="../assets/img/main/RoomBg.png" height="769" width="1396"/>-->
                        <img :src="plateImgSrc"/>
                    </div>
                </div>
            </div>
        </div>
        <dialog_referrer_list
                :show="dialog_state"
                :title="dialog_title"
                :large="true"
                @dialog_cancel="dialog_cancel"
                @dialog_ok="dialog_ok"
        >
            <div class="dialogContent">
                <el-row :gutter="20">
                    <el-col :span="20">
                        <label>
                            建筑名称
                        </label>
                        <el-input v-model="dialog.name"></el-input>
                    </el-col>
                    <el-col :span="20">
                        <label>
                            建筑介绍
                        </label>
                        <el-input type="textarea" v-model="dialog.description"></el-input>
                    </el-col>

                    <!--<el-col :span="20" v-if="dialog_level != 1">-->
                    <el-col :span="20" v-if="true">
                        <label>
                            建筑平面图
                        </label>
                        <el-upload
                                :action="RegionPictureUploadUrl"
                                ref="upload"
                                list-type="picture-card"
                                :data="dialog"
                                :on-success="handleImgSuccess"
                                :before-upload="handleImgbefore"
                                :auto-upload="true">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img
                                        class="el-upload-list__item-thumbnail"
                                        :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
      </span>
                            </div>
                        </el-upload>

                        <img
                                v-if="dialog.imgSrc"
                                class="editImg"
                                :src="dialog.imgSrc" alt=""
                        >
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-col>
                </el-row>
            </div>
        </dialog_referrer_list>
    </div>
</template>

<script>
    import Global from '../Global.js'
    import dialog_referrer_list from '../components/dialog_referrer_list'
    import {
        GetRegionAndDectorSelect,
        RegionStatusEdit,
        RegionAdd,
        RegionPictureGetByRegionId,
        GetChildRegionSelect,
        RegionEdit,
        GetRegionplaneinfo,
    }
        from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                // dialog
                dialog_state: false,
                dialog_title: '',
                RegionPictureUploadUrl: headapi + 'v1/Company/RegionPictureUpload',
                dialog_type: '',//类型，1是添加，2是修改
                dialog_level: 1,//类型，1是楼（有图不显示），2是楼层（有图），3是会议室（有图）
                dialog: {
                    shopID: 1,//One and always is one
                    token: localStorage.token,
                    name: '',
                    region: '',
                    description: '',
                    regionId: 0,
                    superiorid: 0,
                    memo: '',
                    Key: '',
                    image: '',
                    imgSrc: '',
                },
                dialogImageUrl: '',
                plateImgSrc: '',
                dialogVisible: false,
                disabled: false,
                plateTitle: '',
                plateImg: false,
                loftListState: false,
                loftList: [],
                defaultProps: {
                    label: 'Name',
                    children: 'ChildSelect'
                },
                count: 1,
                tree: []
            };
        },
        mounted() {
            this.getDate(1);
        },
        methods: {
            // 获取建筑树列表
            getDate(i) {
                let that = this;
                // 右侧先初始化
                this.loftListState = true;
                this.plateImg = false;

                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                GetRegionAndDectorSelect(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.tree = json.FullChildlRs;//全部关系
                        // 第一次默认加载
                        if (i == 1) {
                            let Name = json.FullChildlRs[0].Name;
                            let Id = json.FullChildlRs[0].Id;
                            that.seeFirstLoft(Name, Id)
                        }
                    } else {
                        this.$message.error(json.Memo);
                    }
                })
            },
            // 获取下级列表
            getGetChildRegionSelect(regionId) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: regionId,
                };
                let postdata = qs.stringify(param);
                GetChildRegionSelect(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loftList = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 查看当前楼宇的平面图
            seePic(loft) {
                this.loftListState = false;
                this.plateImg = true;
                this.getRegionPictureGetByRegionId(loft.Id);
            },
            clearDialog() {
                let that = this;
                that.dialog.superiorid = 0;//上级 为空
                that.dialog.name = '';
                that.dialog.region = '';
                that.dialog.regmemoion = '';
                that.dialog.description = '';
                that.dialog.Key = '';
                that.dialog.image = '';
                that.dialog.regionId = 0;
                // 清除已上传的
                that.$refs.upload.clearFiles()
            },
            // 添加主建筑
            addMain() {
                let that = this;
                that.dialog_state = true;
                that.dialog_title = '添加主建筑';
                that.dialog_type = 1;//1添加2修改
                that.dialog_level = 1;//类型，1是楼（有图不显示），2是楼层（有图），3是会议室（有图）
                // clear dialog
                that.clearDialog();
            },
            // 修改建筑 弹窗
            editLoft(node) {
                let that = this;
                that.clearDialog();
                that.dialog_state = true;
                that.dialog_title = '修改';
                that.dialog_type = 2;
                that.dialog_level = node.level;//类型，1是楼（有图不显示），2是楼层（有图），3是会议室（有图）
                that.dialog.name = node.data.Name;
                that.dialog.regionId = node.data.Id;
                that.getGetRegionplaneinfo(node.data.Id); //读取Description
                that.diglogRegionPictureGetByRegionId(node.data.Id); //读取Description
            },
            // 删除楼层
            delLoft(node) {
                let that = this;
                let regionId = node.data.Id;
                let name = node.data.Name;
                // 状态9删除
                let param = {
                    token: localStorage.token,
                    regionid: regionId,
                    newstatus: 9,
                };
                let postdata = qs.stringify(param);

                this.$confirm('是否删除' + name + '区域？', '删除操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    RegionStatusEdit(postdata).then(res => {
                        let json = res;
                        if (json.Code == 0) {
                            that.$message({
                                type: 'success',
                                message: `删除成功`
                            });
                            // 重载
                            that.getDate(2);
                        } else {
                            that.$message.error(json.Memo);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消禁用'
                    });
                });
            },
            // 提交添加新的建筑/区域
            confirmAddRegion() {
                let that = this;
                // checkVal
                if (!that.dialog.name) {
                    this.$message.error('错了哦，主建筑名称不能空');
                    return false
                }
                if (that.dialog.name.length > 20) {
                    this.$message.error('错了哦，主建筑名称不能超过20个字符');
                    return false
                }
                let param = {
                    token: localStorage.token,
                    regionname: that.dialog.name,
                    comid: 1,
                    superiorid: that.dialog.superiorid,
                    description: that.dialog.description,
                    longitude: 0,
                    latitude: 0,
                    width: 400,
                    height: 300,
                    picMemo: 300,
                    picType: that.dialog_level, //图片类型,1:主图 2:平面图
                    key: that.dialog.Key,
                };
                let postdata = qs.stringify(param);
                RegionAdd(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.dialog_state = false;
                        that.$message({
                            showClose: true,
                            message: '建筑/区域已添加！',
                            type: 'success'
                        });
                        // 重载tree
                        that.getDate(2);
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 提交修改
            confirmEdit() {
                let that = this;
                // checkVal
                if (!that.dialog.name) {
                    this.$message.error('错了哦，建筑名称不能空');
                    return false
                }
                if (that.dialog.name.length > 20) {
                    this.$message.error('错了哦，建筑名称不能超过20个字符');
                    return false
                }

                let param = {
                    token: localStorage.token,
                    regionid: that.dialog.regionId,
                    regionname: that.dialog.name,
                    comid: 1,
                    superiorid: that.dialog.superiorid,
                    description: that.dialog.description,
                    longitude: 0,
                    latitude: 0,
                    width: 400,
                    height: 300,
                    picMemo: 300,
                    picType: that.dialog_level, //图片类型,1:主图 2:平面图
                    picKey: that.dialog.Key,
                };
                let postdata = qs.stringify(param);
                RegionEdit(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.$message({
                            showClose: true,
                            message: '区域内容修改成功！',
                            type: 'success'
                        });
                        // 重载tree
                        that.getDate(2);

                    } else {
                        that.$message.error(json.Memo);
                    }
                });

                // ok
                that.dialog_state = false;
                that.$message({
                    message: '建筑已修改',
                    type: 'success'
                });
            },
            // 添加次级建筑
            addLoft(node) {
                let that = this;
                // clear dialog
                that.clearDialog();
                that.dialog_state = true;
                that.dialog_title = '添加楼层或区域';
                that.dialog_type = 1;//1添加2修改
                that.dialog_level = node.level;//类型，1是楼（有图不显示），2是楼层（有图），3是会议室（有图）
                that.dialog.superiorid = node.data.Id;//将当前ID保存为上级ID
            },
            handleImgSuccess(res, file) {
                let that = this;
                if (res.Code == 0) {
                    that.dialog.Key = res.Key
                } else {
                    that.$message.error(res.Memo);
                }
            },
            handleImgbefore(file) {
                this.dialog.image = file;
                this.dialog.imgSrc = '';
            },
            handleCheckChange(data, checked, indeterminate) {
                console.log(data, checked, indeterminate);
            },
            handleNodeClick(data,Node) {
                this.seeLoft(Node);
            },
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve([{name: 'region1'}, {name: 'region2'}]);
                }
                if (node.level > 3) return resolve([]);

                var hasChild;
                if (node.data.name === 'region1') {
                    hasChild = true;
                } else if (node.data.name === 'region2') {
                    hasChild = false;
                } else {
                    hasChild = Math.random() > 0.5;
                }

                setTimeout(() => {
                    var data;
                    if (hasChild) {
                        data = [{
                            name: 'zone' + this.count++
                        }, {
                            name: 'zone' + this.count++
                        }];
                    } else {
                        data = [];
                    }

                    resolve(data);
                }, 500);
            },
            dialog_cancel() {
                let that = this;
                that.dialog_state = false;
            },
            dialog_ok() {
                let that = this;
                // 添加类 1是添加，2是修改
                if (that.dialog_type == 1) {
                    // 获取提交类型
                    that.confirmAddRegion();
                }
                // 修改类 1是添加，2是修改
                if (that.dialog_type == 2) {
                    that.confirmEdit();
                }
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            // 查看当前区域情况
            seeLoft(node) {
                let that = this;
                that.plateTitle = node.data.Name;
                switch (parseInt(node.level)) {
                    case 1:
                        // 看列表
                        that.loftListState = true;
                        that.plateImg = false;
                        that.getGetChildRegionSelect(node.data.Id);
                        break;
                    case 2:
                        // 看楼层图
                        that.loftListState = false;
                        that.plateImg = true;
                        that.getRegionPictureGetByRegionId(node.data.Id);
                        // that.plateImgSrc
                        break;
                    case 3:
                        // 看会议图
                        that.loftListState = false;
                        that.plateImg = true;
                        that.getRegionPictureGetByRegionId(node.data.Id);
                        break;
                }
            },
            // 查看默认区域情况
            seeFirstLoft(Name, Id) {
                let that = this;
                that.plateTitle = Name;
                // 看列表
                that.loftListState = true;
                that.plateImg = false;
                that.getGetChildRegionSelect(Id);
            },
            getGetRegionplaneinfo(regionid) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionid: regionid,
                    regionId: regionid,
                };
                let postdata = qs.stringify(param);
                GetRegionplaneinfo(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.dialog.description = json.Rs.Region.Description
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            getRegionPictureGetByRegionId(regionID) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionID: regionID,
                };
                let postdata = qs.stringify(param);
                RegionPictureGetByRegionId(postdata).then(res => {
                    let json = res;
                    that.plateImgSrc = '';
                    if (json.Code == 0) {
                        that.plateImgSrc = json.EncodeString
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 给弹窗渲染已上传的图片
            diglogRegionPictureGetByRegionId(regionID) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionID: regionID,
                };
                let postdata = qs.stringify(param);
                RegionPictureGetByRegionId(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.dialog.imgSrc = json.EncodeString;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            }
        }
        ,
        components: {
            dialog_referrer_list
        }
    }
    ;
</script>

<style scoped>
    @import "../assets/css/panel.css";
    @import "../assets/css/dialog.css";

    .tabs ul {
        width: 200px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .image-border {
        position: absolute;
        width: 20px;
        height: 20px;
    }

    .image-border1 {
        top: 0;
        left: 25px;
        border-left: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border2 {
        top: 0;
        right: 12px;
        border-right: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border3 {
        bottom: 0;
        left: 25px;
        border-bottom: 2px solid #6DC1FF;
        border-left: 2px solid #6DC1FF;
    }

    .image-border4 {
        bottom: 0;
        right: 12px;
        border-right: 2px solid #6DC1FF;
        border-bottom: 2px solid #6DC1FF;
    }

    .pages {
        width: 100%;
        min-height: 600px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-bottom: 80px;
    }

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    em, s, i {
        font-style: normal;
        text-decoration: none;
    }

    .content {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
    }

    .content .tree {
        width: 347px;
        min-height: 781px;
        background: rgba(27, 86, 200, 0.14);
        color: #6DC1FF;
        border: 1px solid #005EA2;
        float: left;
        margin-left: 30px;
    }

    .addMain {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 44px;
        line-height: 44px;
        background: #001743;
        cursor: pointer;
        margin-bottom: 24px;
    }

    .addMain img {
        position: relative;
        left: 6px;
        top: 3px;
    }

    /deep/ .el-tree {
        background: none;
        color: #6DC1FF;
    }

    /deep/ .treeIcon {
        float: right;
        padding-left: 10px;
        padding-top: 1px;
    }

    /deep/ .treeIcon img {
        margin-right: 7px;
    }

    .plate {
        /*width: 1440px;*/
        width: 78%;
        min-height: 780px;
        float: left;
        margin-left: 10px;
        background: rgba(27, 86, 200, 0.14);
        color: #6DC1FF;
        overflow: hidden;
        border: 1px solid #005EA2;
    }

    .plateTitle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 44px;
        line-height: 44px;
        background: #001743;
        cursor: pointer;
        margin-bottom: 24px;
        text-align: left;
        padding-left: 44px;
    }

    .plate ul.list {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 28px 44px;
    }

    .plate .list li {
        width: 157px;
        height: 49px;
        float: left;
        background: #08255B;
        border: 1px solid #005EA2;
        padding: 13px 0;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .list img {
        display: block;
        margin: 0 auto;
        margin-bottom: 9px;
    }

    .list em {
        text-align: center;
    }

    .plateImg {
        width: 1280px;
        height: 569px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        /*padding-bottom: 60px;*/
    }

    .plateImg img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    /*upload*/
    /deep/ .el-upload--picture-card {
        float: left;
        background: none;
        border: 1px solid #005EA2;
        color: #005EA2;
    }

    /deep/ .el-upload--picture-card i {
        color: #005EA2;
    }

    /deep/ .modal-body {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    /deep/ .modal-body textarea {
        color: #6DC1FF;
    }

    .editImg {
        width: 140px;
        height: 140px;
        float: left;
        margin-left: 30px;
    }

    /*响应式调整*/
    @media only screen and (max-width: 1600px) {
        .plate {
            width: 72%;
        }
    }

</style>
