<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>发布</a-button>
            <a-button type="primary">编辑</a-button>
          </div>
        </div>
        <div class="concent-bottom">
          <div class="map">
            <div class="legend-btn" @click="legend = !legend">
              <a-icon type="right"  style="color: #8D9399;font-size: 10px"/>
            </div>
          </div>
          <div class="legend" v-if="legend">
            <div style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px">可能需要补充的图例</div>
            <a-table :columns="columns" :data-source="data" size="middle" :pagination="false">
              <img  style="width:10px;heigth:10px" slot="img" slot-scope="text, record" :src="require('@/assets/images/'+record.img+'.png')" />
              <template v-slot:state>
              </template>
            </a-table>
          </div>
        </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)),
      columns:[
        {
          title: "名称", // 列的名称
          dataIndex: "name", // 列的标识
          scopedSlots: { customRender: 'name' }
        },{
          title: "图例", // 列的名称
          dataIndex: "img", // 列的标识
          scopedSlots: { customRender: 'img' }
        },
      ],
      data: [
        {
          key: "1",
          name: "客梯",
          img:'shubiao'
        },
        {
          key: "2",
          name: "防火分区",
          img:'shubiao'
        },
        {
          key: "3",
          name: "消防泵室",
          img:'shubiao'
        },
      ],
      legend:false
    };
  },
  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%;
      padding: 0 12px;
    }
    .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: 246px;
          display: flex;
          justify-content: space-between;
        }
      }
      .concent-bottom{
        height: calc(100% - 61px);
        display: flex;
        .map {
          flex: 1;
          position: relative;
          /*height: calc(100% - 61px);*/
          /*background: red;*/
          .legend-btn{
            position: absolute;
            right: 0;
            top:9px;
            width:10px;
            height:24px;
            background:rgba(228,229,231,1);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }
        .legend{
          width: 200px;
          border-left: 1px solid #EFF0F1;
          height:100%;
        }
      }

    }
  }
}
</style>