<template>
  <div>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :withHeader="false"
      size="70%"
      class="drawer"
    >
      <el-container style="height: 100vh">
        <el-aside width="200px" class="aside">
          <div class="header">消息中心</div>
          <div class="title">
            <div @click="tab(1)">全部消息</div>
            <div @click="tab(2)">未读消息</div>
            <div @click="tab(3)">已读消息</div>
          </div>
        </el-aside>
        <el-container class="content_box">
          <el-header class="header">| {{ this.tabTitle }}</el-header>
          <el-main class="content">
            <div v-if="this.tab_index == 1">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="标题内容" width="220">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="提交时间" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="类型"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </div>
            <div v-if="this.tab_index == 2">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="标题内容" width="220">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="提交时间" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="类型"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </div>
            <div v-if="this.tab_index == 3">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="标题内容" width="220">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="提交时间" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="类型"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "WebKbossIndex",

  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },

  mounted() {},

  methods: {
     handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped></style>
