<template>
    <el-dialog :visible.sync="isShow.details" :width="width">
        <span slot="title">
          <span v-show="step == 1">{{title}}</span>
        <span v-show="step == 2 || step == 3">
            <el-button type="text" @click="goBack" icon="el-icon-arrow-left"></el-button>
          </span>
        </span>
        <div id="detailsDialog" v-show="step == 1">
            <p class="influence-p">{{list.name}}</p>
            <el-tabs type="border-card">
                <el-tab-pane label="空间详情">
                    <div class="saga-details">
                        <iframe height="400px" v-if="isShow.details" width="100%" :src="iframeSrc"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="与空间相关联的设备">
                    <div>
                        <equip-table ref="myEquip"></equip-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-show="step == 2">
            <add-equip :activeTabType="activeTabType" ref="addEquip"></add-equip>
        </div>
        <div id="detailsDialog" v-if="step == 3">
            <iframe v-if="step == 3" height="400px" width="100%" :src="iframeSrc2"></iframe>
        </div>
        <div v-show="step == 1" style="line-height: 50px;">
            <el-button @click="step = 3">编辑信息</el-button>
            <el-button type="danger" @click="delSpace" plain>删除该业务空间</el-button>
            <el-dropdown style="margin-left: 10px;" :hide-on-click="false" @command="addMyEquip">
                <span class="el-dropdown-link">
                    添加设备<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="EquipinSpace">空间内的设备</el-dropdown-item>
                    <el-dropdown-item command="EquipforSpace">服务于空间的设备</el-dropdown-item>
                    <el-dropdown-item command="EquipXSpace">其他关系的设备</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-dialog>
</template>

<script>
    import { deleteZone } from "@/api/scan/request";
    import equipTable from "@/components/business_space/table/equipTable";
    import addEquip from "@/components/business_space/table/addEquip";
    import {
        mapGetters,
        mapActions
    } from "vuex";
    export default {
        components: {
            equipTable,
            addEquip
        },
        computed: {
            ...mapGetters("layout", [
                "projectId",
                "secret",
                "userId"
            ])
        },
        props: {
            width: {
                type: String,
                default: "1200px"
            },
            title: {
                type: String,
                default: "头部信息"
            },
            isShow: {
                type: Object
            },
            param: {
                type: Object
            },
            activeTabType: {
                type: Object,
                default: function() {
                    return {
                        "code": "GeneralZone",
                        "name": "默认分区",
                        "rel_type": "99"
                    }
                }
            }
        },
        data() {
            return {
                step: 1,
                data: null,
                proj: null,
                activeName: "1",
                list: {},
                iframeSrc: "",
                iframeSrc2: "",
                buildMess: ""
            };
        },
        created() {},
        methods: {
            handleClick() {},
            getData(list, buildMess) {
                this.step = 1;
                this.list = list;
                this.buildMess = buildMess;
                this.$nextTick(() => {
                    this.$refs.myEquip.getData(list, this.activeTabType);
                });
                let perjectId = this.projectId,
                    secret = this.secret;
                this.iframeSrc =
                    process.env.BASE_URL +
                    ":8889/#/details?perjectId=" +
                    perjectId +
                    "&secret=" +
                    secret +
                    "&FmId=" +
                    list.id +
                    "&type=0&code=" + this.activeTabType.code;
                this.iframeSrc2 =
                    process.env.BASE_URL +
                    ":8889/#/changeMess?perjectId=" +
                    perjectId +
                    "&secret=" +
                    secret +
                    "&id=" +
                    list.id +
                    "&type=" + this.activeTabType.code;
            },
            addMyEquip(str) {
                this.step = 2;
                this.$nextTick(() => {
                    console.log(this.activeTabType)
                    this.$refs.addEquip.getData(this.list, this.buildMess, str, this.activeTabType);
                });
            },
            goBack() {
                this.step = 1;
                this.$refs.myEquip.getData(this.list, this.activeTabType);
            },
            delSpace() {
                this.$confirm("此操作将永久删除该业务空间, 是否继续?", "删除", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        let param = {
                            zone: this.activeTabType.code,
                            data: [{RoomID: this.list.id}]
                        }
                        deleteZone(param, res => {
                            if (res.Result == 'success') {
                                this.$message({ type: "success",  message: "删除成功!" })
                                this.$emit("del")
                            }
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            }
        }
    };
</script>

<style lang="less">
    .el-dialog__header{
        .el-dropdown{
            font-size: 12px;
            line-height: 33px;
        }
    }
    #detailsDialog {
        .el-tabs__content {
            max-height: 400px;
        }
        .influence-p {
            height: 40px;
            line-height: 40px;
            font-size: 17px;
            margin-bottom: 10px;
        }
    }
</style>
