<template>
  <el-container>
    <el-main>
      <p>添加路由</p>

      <el-card>
        <el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="名称">
            <el-input v-model="routerPermission.name" />
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="routerPermission.path" />
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="routerPermission.icon" />
          </el-form-item>
          <el-form-item label="重定向">
            <el-input v-model="routerPermission.redirect" />
          </el-form-item>
          <el-form-item label="组件">
            <el-input v-model="routerPermission.component" />
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="routerPermission.title" />
          </el-form-item>
          <el-button type="primary" @click="addRouter()">添加</el-button>
        </el-form>
      </el-card>
      <p>路由信息</p>
      <el-row :gutter="24">
        <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
          <el-card>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />

          </el-card></div></el-col>
        <el-col :xs="10" :sm="10" :md="4" :lg="4" :xl="4">
          <el-button type="primary">添加</el-button><br>
          <el-button type="info">修改</el-button><br>
          <el-button type="danger">删除</el-button>

        </el-col>
      </el-row>

    </el-main>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      labelPosition: 'right',
      routerPermission: {
        name: '',
        level: 1,
        path: '',
        icon: '',
        redirect: '',
        title: '',
        component: ''

      },
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }]
    }
  },
  methods: {
    addRouter() {
      console.log('start to add router')
    }
  }
}
</script>
