<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="listQuery.name" size="small" placeholder="请输入账号或昵称 " @keyup.enter.native="handleFilter">
        </el-input>
      </div>

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

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

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

          <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%" center>
            <el-form ref="dataForm" :model="temp" :rules="rules">
              <el-form-item style="white-space: pre" label="账号：" class="switch-button-item" prop="name">
                <el-col :span="12">
                  <el-input v-model="temp.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" prop="nickname">
                <el-col :span="12">
                  <el-input v-model="temp.nickname" 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" prop="password">
                <el-col :span="12">
                  <el-input v-model="temp.password" autocomplete="off" placeholder="请输入密码" style="width: 110%">
                  </el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <span slot="footer">
              <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">确 定</el-button>
              <el-button @click="dialogFormVisible = false">取 消</el-button>
            </span>
          </el-dialog>

          <!-- 添加弹窗区域结束 -->
        </el-row>
      </div>
    </div>

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

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

    <div class="form">
      <el-table :data="list" @sort-change="sortChange">

        <el-table-column label="账号" 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.nickname }}</span>
          </template>
        </el-table-column>

        <el-table-column label="密码" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.password }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="{ row, $index }">
            <el-button type="text" size="small" @click="handleUpdate(row)">编辑</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="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(row, $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 v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
          @pagination="getList" />
      </template>
    </div>

    <!-- 底部分页区结束 -->
  </div>
</template>

<script>
  import Pagination from "@/components/Pagination";
  import {
    createAdmin,
    updateAdmin,
    fetchList,
    // fetchPv,
    // fetchAdmin
  } from "@/api/getuser";

  export default {
    components: {
      Pagination,
    },
    data() {
      return {
        list: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 8,
          // importance: undefined,
          // title: undefined,
          // type: undefined,
          // sort: '+id'
          name: "",
          nickname: "",
          password: "",
        },
        temp: {
          id: undefined,
          name: "",
          nickname: "",
          password: "",
        },
        timer: null,
        dialogFormVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "添加",
        },
        rules: {
          name: [{
            required: true,
            message: "请输入昵称",
            trigger: "change"
          }],
          nickname: [{
            required: true,
            message: "请输入账号",
            trigger: "change"
          }, ],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "change"
          }, ],
        },
      };
    },
    // watch: {
    //   input() {
    //     if (this.timer) {
    //       clearTimeout(this.timer)
    //     }
    //     this.timer = setTimeout(() => {
    //       const result = []
    //       for (let i in this.list) {
    //         this.list[i].forEach((value) => {
    //           if (value.name.indexOf(this.input) > -1 ||
    //             value.number.indexOf(this.input) > -1) {
    //             result.push(value)
    //           }
    //         })
    //       }
    //       this.list = result
    //     }, 100)
    //   }
    // },
    created() {
      this.getList();
    },
    methods: {
      handleDelete(row, index) {
        if (confirm('是否删除？')) {
          createAdmin(this.list).then(() => {
            this.$notify({
              title: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.list.splice(index, 1);
            this.total = this.total - 1
          });
        }
      },
      resetTemp() {
        this.temp = {
          id: undefined,
          name: "",
          nickname: "",
          password: "",
        };
      },
      handleCreate() {
        this.resetTemp();
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
        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'
            createAdmin(this.temp).then(() => {
              this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "添加成功",
                type: "success",
                duration: 2000,
              });
            });
          }
        });
      },
      updateData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp);

            updateAdmin(tempData).then(() => {
              const index = this.list.findIndex((v) => v.id === this.temp.id);
              this.list.splice(index, 1, this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "编辑成功",
                type: "success",
                duration: 2000,
              });
            });
          }
        });
      },
      handleUpdate(row) {
        this.temp = Object.assign({}, row); // copy obj
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      getList() {
        fetchList(this.listQuery).then((response) => {
          this.list = response.data;
          this.total = response.total;
        });
      },
      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();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .body {
    position: relative;
    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;
          margin-bottom: 50px;
        }

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

    .form {
      margin-left: 40px;
      width: 1380px;

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

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

      .button {
        color: red;
      }

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

    .block {
      display: flex;
      margin-bottom: 50px;
      margin-left: 500px;
    }
  }
</style>
