<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>新建角色</h3>
      <h5>新建角色</h5>
    </div>
    <div class="content">
      <div class="message">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称：" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="name">
            <el-input v-model="form.mark"></el-input>
          </el-form-item>
          <el-form-item label="权限：" prop="name">
            <el-tree :data="data" :props="defaultProps" show-checkbox node-key="id" @check-change="handleCheckChange">
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
      <div class="centerButton">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
export default {
  components: {
    dataBreadcrumb
  },
  data() {
    return {
      data: [{
        id: 1,
        label: '首页',
        children: [{
          id: 4,
          label: '招标管理',
          children: [{
            id: 9,
            label: '招标项目管理'
	    }]
				  }]
      }, {
				  id: 2,
				  label: '平台交货管理',
				  children: [{
				    id: 5,
				    label: '平台交货列表'
				  }]
      }, {
				  id: 3,
				  label: '供应商管理',
				  children: [{
				    id: 7,
				    label: '供应商列表'
				  }, {
				    id: 8,
				    label: '我的供应商'
				  }]
      }, {
				  id: 10,
				  label: '组织管理',
				  children: [{
				    id: 11,
				    label: '单位信息'
				  }, {
				    id: 12,
				    label: '成员管理'
				  }, {
				    id: 13,
				    label: '权限管理'
				  }]
      }, {
				  id: 14,
				  label: '系统管理',
				  children: [{
				    id: 15,
				    label: '绑定CA'
				  }, {
				    id: 16,
				    label: '日志列表'
				  }]
      }],
		   form: {
	 name: '',
        mark: ''
		      },
		      rules: {
		        date2: [{
          type: 'date',
          required: true,
          message: '请选择时间',
          trigger: 'blur'
        }]
      },
      breads: ['系统管理', '权限管理'],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    submit() {
      console.log(this.form)
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    }
  }

}
</script>


<style scoped>
	.message {
		width: 60%;
		margin-left: 50px;
		margin-top: 20px;
	}

	.message>div {
 margin-bottom: 30px;
	}
</style>
