<template>
  <div class="body">

    <!-- 头部区域开始 -->

    <div class="head">
      <div class="head-img">
        <img src="../../../public/img-1.png">
      </div>
      <div class="head-info">
        设备管理
      </div>
    </div>

    <!-- 头部区域结束 -->

    <!-- 开关按钮区域开始 -->

    <div class="switch">
      所有设备
      <div class="switch-sw">
        <el-switch v-model="value" active-color="#3BAAFD" inactive-color="#CCCCCC">
        </el-switch>
      </div>

      <div class="switch-button">
        <el-row>
          <el-button type="primary" size="small" @click="dialogVisible = true"><img src="../../../public/img-3.png">添加
          </el-button>
        </el-row>

        <!-- 添加按钮弹窗区域开始 -->

        <el-dialog title="添加" :visible.sync="dialogVisible" width="30%" center>
          <el-form :model="tableData">
            <el-form-item label="序列号：" class="switch-button-item">
              <el-col :span="12">
                <el-input v-model="tableData.number" autocomplete="off" placeholder="请输入序列号"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item style="white-space:pre" label="名    称：" class="switch-button-item">
              <el-col :span="12">
                <el-input v-model="tableData.name" autocomplete="off" placeholder="请输入名称"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item style="white-space:pre" label="分    组：" class="switch-button-item">
              <el-col :span="12">
                <el-select v-model="tableData.group" placeholder="请选择活动区域" style="width: 100%">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button type="primary" @click="handleCreate">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>

        <!-- 添加按钮弹窗区域结束 -->

      </div>
    </div>

    <!-- 开关按钮区域结束 -->

    <!-- 表格区域开始 -->
    <div class="form">
      <el-table :data="tableData" header-cell-style="background-color: #E6ECFE">
        <el-table-column label="序号" prop="id" align="center">
        </el-table-column>
        <el-table-column label="序列号" prop="number" width="150px" align="center">
        </el-table-column>
        <el-table-column label="名称" prop="name" width="150px" align="center">
        </el-table-column>
        <el-table-column label="分组" prop="group" align="center">
        </el-table-column>

        <el-table-column label="开关" align="center">

          <template slot-scope="scope">
            <el-switch v-model="scope.row.on" active-color="#3BAAFD" active-value="1" inactive-color="#CCCCCC"
              inactive-value="0" @change="changeSwitch(scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</el-button>

            <el-button @click="dialogTableVisible = true" type="text" size="small">
              查看详情</el-button>

            <el-button @click="dialogremove = true" type="text" size="small" class="button"><img
                src="../../../public/img-2.png">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 查看详情弹窗区域开始 -->

      <el-dialog title="通行记录" :visible.sync="dialogTableVisible">

        <el-row :gutter="20">
          <el-col :span="7">
            <div>
              姓名：
              <el-input v-model="gridData.name" autocomplete="off" placeholder="请输入姓名" style="width: 150px"></el-input>
            </div>
          </el-col>
          <el-col :span="7">
            <div>
              学号：
              <el-input v-model="gridData.number" autocomplete="off" placeholder="请输入学号" style="width: 150px">
              </el-input>
            </div>
          </el-col>
          <el-col :span="7">
            <div>
              时间：
              <el-date-picker v-model="gridData.date" type="datetime" placeholder="选择日期时间" style="width: 150px">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              <el-button type="primary">搜索</el-button>
            </div>
          </el-col>
        </el-row>

        <el-table :data="gridData">
          <el-table-column type="selection" width="55">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column property="name" label="姓名"></el-table-column>
          <el-table-column property="number" label="学号"></el-table-column>
          <el-table-column property="date" label="通行时间"></el-table-column>
        </el-table>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="foot-button">
              <el-button type="primary">导出记录</el-button>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="foot-page">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="10000">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-dialog>

      <!-- 查看详情弹窗区域结束 -->

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

      <el-dialog title="提示" :visible.sync="dialogremove" 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="dialogremove = false">取 消</el-button>
        </span>
      </el-dialog>

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

    </div>

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

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

    <div class="block">
      <template>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      </template>
    </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.dialogremove = false,
          this.tableData.splice(index, 1)
      },
      handleCreate() {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
        this.dialogVisible = false
        this.tableData.push(length.index, 1)
      },
      changeSwitch(data) {
        console.log(data)
      },
      getList() {
        // 获取数据
      }
    },

    data() {
      return {
        tableData: [{
            id: '1',
            number: 'NCJTXY2156897',
            name: '科技楼匝机',
            group: '科技楼-1楼',
          },
          {
            id: '2',
            number: 'NCJTXY2156897',
            name: '科技楼匝机',
            group: '科技楼-1楼',
          }
        ],
        gridData: [{
          date: '2016-05-02 11:15:02',
          name: '王小虎',
          number: '1403090101'
        }, {
          date: '2016-05-04 11:15:56',
          name: '王虎',
          number: '1403090102'
        }, {
          date: '2016-05-04 11:15:56',
          name: '王虎',
          number: '1403090102'
        }, {
          date: '2016-05-04 11:15:56',
          name: '王虎',
          number: '1403090102'
        }, {
          date: '2016-05-04 11:15:56',
          name: '王虎',
          number: '1403090102'
        }, {
          date: '2016-05-04 11:15:56',
          name: '王虎',
          number: '1403090102'
        }],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        },
        value: true,
        dialogVisible: false,
        dialogTableVisible: false,
        dialogremove: false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .body {
    width: 1551px;
    height: 480.5px;
    margin: 29px 29px 0 31px;

    .head {
      display: flex;
      width: 1380px;
      height: 55px;
      margin-left: 40px;
      border-bottom: 1px solid #CCCCCC;

      .head-img {
        width: 30px;
        height: 30px;

        img {
          width: 30px;
        }
      }


      .head-info {
        width: 95px;
        height: 22px;
        margin-top: 5px;
        margin-left: 16px;
        font-weight: bold;
      }
    }

    .switch {
      display: flex;
      width: 1380px;
      line-height: 58px;
      margin-left: 40px;
      font-size: 9px;

      .switch-sw {
        width: 45px;
        margin-left: 19px;
      }

      .switch-button {
        width: 50px;
        margin-left: 103px;

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

        .switch-button-item {
          margin-left: 120px;
        }
      }
    }

    .form {
      margin-left: 40px;
      width: 1380px;
      height: 398px;
      overflow: hidden;

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

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

      .button {
        color: red;
      }

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

    .block {
      display: flex;
      position: absolute;
      right: 129px;
      bottom: 45px;
    }

    .foot-button {
      margin-top: 53px;
    }

    .foot-page {
      margin-top: 53px;
    }
  }
</style>
