<template>
  <el-container>
    <el-aside width="30%">
      <h3>列表</h3>
      <ul>
        <li v-for="(item,index) in list" :key="index" :class="activeIndex==index?'active':'hh'" @click="handleClick(item.id,index)">
          {{ item.title }}
        </li>
      </ul>
    </el-aside>
    <el-main>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="篇名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="篇名分词">
          <el-input v-model="form.keyWord" />
        </el-form-item>
      </el-form>
      <div>
        <h3>文献表格</h3>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table>
      </div>
      <div>
        <h3>段落内容</h3>
        <p>
          哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        </p>
      </div>

    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Sections',
  // props: {
  //   msg: String
  // },
  data() {
    return {
      list: [
        {
          title: '标题一',
          id: '1'
        },
        {
          title: '标题二',
          id: '2'
        }
      ],
      activeIndex: 0,
      form: {
        name: '',
        keyWord: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    created() {
      this.init()
    },
    mounted() {},
    init() {

    },
    handleClick(id, index) {
      this.activeIndex = index
      console.log('id', id)
    }
  }
}
</script>
<style lang="scss">
.el-main{
  padding:0;
  padding:2% 1% 0 5%;
}
.el-aside{
  padding:0 4%;
}
.el-aside ul li{
  cursor: pointer;
}
.el-aside ul li:hover{
  color:blue;
}
.active{
  color:blue;
}
h3{
  margin-top:30px;
  padding-bottom:10px;
}
.el-form label,h3{
  text-align: left;
  font-size: 15px;
  font-weight: bold;
  color: rgb(68, 68, 68);
}
</style>

