<template>
  <div class="app-container iot-region">
    <component :is="componentView" :sourceKey="sourceKey" @handleEvent="handleEvent"></component>

    <div
      class="to-home-wrap2"
      @click="toTableClick"
      v-show="componentView !== 'Table'"
    >
      <el-button icon="el-icon-d-arrow-left" title="返回列表" circle
        >返回列表</el-button
      >
    </div>
  </div>
</template>

<script>
import Table from "./profile/table";
import Detail from './profile/details'
export default {
  name: "Project",
  components: {
    Table,
    Detail
  },
  data() {
    return {
      projectTypeOptions: [],
      componentView: "Table",
      sourceKey: "",
    };
  },
  created() {
    // if (this.$route.query["projectId"]) {
    //   this.handleDetails(this.$route.query);
    // }
    this.componentView = "Table";
  },
  methods: {
    handleEvent(data) {
      if (data.event === 'linkDetail') {
        this.sourceKey = data.value.regionCode;
        this.componentView = "Detail";
      }
    },
    // 跳转详情页
    toTableClick() {
      if (this.$route.query["projectId"]) {
        this.$router.push("/project/project");
      }
      this.componentView = "Table";
    },
  },
};
</script>
<style lang="scss">
.iot-region {
  .eldialog-wrap {
    .el-dialog__header {
      border-bottom: 1px solid #747373;
    }
    .el-dialog__body {
      padding: 0px;
    }
    .el-form {
      padding: 20px;
      padding-right: 40px;
    }
    .el-dialog__footer {
      height: 60px;
      border-top: 1px solid #747373;
      text-align: right;
      width: 100%;
      padding: 0px;
      padding-top: 15px;
      .el-button + .el-button {
        margin-right: 10px;
      }
      .el-button {
        padding-top: 8px;
      }
    }
  }
  .to-home-wrap2 {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 30px;
    top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    color: #656363;
    font-size: 20px;
    cursor: default;
    width: 100px;
    .el-button--medium.is-circle {
      width: 25px;
      height: 20px;
      padding: 0;
      background: #f26a6a;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      height: 30px;
      width: 100%;
      font-size: 14px;
    }
  }
  .to-home-wrap2:hover {
    color: #1890ff;
    font-size: 30px;
  }
}
</style>
