<template>
  <div class="BodyStyle">
    <el-card shadow="hover" style="margin-top: 5px">
      <el-form ref="listQuery" :model="listQuery">
        <el-row>
          <el-col style="width: 300px">
            <el-form-item prop="keywords">
              <el-input
                size="mini"
                v-model="listQuery.keywords"
                placeholder="请输入 用户名称/登录账号"
              />
            </el-form-item>
          </el-col>
          <el-col style="width: 300px">
            <el-form-item label-width="10px">
              <el-button-group>
                <el-button
                  type="primary"
                  size="mini"
                  @click="getList()"
                  icon="el-icon-search"
                  >查询</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="refresh()"
                  icon="el-icon-refresh"
                  >重置</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="hover" style="margin-top: 5px">
      <div class="rewardHeader">
        <div>{{ title }}列表</div>
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="addRow()"
            >新增{{ title }}</el-button
          >
        </el-button-group>
      </div>

      <el-table
        v-loading="loading"
        :header-cell-style="headClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="id" align="center" label="序号" />
        <el-table-column prop="name" label="用户名称" align="center" />
        <el-table-column prop="account" label="登录账号" align="center" />
        <el-table-column
          prop="updatedAt"
          label="更新时间"
          align="center"
          width="150px"
        />
        <el-table-column prop="updatedBy" label="更新人" align="center" />
        <el-table-column
          prop="createdAt"
          label="创建时间"
          align="center"
          width="150px"
        />
        <el-table-column prop="createdBy" label="创建人" align="center" />
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="deleteRow(scope.row)"
              style="color: #f56c6c"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="dialogData.title"
        :visible.sync="dialogVisible"
        :close-on-press-escape="dialogData.allowEscClose"
        :close-on-click-modal="dialogData.allowEscClose"
        :show-close="dialogData.allowEscClose"
        top="30px"
        left
      >
        <el-form
          :model="editInfo"
          :rules="editInfoRules"
          ref="editInfo"
          label-position="right"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="管理员名称" prop="name">
                <el-input
                  v-model="editInfo.name"
                  placeholder="请输入 管理员名称，最大10个字"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="登录账号" prop="account">
                <el-input
                  v-model="editInfo.account"
                  placeholder="请输入 登录账号，最大10个字"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="登录密码" prop="password">
                <el-input
                  v-model="editInfo.password"
                  show-password
                  placeholder="请输入 登录密码，不输入则不修改密码"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel('editInfo')">取消</el-button>
          <el-button type="primary" @click="update('editInfo')">保存</el-button>
        </div>
      </el-dialog>
    </el-card>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { getToken } from "@/utils/auth";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [],
      title: "管理员",
      listQuery: {
        keywords: "",
        page: 1,
        limit: 15,
      },
      editInfo: {
        id: "",
      },
      dialogVisible: false,
      dialogData: {
        title: "",
        isEdit: false,
        allowEscClose: false,
      },
      editInfoRules: {
        name: [
          {
            required: true,
            message: "请输入 管理员名称",
          },
          {
            max: 10,
            message: "请输入 管理员名称，最大10个字",
          },
        ],
        account: [
          {
            required: true,
            message: "请输入 登录账号",
          },
          {
            max: 16,
            message: "请输入 登录账号，最大10个字",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.$api
        .adminList(this.listQuery)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    addRow() {
      this.dialogData.title = "新增账号";
      this.dialogData.isEdit = false;
      this.editInfo = {};

      this.resetForm("editInfo");
      this.dialogVisible = true;
    },
    editRow(item) {
      this.dialogData.title = "编辑账号";
      this.dialogData.isEdit = true;
      this.editInfo = { ...item };
      this.editInfo.password = null;

      this.resetForm("editInfo");
      this.dialogVisible = true;
    },
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.$api
          .adminUpdate(this.editInfo)
          .then((res) => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.dialogVisible = false;
            this.getList();
          })
          .catch((res) => {});
      });
    },

    deleteRow(item) {
      var that = this;
      this.$confirm("删除该账号【" + item.name + "】, 是否继续?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.adminDelete({ id: item.id }).then((res) => {
            that.$message({
              message: "操作成功",
              type: "success",
            });
            that.getList();
          });
        })
        .catch(() => {});
    },
    cancel() {
      this.resetForm("editInfo");
      this.dialogVisible = false;
    },
    refresh() {
      (this.listQuery = {
        keywords: "",
        page: 1,
        limit: 15,
      }),
        this.getList();
    },
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    headClass() {
      return "text-align: center;";
    },
    exportData() {
      let url =
        this.$up +
        "/admin/users/list" +
        "&keywords=" +
        this.listQuery.keywords +
        "&is_black=" +
        this.listQuery.is_black +
        "&start=" +
        this.listQuery.start +
        "&end=" +
        this.listQuery.end +
        "&token=" +
        getToken();
      window.location.href = url;
    },
  },
};
</script>

<style scoped>
.BodyStyle {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.rewardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>
