<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="handleUpdate">编辑</el-button>
        <el-button type="text" size="small" @click="handleCreate">新建分组</el-button>

        <!-- 新建分组弹窗开始 -->

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%" center>
          <el-form :model="form" ref="dataForm" :rules="rules">

            <el-form-item label="分组名称" prop="name">
              <el-input v-model="form.name" autocomplete="off" placeholder="请输入分组名称"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">确 定</el-button>
            <el-button @click="dialogFormVisible = false,show = false">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 新建分组弹窗结束 -->

        <el-button type="text" size="small" class="remove" @click="handleGroupDelete"><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 background-color="#fff" text-color="#333333" active-text-color="#3BAAFD" @select="handleSelect">
          <el-menu-item v-for="item in list" :index=item.id>
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.name}}</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="form">

      <div class="form-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="listQuery.name" size="mini" placeholder="请输入专业名称" @keyup.enter.native="handleFilter">
          </el-input>
        </span>
        性别：
        <span class="input-select">
          <el-select v-model="listQuery.sex" 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="listQuery.name" size="mini" placeholder="请输入姓名" @keyup.enter.native="handleFilter">
          </el-input>
        </span>
        <el-button type="primary" size="mini" class="button" @click="handleFilter">搜索</el-button>
      </div>

      <div class="form-body">
        <el-table :data="dataList">
          <el-table-column label="序号" width="100px" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="130px" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证" width="130px" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.identity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="100px" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.sex }}</span>
            </template>
          </el-table-column>
          <el-table-column label="宿舍号" width="130px" align="center">
            <template slot-scope="{ row }">
              <span></span>
            </template>
          </el-table-column>
          <el-table-column label="专业/学院" width="130px" align="center">
            <template slot-scope="{ row }">
              <span></span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="130px" align="center">
            <template slot-scope="{ row }">
              <span></span>
            </template>
          </el-table-column>
          <el-table-column label="通行权限" width="190px" align="center">
            <template slot-scope="{ row }">
              <span></span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130px" align="center">
            <template slot-scope="{ row, $index }">
              <el-button type="text" size="small" @click="dialogedit = true">编辑分组</el-button>
              <el-button @click="handleDelete(row, $index)" 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="form-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';
  import {
    fetchList,
    fetchDataList,
    createGroup,
    updateGroup,
    // fetchGroup,
    // fetchPv
  } from "@/api/groupmanagement";
  export default {
    components: {
      Pagination
    },
    data() {
      return {
        sexs: [{
          value: '选项1',
          label: '男'
        }, {
          value: '选项2',
          label: '女'
        }],
        options: [{
          value: '1',
          label: '科技园-1'
        }, {
          value: '2',
          label: '科技园-2'
        }, {
          value: '3',
          label: '科技园-3'
        }],
        form: {
          name: '',
          // region: '',
          // date1: '',
          // date2: '',
          // delivery: false,
          // type: [],
          // resource: '',
          // desc: ''
        },
        listform: {
          id: '',
          name: '',
          sex: '',
          identity: ''
        },
        textMap: {
          update: "编辑",
          create: "新建分组",
        },
        rules: {
          name: [{
            required: true,
            message: "请输入分组名称",
            trigger: "change"
          }],
        },
        dialogStatus: "",
        list: [],
        dataList: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 8,
          name: '',
          sex: ''
        },
        dataListQuery: 2,
        show: false,
        dialogVisible: false,
        dialogedit: false,
        value: [],
        dialogFormVisible: false
      }
    },
    created() {
      this.getList();
      this.getDataList();
    },
    methods: {
      handleGroupDelete() {
        if (confirm('是否删除？')) {
          // this.$nextTick(() => {
          //   this.$refs["dataForm"].clearValidate();
          // });
          createGroup(this.list).then(() => {
            this.$notify({
              title: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.list.splice(this.idGroup, 1);
          });
        }
      },
      handleDelete(row, index) {
        if (confirm('是否删除？')) {
          createGroup(this.dataList).then(() => {
            this.$notify({
              title: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.dataList.splice(index, 1);
          });
        }
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getDataList()
      },

      getList() {
        fetchList(this.listQuery).then((response) => {
          this.list = response.data;
          // this.total = response.total;
        });
      },
      getDataList() {
        fetchDataList({
          idGroup: this.dataListQuery
        }).then((response) => {
          this.dataList = response.data;
          this.total = response.total;
        });
      },
      handleSelect(key) {
        console.log(key);
        this.dataListQuery = key;
        this.getDataList();
      },
      resetform() {
        this.form = {
          id: undefined,
          name: ""
        };
      },
      handleCreate() {
        this.resetform();
        this.dialogFormVisible = true;
        this.show = true
        this.dialogStatus = "create";
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },

      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'
            createGroup(this.form).then(() => {
              this.list.unshift(this.form);
              this.dialogFormVisible = false;
              this.$notify({
                title: "添加成功",
                type: "success",
                duration: 2000,
              });
            });
            this.show = false
          }
        });
      },
      handleUpdate() {
        this.form = Object.assign({}, name); // copy obj
        // this.dataListQuery = id;
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
        this.show = true
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      updateData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.form);

            updateGroup(tempData).then(() => {
              const index = this.list.findIndex((v) => v.id === this.form.id);
              this.list.splice(index, 1, this.form);
              this.dialogFormVisible = false;
              this.$notify({
                title: "编辑成功",
                type: "success",
                duration: 2000,
              });
            });
          }
        });
        this.show = false
      },
    },
  }
</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;
      }

    }

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

      .form-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;
        }
      }

      .form-body {
        margin: 0 auto;
        width: 1304px;

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

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

        .button {
          color: red;
        }

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

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