<template>
  <Layout>
    <Header class="make-layout-header">
      <div class="edit-logo">
        <img class="edit-logo-img" src="~assets/logo/img_edit_logo@2x.png" alt>
      </div>
      <div class="edit-title">
        <p class="title-text">{{ data.num }} {{ data.districtName }} {{ data.unitType }}</p>
      </div>
      <div class="edit-exit" @click="exitEdit">
        退出编辑
        <Icon custom="iconfont iconedit_exit" />
      </div>
    </Header>
    <Content>
      <router-view :data="data" @change-floor="getHouseDetail" />
    </Content>
  </Layout>
</template>

<script>
import { houseDetail } from 'api'

export default {
  name: 'MakeLayout',
  data() {
    return {
      id: this.$route.params.id,
      data: {}
    }
  },
  computed: {
  },
  watch: {
    '$route'() {
      this.getHouseDetail()
    }
  },
  mounted() {
    this.getHouseDetail()
  },
  methods: {
    getHouseDetail(floor = '1') {
      houseDetail({ id: this.id, floor }).then(
        res => {
          this.data = res.data
          this.computedUnitType()
        }
      )
    },
    computedUnitType() {
      const _unitType = this.data.unitType.split('-')
      this.data.unitType = `${_unitType[0]}房${_unitType[1]}厅${_unitType[2]}卫`
    },
    exitEdit() {
      sessionStorage.clear()
      this.$router.push('/edit')
    }
  }
}
</script>

<style scoped lang="less">
.make-layout-header {
  display: flex;
  border-bottom: 1px solid #555;
}

.edit-logo {
  display: inline-block;
  position: relative;
  height: 50px;
  &-img {
    width: 104px;
    height: 20px;
    vertical-align: middle;
  }
}

.edit-title {
  display: inline-block;
  overflow: hidden;
  flex: 1;
  .title-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
  }
}

.edit-exit {
  cursor: pointer;
  float: right;
}
</style>
