<template>
  <el-dialog :visible.sync="isShow.facility" :width="width">
    <span slot="title">
      <span v-show="step == 1">业务空间详情</span>
      <!-- <span v-show="step == 1" @click="addMyEquip" style="float: right; margin-right: 40px;">
        <el-button class="saga-padding0" type="text">添加设备</el-button>
      </span>-->
      <span v-show="step == 1" style="float: right; margin-right: 40px;">
        <el-dropdown @command="addMyEquip" trigger="click">
          <span class="el-dropdown-link" style="color: #409EFF">添加设备</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>
      </span>
      <span v-show="step == 2">
        <el-button class="saga-padding0" @click="goBack" type="text" icon="el-icon-arrow-left"></el-button>
      </span>
    </span>
    <div id="detailsDialog" v-show="step == 1">
      <p class="influence-p">{{data.infos.RoomLocalName || data.infos.RoomName || '--'}}</p>
      <equip-table :activeTabType="activeTabType" ref="myEquip" :param="myDia"></equip-table>
    </div>
    <div v-show="step == 2">
      <add-equip ref="addEquip"></add-equip>
    </div>
  </el-dialog>
</template>

<script>
import Vue from "vue"
import {
  Dropdown,
  DropdownMenu,
  DropdownItem} from "element-ui"
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
import equipTable from "@/components/old-adm/table/equipTable";
import addEquip from "@/components/old-adm/table/addEquip";
import { mapGetters, mapActions } from "vuex";

export default {
  components: {
    equipTable,
    addEquip
  },
  props: {
    width: {
      type: String,
      default: "60%"
    },
    title: {
      type: String,
      default: "头部信息"
    },
    isShow: {
      type: Object
    },
    param: {
      type: Object
    },
    activeTabType: {
      type: Object,
      default: function () {
        return {
          "code": "GeneralZone",
          "name": "默认分区",
          "rel_type": "99"
        }
      }
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"]),
  },
  data() {
    return {
      step: 1,
      data: { infos: {} },
      proj: null,
      activeName: "1",
      myDia: {
        id: 'Sp11010800034c251365d66111e8bf0a15b159c8e729',
        ProjId: this.projectId,
        secret: this.secret
      },
      buildMess: {},
    };
  },
  created() { },
  methods: {
    handleClick() { },
    getData(data, buildMess) {
      this.data = data
      this.buildMess = buildMess
      console.log(this.data)
      this.step = 1
      this.$nextTick(() => {
        this.$refs.myEquip.getData(this.data, this.activeTabType)
      })
    },
    goBack() {
      this.step = 1
      this.$refs.myEquip.getData(this.data, this.activeTabType)
    },
    delSpace() {
      this.$confirm('此操作将永久删除该业务空间, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addMyEquip(str) {
      console.log(this.data, this.buildMess)
      this.step = 2
      this.$refs.addEquip.getData(this.data, this.buildMess, str, this.activeTabType)
    }
  }
};
</script>

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