<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 { zoneCreate } 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 +
        window.__systemConf.BASE_URL +
        ":8889/#/details?perjectId=" +
        perjectId +
        "&secret=" +
        secret +
        "&FmId=" +
        list.id +
        "&type=0&code=" +
        this.activeTabType.code;
      this.iframeSrc2 =
        // process.env.BASE_URL +
        window.__systemConf.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 = [{ RoomID: this.list.id }];
          zoneCreate(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>
