<template>
  <div id="floor_space">
    <el-row>
      <el-col :span="12">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="此处填写范围描述"
          v-model="textarea"
        >
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <h5>空间类型</h5>
        <el-tree
          :data="spaceTree"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps"
        >
        </el-tree>
      </el-col>
      <el-col :span="6">
        <h5>空间分区</h5>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="(item, key) in partitioneList"
            :key="key"
            class="checkList"
            :label="item.name"
          ></el-checkbox>
          <el-checkbox class="checkList" label="复选框 A"></el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
    <div></div>
  </div>
</template>
<script>
import { space_fun, space_zone } from "@/api/workScope.js";
import { treeTranslation } from "@/until.js";
export default {
  data() {
    return {
      // 分区范围
      partitioneList: [],
      spaceTree: [], //空间树
      defaultProps: {
        children: "children",
        label: "label",
      },
      checkList: [],
    };
  },
  methods: {
    //请求树结构
    getSpaceTree() {
      space_fun({ target: "rtn" }).then((res) => {
        this.spaceTree = treeTranslation(res.rtn, ["code", "name", "children"]);
      });
    },
    //请求空间区域类型
    spaceZone() {
      space_zone({}).then((res) => {
        res.rtn.forEach((item) => {
          this.partitioneList.push({
            name: item.name,
            id: item.code,
          });
        });
      });
    },
  },

  created() {
    this.getSpaceTree();
    this.spaceZone();
  },
};
</script>
<style lang="less" scoped>
#floor_space {
  .checkList {
    display: block;
  }
}
</style>