<template>
    <div class="monitor">
        <div class="box">
            <div class="tab-title">
                <el-cascader
                        ref="cascaderAddr"
                        :options="poleOption"
                        :props="{value: 'id', label: 'name', expandTrigger: 'hover'}"
                        :show-all-levels="false"
                        v-model="poleSelected"
                        @change="unitChange"></el-cascader>
                <div class="position">
                    <img src="../../assets/u208.png" @click="open" alt="">
                </div>
            </div>
            <div class="flex">
                <template v-if="isSet">
                    <template v-if="radio === 1">
                        <div  class="default" v-for="(item, i) in selectList" :key="i">
                            <div class="tab-title" v-show="isNone">{{item.name}}</div>
                            <div class="img-size">
                                <div class="video">

                                  <iframe :class="activeClass == i ? 'actived' : ''"  :src="'static/index.html?'+'1'+'&' + item.wsUrl  +'&'+ item.rtspUrl + '&' + '100%' + '&' + i" frameborder="0"  style="height: 100%; width: 100%"></iframe>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="radio === 4">
                        <div  class="col-4" v-for="(item, i) in selectList" :key="i">
                            <div class="tab-title" v-show="isNone">{{item.name}}</div>
                            <div class="img-size">
                               <div class="video" >
                                   <iframe :class="activeClass == i ? 'actived' : ''" :src="'static/index.html?'+'1'+'&' + item.wsUrl  +'&'+ item.rtspUrl + '&' + '100%' + '&' + i" frameborder="0"  style="height: 100%; width: 100%"></iframe>
                               </div>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="radio === 6">
                        <div  class="col-6" v-for="(item, i) in selectList" :key="i">
                            <div class="tab-title" v-show="isNone">{{item.name}}</div>
                            <div class="img-size">
                                <div class="video">
                                  <iframe :class="activeClass == i ? 'actived' : ''" :src="'static/index.html?'+'1'+'&' + item.wsUrl  +'&'+ item.rtspUrl + '&' + '100%' + '&' + i" frameborder="0"  style="height: 100%; width: 100%"></iframe>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div  class="col-12" v-for="(item, i) in selectList" :key="i">
                            <div class="tab-title" v-show="isNone">{{item.name}}</div>
                            <div class="img-size">
                              <div class="video">
                                <iframe :class="activeClass == i ? 'actived' : ''" :src="'static/index.html?'+'1'+'&' + item.wsUrl  +'&'+ item.rtspUrl + '&' + '100%' + '&' + i" frameborder="0"  style="height: 100%; width: 100%"></iframe>
                              </div>
                            </div>
                        </div>
                    </template>
                </template>
                <template v-else>
                    <div  class="default">
                        <div class="tab-title" v-show="isNone">{{poleTitle}}</div>
                        <div class="img-size">
                            <div class="video" style="position: relative; text-align: center;">
                                <iframe :class="activeClass == 0 ? 'actived' : ''" v-if="showIfrme" ref="iframe" :src="'static/index.html?'+'1'+'&'+ cameraOne +'&'+ cameraTwo + '&' +'100%' + '&' + '0'" frameborder="0"  style="height: 100%; width: 100%"></iframe>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <el-dialog
                title="视频窗口设置"
                :visible.sync="dialogVisible"
                width="40%">
            <div>
                <div class="radio">
                    <span>视频展示数量：</span>
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">1</el-radio>
                        <el-radio :label="4">4</el-radio>
                        <el-radio :label="6">6</el-radio>
                        <el-radio :label="12">12</el-radio>
                    </el-radio-group>
                </div>
<!--                <el-transfer v-model="value" :data="dataList" :titles="title" @change="handleChange"></el-transfer>-->
                <h3 style="color: white; margin-bottom: 10px;">视频选择</h3>
                <tree-transfer
                        :title="title"
                        :from_data="formData"
                        :to_data="toData"
                        :defaultProps="{label:'name'}"
                        :mode='mode'
                        openAll
                        @addBtn='add'
                        @removeBtn='remove'></tree-transfer>
            </div>
            <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="save" :disabled="getSave">保存</el-button>
             </span>
        </el-dialog>
    </div>
</template>
<script>
import utils from "../../utils/utils";
import treeTransfer from 'el-tree-transfer';
export default {
    name: "monitor",
    components: {
        treeTransfer
    },
    data() {
		    return {
		        // 栋楼
            poleOption: [
            ],
            // 选中 栋楼
            poleSelected: [],
            // 单元楼
            unitOption: [
            ],
            unitSelected: '',
            //
            title: ['视频列表', '已选中视频'],
            radio: 1,
            dataList: [],
            formData: [],
            toData: [],
            dialogVisible: false,
            rightList: [],
            selectList: [],
            mode: 'transfer',
            disabled: true,
            isSet: false,
            showIfrme: false,
            // 楼层选择
            poleTitle: '',
            cameraOne: '',
            cameraTwo: '',
            iframeWin: {},
            isMag: false,
            // 放大后
            magOne: '',
            magTwo: '',
            screenWidth: '',
            activeClass: -1,
            isNone: true,
        }
    },
    computed: {
      getSave() {
          if(this.toData.length > 0) {
              return false
          } else {
              return true
          }
      }
    },
	  methods: {
        open() {
            this.dialogVisible = true;
        },
        save() {
            let arr = [];
            let arr1 = [];
            arr = this.toData;
            arr.forEach(item => {
                item.children.forEach(e => {
                    arr1.push(e);
                })
            });
            let dataList = utils.group(arr1,  this.radio);
            let strList = [];
            dataList.forEach(item => {
                strList.push(item.id);
            });
            let str = strList.join(',');
            this.$http.post('http://122.112.252.100:8088/cameraInfo/getCameraDetails', {areaIds: str})
            .then(res => {
               if(res.status === 10000) {
                   res.data.forEach(item => {
                       dataList.forEach(list => {
                           if(item.areaId === list.id) {
                               list.rtspUrl = item.rtspUrl;
                               list.wsUrl = item.wsUrl;
                           }
                       })
                   });
                   // console.log(dataList);
                   this.selectList = dataList;
                   this.isSet = true;
               }else {
                   this.$message.error(res.msg);
                }
            });
            this.dialogVisible = false;
        },
        init() {
            this.$http.post('http://122.112.252.100:8088/pastureArea/findAll')
            .then(res => {
                if(res.status === 10000) {
                    this.poleOption = JSON.parse(JSON.stringify(res.data));
                    let arr = [];
                    arr = res.data;
                    arr.forEach(item => {
                        item.pid = item.parent;
                        item.children.forEach(e => {
                            e.pid = e.parent;
                            e.children = [];
                        })
                    });
                    this.formData = arr;
                }
            })
        },
        unitChange(item) {
            this.isSet = false;
            this.showIfrme = false;
            if(this.poleSelected.length > 0) {
                let val = this.poleSelected[this.poleSelected.length - 1];
                this.$http.post('http://122.112.252.100:8088/cameraInfo/getCameraDetails', {areaIds: val})
                        .then(res => {
                            if(res.status === 10000) {
                                this.showIfrme = true;
                                let data = null;
                                data = res.data[0];
                                this.cameraOne = data.wsUrl;
                                this.cameraTwo = data.rtspUrl;
                            } else {
                                this.showIfrme = false;
                                this.$message.err(res.msg);
                            }
                        })
            }

           this.poleTitle = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels[1];
        },
        add(fromData,toData,obj) {
            console.log(111);
            console.log("fromData:", fromData);

            console.log("toData:", toData);

            console.log("obj:", obj);
        },
        remove(fromData,toData,obj) {
            console.log("fromData:", fromData);

            console.log("toData:", toData);

            console.log("obj:", obj);
        },
        handleMessage(event) {
            const data = event.data;
            switch (data.cmd) {
                case "returnDate":
                    // this.isMag = true;
                    // this.magOne = data.params.wsUrl;
                    // this.magTwo = data.params.rtspUrl;
                    // this.screenWidth = window.screen.width;
                    this.activeClass = data.params.key;
                    this.isNone = data.params.isNone;
                    console.log(data.params);
                    break;
            }
        }
    },
    created() {
      this.init();
    },
    mounted() {
        window.addEventListener("message", this.handleMessage);
        this.unitChange();
    },
};
</script>

<style lang="scss" scope>
.monitor {
    box-sizing: border-box;
    flex-grow: 1;
    color: #eee;
    padding: 20px;
    .radio {
        padding: 20px 0;
    }
    .box {
        background-color: #060b2e;
        width: 100%;
        height: 100%;
        .tab-title {
            height: 45px;
            line-height: 40px;
            text-align: center;
            position: relative;
            margin-bottom: 10px;
            .poleSelect {
                border: solid 1px #000;
                /*很关键：将默认的select选择框样式清除*/
                /*加padding防止文字覆盖*/
                padding-right: 14px;
                padding-left: 15px;
                height: 40px;
                width: 200px;
                margin-right: 20px;
                background-color: #393d41;
                cursor: pointer;
                color: #ccc;
                option {
                    background-color: #F5F5F5;
                    padding: 10px 0;
                    color: #ccc;
                }
            }
            .position {
                position: absolute;
                top: 8px;
                right: 40px;
                cursor: pointer;
            }
        }
        .flex {
            height: calc(100% - 55px);
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            width: 100%;

            .default {
                width: 100%;
                height: 100%;
                background-color: #0E1E51;
                .tab-title {
                    font-size: 16px;
                    text-align: left;
                    padding-left: 10%;
                }
                .tab-title:before {
                    content: "";
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    position: absolute;
                    left: 8%;
                    top: 45%;
                    background-color: #fff;
                    transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    -moz-transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -o-transform: translateY(-50%);
                }
                .img-size {
                    height: calc(100% - 45px);
                    .video {
                        width: 1650px;
                        /*height: 90%;*/
                        height: 100%;
                        /*background-color: black;*/
                        margin: 10px auto;
                    }
                }
            }
            .col-4 {
                width: 45%;
                height: 47%;
                background-color: #0E1E51;
                margin-bottom: 20px;
                .tab-title {
                    font-size: 16px;
                    padding-left: 12%;
                    text-align: left;
                    margin-bottom: 5px;
                }
                .tab-title:before {
                    content: "";
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    position: absolute;
                    left: 8%;
                    top: 45%;
                    background-color: #fff;
                    transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    -moz-transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -o-transform: translateY(-50%);
                }
                .img-size {
                    height: calc(100% - 45px);
                    .video {
                        width: 700px;
                        height: 100%;
                        margin: 10px auto;
                        /*background-color: black;*/
                    }
                }
            }
            .col-6 {
                width: 33%;
                height: 45%;
                background-color: #0E1E51;
                margin-bottom: 20px;
                .tab-title {
                    font-size: 16px;
                    padding-left: 12%;
                    text-align: left;
                }
                .tab-title:before {
                    content: "";
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    position: absolute;
                    left: 8%;
                    top: 45%;
                    background-color: #fff;
                    transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    -moz-transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -o-transform: translateY(-50%);
                }
                .img-size {
                    height: calc(100% - 45px);
                    .video {
                        /*width: 500px;*/
                        width: 100%;
                        height: 90%;
                        margin: 10px auto;
                        /*background-color: black;*/
                    }
                }
            }
            .col-12 {
                width: 22%;
                height: 32%;
                background-color: #0E1E51;
                margin-bottom: 20px;

                .tab-title {
                    font-size: 16px;
                    padding-left: 15%;
                    text-align: left;
                }
                .tab-title:before {
                    content: "";
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    position: absolute;
                    left: 8%;
                    top: 45%;
                    background-color: #fff;
                    transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    -moz-transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -o-transform: translateY(-50%);
                }
                .img-size {
                    height: calc(100% - 45px);
                    text-align: center;
                    .video {
                        width: 100%;
                        height: 90%;
                        /*background-color: black;*/
                        margin: 10px auto;
                    }
                }
            }
        }
    }
}
option{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */
    appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
    color:#fff;
    background-color:#1E90FF;
}
.el-select .el-input__inner {
    background-color: #393d41 !important;
    color: white !important;
}
.magVideo .el-dialog {
    background-color: #0E1E51 !important;
    margin: 0 !important;
    height: 100% !important;
}
.magVideo .el-dialog__header {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
.magVideo .el-dialog__body {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.el-dialog, .el-pager li {
    background-color: #021429 !important;
}
.wl-transfer .transfer-title {
    background-color: #021429 !important;
}
.el-tree {
    background-color: #021429 !important;
}
.el-dialog__headerbtn .el-dialog__close {
    color: white !important;
    font-size: 40px !important;
}
.actived {
    position: fixed;
    width: 1920px;
    height: 100vh;
    left: 0;
    top: 0;
}
</style>
