<template>
  <el-drawer title="关联的业务空间" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="20%" custom-class="room-count">
    <div class="drawer-body">
      <div class="default-zone zone" v-show="1">
        <p>默认业务空间</p>
        <div v-for="item in defaultZoneList" :key="item.RoomID" class="zoneItem">
          {{item.Name}}
          <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('default')" v-if="!readonly"></i>
        </div>
        <div class="zoneItem" style="text-align:center;" @click="addZoneItem('default')" v-if="!readonly">
          <i class="iconfont icon-add-control" style="position:static"></i>
        </div>
      </div>
      <div class="tenant-zone zone" v-show="1">
        <p>租户业务空间</p>
        <div v-for="item in tenantZoneList" :key="item.RoomID" class="zoneItem">
          {{item.Name}}
          <i size="mini" class="el-icon-delete" title="删除" @click="deleteZoneItem('tenant')" v-if="!readonly"></i>
        </div>
        <div class="zoneItem" style="text-align:center;" @click="addZoneItem('tenant')" v-if="!readonly">
          <i class="iconfont icon-add-control" style="position:static"></i>
        </div>
      </div>
      <div class="btn" v-if="!readonly">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      defaultZoneList: [
        { RoomID: 1, Name: "哈哈哈哈军军" },
        { RoomID: 2, Name: "哈哈哈哈军军" },
        { RoomID: 3, Name: "哈哈哈哈军军" },
      ],
      tenantZoneList: [
        { RoomID: 1, Name: "哈哈哈哈军军" },
        { RoomID: 2, Name: "哈哈哈哈军军" },
        { RoomID: 3, Name: "哈哈哈哈军军" },
      ]
    }
  },
  props: {
    readonly: {
      default: true
    }
  },
  methods: {
    showDrawer() {
      this.drawer = true;
    },
    handleClose(done) {
      done();
    },
    // 删除
    deleteZoneItem(type) {
      console.log(type)
    },
    // 添加
    addZoneItem(type) {
      console.log(type)
    },
    save() { }
  }
}
</script>
<style lang="less" scoped>
.room-count {
  .drawer-body {
    position: relative;
    padding: 0 10px;
    height: 100%;
    .zone {
      padding: 6px 14px 22px;
      box-shadow: 0 0 3px #cacaca;
      p {
        margin-bottom: 4px;
      }
      .zoneItem {
        position: relative;
        padding: 2px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        i {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .zoneItem + .zoneItem {
        margin-top: 6px;
      }
    }
    .zone + .zone {
      margin-top: 10px;
    }
    .btn {
      position: absolute;
      width: calc(100% - 20px);
      bottom: 20px;
      right: 20px;
      text-align: right;
    }
  }
}
</style>