<template>
  <div class="body">

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

    <div class="head">
      <div class="head-img">
        <img src="../../../public/user-1.png">
      </div>
      <div class="head-info">
        账号管理
      </div>
    </div>

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

    <!-- 搜索添加区域开始 -->

    <div class="user">
      条件：
      <div class="input">
        <el-input v-model="input" size="small" placeholder="请输入账号或昵称 "></el-input>
      </div>

      <div class="input-serch">
        <el-row>
          <el-button size="small" type="primary" @click="handleserch">搜索</el-button>
        </el-row>
      </div>

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

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

          <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.name" autocomplete="off" placeholder="请输入昵称" style="width: 110%">
                  </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.number" autocomplete="off" placeholder="请输入账号" style="width: 110%">
                  </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.possword" autocomplete="off" placeholder="请输入密码" style="width: 110%">
                  </el-input>
                </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>

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

        </el-row>
      </div>
    </div>

    <!-- 搜索添加区域结束 -->

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

    <div class="form">
      <el-table :data="tableData" header-cell-style="background-color: #E6ECFE">
        <el-table-column label="昵称" prop="name" align="center">
        </el-table-column>
        <el-table-column label="账号" prop="number" align="center">
        </el-table-column>
        <el-table-column label="密码" prop="password" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</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="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="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
    },
    data() {
      return {
        tableData: [{
            id: '1',
            name: '随风飘荡',
            number: 'admin14589',
            password: '123456',
          },
          {
            id: '2',
            name: '随风飘荡',
            number: 'admin14589',
            password: '4561236',
          }, {
            id: '3',
            name: '随风飘荡',
            number: 'admin14589',
            password: '789632',
          }, {
            id: '4',
            name: '随风飘荡',
            number: 'admin14589',
            password: '556632',
          },
        ],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        },
        input: '',
        list: [],
        timer: null,
        dialogVisible: false,
        dialogeremovefrom: false,
      }
    },
    // watch: {
    //   input() {
    //     if (this.timer) {
    //       clearTimeout(this.timer)
    //     }
    //     this.timer = setTimeout(() => {
    //       const result = []
    //       for (let i in this.tableData) {
    //         this.tableData[i].forEach((value) => {
    //           if (value.name.indexOf(this.input) > -1 ||
    //             value.number.indexOf(this.input) > -1) {
    //             result.push(value)
    //           }
    //         })
    //       }
    //       this.list = result
    //     }, 100)
    //   }
    // },
    methods: {
      handleDelete(index) {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.dialogeremovefrom = false,
          this.tableData.splice(index, 1)

      },
      handleCreate() {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
        this.dialogVisible = false
        this.tableData.push(length.index, 1)
      },
      getList() {
        // 获取数据
      }
    }
  }
</script>

<style lang="scss" scoped>
  .body {
    width: 1551px;
    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;
      }
    }

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

      .input {
        width: 240px;
        margin-left: 21px;
      }

      .input-serch {
        margin-left: 32px;
      }

      .input-add {
        margin-left: 915px;

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

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

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