<template>
  <div id="drafts">
    <div class="tit">草稿箱</div>
    <div class="conent">
      <div class="left-nav">
        <Tree :data="treeData" @change="change"></Tree>
      </div>
      <div class="conent-right">
        <div class="conent-tit">
          <div class="tit-left">消防系统-4F</div>
          <div class="tit-right">
            <a-button>发布</a-button>
            <a-button type="primary">编辑</a-button>
          </div>
        </div>
        <div class="map"></div>
      </div>
    </div>
  </div>
</template>
<script>
const dataArr = [
  {
    id: "0",
    name: "顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级",
    open: false,
    checked: "uncheck",
    children: [
      {
        id: "1",
        name: "一级1",
        open: false,
        checked: "uncheck",
        children: [
          { id: "12", name: "二级2", checked: "uncheck" },
          { id: "121", name: "二级3", checked: "uncheck" },
          { id: "122", name: "二级4", checked: "uncheck" },
          {
            id: "1321",
            name: "二级1",
            open: false,
            checked: "uncheck",
            children: [
              { id: "13", name: "三级2", checked: "uncheck" },
              { id: "131", name: "三级3", checked: "uncheck" },
              { id: "132", name: "三级4", checked: "uncheck" }
            ]
          }
        ]
      },
      {
        id: "2",
        name: "一级2",
        open: false,
        checked: "uncheck",
        children: [
          { id: "222", name: "二级2", checked: "uncheck" },
          { id: "2221", name: "二级1", checked: "uncheck" },
          { id: "2222", name: "二级3", checked: "uncheck" }
        ]
      },
      {
        id: "3",
        name: "一级3",
        open: false,
        checked: "uncheck",
        children: [
          { id: "322", name: "二级2", checked: "uncheck" },
          { id: "3220", name: "二级0", checked: "uncheck" },
          { id: "3221", name: "二级1", checked: "uncheck" }
        ]
      }
    ]
  }
];
import Tree from "./../components/Tree/Tree.vue";
export default {
  components: { Tree },
  data() {
    return {
      treeData:JSON.parse(JSON.stringify(dataArr))
    };
  },
  methods: {
    change() {}
  }
};
</script>
<style lang="less" scoped>
#drafts {
  widows: 100%;
  height: 100%;
  background: #f7f9fa;
  position: relative;
  .tit {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: #e4e5e7 solid 1px;
    font-size: 16px;
    font-weight: bold;
  }
  .conent {
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    position: relative;

    .left-nav {
      width: 224px;
      height: 100%;
    }
    .conent-right {
      flex: 1;
      height: 100%;
      background: #fff;
      .conent-tit {
        width: 100%;
        display: flex;
        height: 59px;
        border: 1px solid #eff0f1;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 0 16px;
        box-sizing: border-box;
        .tit-left {
          font-size: 16px;
          font-weight: bold;
          color: rgba(31, 35, 41, 1);
        }
        .tit-right {
          width: 146px;
          display: flex;
          justify-content: space-between;
        }
      }
      .map {
        width: 100%;
        height: calc(100% - 61px);
        background: red;
      }
    }
  }
}
</style>