<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" @change="changeMainSwitch">
        </el-switch>
      </div>

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

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

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="30%" center>
          <el-form ref="dataForm" :model="temp" :rules="rules">
            <el-form-item style="white-space: pre" label="序列号：" class="switch-button-item" prop="serialNumber">
              <el-col :span="12">
                <el-input v-model="temp.serialNumber" autocomplete="off" placeholder="请输入序列号"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item style="white-space: pre" label="名    称：" class="switch-button-item" prop="deviceName">
              <el-col :span="12">
                <el-input v-model="temp.deviceName" autocomplete="off" placeholder="请输入名称"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item style="white-space: pre" label="分    组：" class="switch-button-item" prop="groupId">
              <el-col :span="12">
                <el-select v-model="temp.groupId" placeholder="请选择活动区域" style="width: 100%">
                  <el-option :value="item.id" :label="item.name" v-for="item in groupidlist">{{item.name}}</el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>

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

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

    <!-- 表格区域开始 -->
    <div class="form">
      <el-table :data="list" @sort-change="sortChange">
        
        <!-- 不显示 -->
        <el-table-column label="序号" align="center" v-if="false">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <!-- 不显示 -->
        
        <el-table-column label="序列号" width="300px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.serialNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="300px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分组" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.group }}</span>
          </template>
        </el-table-column>

        <el-table-column label="开关" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.value" active-color="#3BAAFD" inactive-color="#CCCCCC" @change="changeSwitch(scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        </el-table-column>

        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="{ row, $index }">
            <el-button type="text" size="small" @click="handleUpdate(row)">编辑</el-button>

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

            <el-button @click="handleDelete(row, $index)" 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>
              <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList" />
            </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(row, $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";
  import {
    fetchList,
    fetchGroupIdList,
    createDevice,
    updateDevice,
    // fetchDevice,
    // fetchPv
  } from "@/api/devicemanagement";
  export default {
    components: {
      Pagination,
    },
    data() {
      return {
        list: [],
        groupidlist: [],
        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: 8, //一页几条//
        },
        groupidlistQuery:[],
        value: false,
        dialogVisible: false,
        dialogTableVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "添加",
        },
        temp: {
          id: "",
          serialNumber: "",
          deviceName: "",
          groupId: "",
        },
        rules: {
          serialNumber: [{
            required: true,
            message: '请输入序列号',
            trigger: 'change'
          }],
          deviceName: [{
            required: true,
            message: '请输入名称',
            trigger: 'change'
          }],
          groupId: [{
            required: true,
            message: '请输入分组',
            trigger: 'change'
          }],
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        fetchList(this.listQuery).then((response) => {
          this.list = response.data;
          this.total = response.total;
        });
      },
      handleDelete(row, index) {
        if (confirm('是否删除？')) {
          createGroup(this.list).then(() => {
            this.$notify({
              title: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.list.splice(index, 1);
          });
        }
      },
      resetTemp() {
        this.temp = {
          id: undefined,
          serialNumber: "",
          deviceName: "",
          groupId: "",
        };
        // this.temp.id = (this.tableData.length - 0) + 1
      },
      handleCreate() {
        this.getGroupIdList();
        this.resetTemp();
        this.dialogStatus = "create";
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      getGroupIdList() {
        fetchGroupIdList(this.groupidlistQuery).then((response) => {
          this.groupidlist = response.data;
        });
      },
      createData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            // this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
            // this.temp.author = 'vue-element-admin'
            createDevice(this.temp).then(() => {
              this.list.push({serialNumber:this.temp.serialNumber, name:this.temp.deviceName, group:this.temp.groupId});
              this.dialogVisible = false;
              this.$notify({
                title: "添加成功",
                type: "success",
                duration: 2000,
              });
            });
          }
        });
      },
      updateData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp);
            // tempData.timestamp = +new Date(tempData
            //   .timestamp); // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
            updateDevice(tempData).then(() => {
              const index = this.list.findIndex((v) => v.id === this.temp.id);
              this.list.splice(index, 1, this.temp);
              this.dialogVisible = false;
              this.$notify({
                title: "编辑成功",
                type: "success",
                duration: 2000,
              });
            });
          }
        });
      },
      handleUpdate(row) {
        this.temp = Object.assign({}, row); // copy obj
        this.temp.timestamp = new Date(this.temp.timestamp);
        this.dialogStatus = "update";
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      sortChange(data) {
        const {
          prop,
          order
        } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.listQuery.sort = '+id'
        } else {
          this.listQuery.sort = '-id'
        }
        this.handleFilter()
      },
      changeSwitch(data) {
        console.log(data.value);
      },
      changeMainSwitch(value) {
        console.log(value)
      }
    },
  };
</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;
          margin-bottom: 50px;
        }
      }
    }

    .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;
    }
  }
</style>
