<template>
  <div class="body">

    <!-- 侧边栏区域开始 -->

    <div class="nav">
      <div class="nav-head">
        <div class="head-img">
          <img src="../../../public/group-1.png">
        </div>
        <div class="head-info">
          分组管理
        </div>
      </div>

      <div class="button">
        <el-button type="text" size="small" @click="show=true">编辑</el-button>
        <el-button type="text" size="small" v-if="show">新建分组</el-button>
        <el-button type="text" size="small" class="remove" v-if="show" @click="dialogVisible = true"><img
            src="../../../public/img-2.png">删除</el-button>

        <!-- 删除弹窗区域开始 -->

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>

          <div class="button-img" align="center">
            <img src="../../../public/group-2.png">
          </div>

          <div class="button-info" align="center">
            删除分组将删除设备上的所有人员信息
          </div>


          <span slot="footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>

        <!-- 删除弹窗区域结束 -->

      </div>

      <div class="nav-info">
        全部分组
      </div>

      <div class="nav-list">
        <el-menu default-active="1" background-color="#fff" text-color="#333333" active-text-color="#3BAAFD">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">科技楼</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">科技楼</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-menu"></i>
            <span slot="title">科技楼</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-menu"></i>
            <span slot="title">科技楼</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="nav-footer" v-if="show">
        编辑分组：科技楼
      </div>

      <div class="footer-button" v-if="show">
        <el-row>
          <el-button type="primary" size="mini" @click="show=false">保存</el-button>
          <el-button type="primary" size="mini" plain @click="show=false">取消</el-button>
        </el-row>
      </div>
    </div>

    <!-- 侧边栏区域结束 -->

    <!-- 右侧表格区域开始 -->

    <div class="from">

      <div class="from-head">
        <el-button size="mini">导入模板</el-button>
        <el-button type="text">模板下载</el-button>
        <span class="head-info">学院：</span>
        <span class="input">
          <el-input v-model="input" size="mini" placeholder="请输入专业名称"></el-input>
        </span>
        性别：
        <span class="input-select">
          <el-select v-model="value" size="mini" placeholder="全部/男/女">
            <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </span>
        姓名：
        <span class="input">
          <el-input v-model="input" size="mini" placeholder="请输入姓名"></el-input>
        </span>
        <el-button type="primary" size="mini" class="button">搜索</el-button>
      </div>

      <div class="from-body">
        <el-table :data="tableData" header-cell-style="background-color: #E6ECFE">
          <el-table-column label="序号" prop="id" width="100px" align="center">
          </el-table-column>
          <el-table-column label="姓名" prop="name" width="130px" align="center">
          </el-table-column>
          <el-table-column label="学号" prop="studentnumber" width="130px" align="center">
          </el-table-column>
          <el-table-column label="性别" prop="sex" width="100px" align="center">
          </el-table-column>
          <el-table-column label="宿舍号" prop="livenumber" width="130px" align="center">
          </el-table-column>
          <el-table-column label="学院" prop="college" width="130px" align="center">
          </el-table-column>
          <el-table-column label="手机号" prop="phone" width="130px" align="center">
          </el-table-column>
          <el-table-column label="通行权限" width="190px" prop="power" align="center">
          </el-table-column>
          <el-table-column label="操作" width="130px" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dialogedit = true">编辑分组</el-button>
              <el-button @click="dialogeremovefrom = true" type="text" size="small" class="button"><img
                  src="../../../public/img-2.png">删除</el-button>

              <!-- 编辑分组弹窗开始 -->

              <el-dialog title="编辑分组" :visible.sync="dialogedit" width="30%" center>

                通行权限：
                <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择分组"
                  style="width:380px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

                <span slot="footer">
                  <el-button type="primary" @click="dialogedit = false">确 定</el-button>
                  <el-button @click="dialogedit = false">取 消</el-button>
                </span>
              </el-dialog>

              <!-- 编辑分组弹窗结束 -->

              <!-- 表格区域删除弹窗开始 -->

              <el-dialog title="提示" :visible.sync="dialogeremovefrom" width="30%" center>

                <div class="button-img" align="center">
                  <img src="../../../public/group-2.png">
                </div>

                <div class="button-info" align="center">
                  确定删除该信息吗？
                </div>


                <span slot="footer">
                  <el-button type="primary" @click="handleDelete(index)">确 定</el-button>
                  <el-button @click="dialogeremovefrom = false">取 消</el-button>
                </span>
              </el-dialog>

              <!-- 表格区域删除弹窗结束 -->

            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 右侧表格区域结束 -->

      <!-- 底部分页器区域开始 -->

      <div class="from-footer">
        <template>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </template>
      </div>

      <!-- 底部分页器区域结束 -->

    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  export default {
    components: {
      Pagination
    },
    methods: {
      handleDelete(index) {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.dialogeremovefrom = false,
          this.tableData.splice(index, 1)
      },
      getList() {
        // 获取数据
      }
    },
    data() {
      return {
        sexs: [{
          value: '选项1',
          label: '男'
        }, {
          value: '选项2',
          label: '女'
        }],
        options: [{
          value: '1',
          label: '科技园-1'
        }, {
          value: '2',
          label: '科技园-2'
        }, {
          value: '3',
          label: '科技园-3'
        }],
        tableData: [{
          id: '1',
          name: '吴亦凡',
          studentnumber: '140309010103',
          sex: '男',
          livenumber: '14栋308',
          college: '人文院',
          phone: '13677985468',
          power: '科技楼，人文楼'
        }, {
          id: '1',
          name: '吴亦凡',
          studentnumber: '140309010103',
          sex: '男',
          livenumber: '14栋308',
          college: '人文院',
          phone: '13677985468',
          power: '科技楼，人文楼'
        }, {
          id: '1',
          name: '吴亦凡',
          studentnumber: '140309010103',
          sex: '男',
          livenumber: '14栋308',
          college: '人文院',
          phone: '13677985468',
          power: '科技楼，人文楼'
        }, {
          id: '1',
          name: '吴亦凡',
          studentnumber: '140309010103',
          sex: '男',
          livenumber: '14栋308',
          college: '人文院',
          phone: '13677985468',
          power: '科技楼，人文楼'
        }],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        },
        value: '',
        show: false,
        dialogVisible: false,
        dialogedit: false,
        dialogeremovefrom: false,
        value: []
      }
    }
  }
</script>

<style lang="scss" scoped>
  .body {
    width: 1611px;
    margin-top: 29px;

    .nav {
      float: left;
      width: 228px;
      background-color: #EFF2F7;

      .nav-head {
        display: flex;
        width: 141px;
        margin-top: 43px;

        .head-img {
          margin-left: 21px;

          img {
            width: 30px;
          }
        }

        .head-info {
          margin-left: 16px;
          line-height: 33.64px;
          font-weight: bold;
        }
      }

      .button {
        display: flex;
        justify-content: space-around;
        margin-top: 47px;

        .remove {
          color: red;

          img {
            width: 8.5px;
            margin-right: 8px;
          }
        }

        .button-img {
          img {
            width: 53.5px;
          }
        }

        .button-info {
          margin-top: 39px;
        }
      }

      .nav-info {
        margin-left: 19px;
        margin-top: 46px;
        font-weight: bold;
      }

      .nav-list {
        margin-top: 20px;
      }

      .nav-footer {
        margin-top: 120px;
        line-height: 50px;
        text-indent: 20px;
        font-size: 8px;
        background-color: #D3D6DD;
      }

      .footer-button {
        display: flex;
        justify-content: space-around;
        margin-top: 29px;
      }

    }

    .from {
      float: left;
      width: 1383px;

      .from-head {
        margin: 0 auto;
        width: 1304px;
        line-height: 118px;
        font-size: 9px;

        .head-info {
          margin-left: 95px;
        }

        .input {
          display: inline-block;
          margin-left: 12px;
          margin-right: 30px;
          width: 210px;
        }

        .input-select {
          display: inline-block;
          margin-left: 11px;
          margin-right: 29px;
          width: 148px;
        }

        .button {
          margin-left: 41px;
        }
      }

      .from-body {
        margin: 0 auto;
        width: 1304px;
        height: 480.5px;
        overflow: hidden;

        .button-img {
          img {
            width: 53.5px;
          }
        }

        .button-info {
          margin-top: 39px;
        }

        .button {
          color: red;
        }

        img {
          width: 8.5px;
          margin-right: 4px;
        }
      }

      .from-footer {
        display: flex;
        position: absolute;
        right: 129px;
        bottom: 45px;
      }
    }
  }
</style>
