<template>
  <div>
    <el-form :inline="true" :model="query" class="query-form" size="mini">
      <el-form-item class="query-form-item">
        <el-input v-model="query.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item class="query-form-item">
        <el-select v-model="query.userFlag" placeholder="状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="禁用" value="0"></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="未验证" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!--
            <el-form-item class="query-form-item">
                <el-select v-model="query.roleId" placeholder="角色">
                    <el-option label="全部角色" value=""></el-option>
                    <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
-->
      <el-form-item>
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          ></el-button>
          <el-button type="primary" icon="search" @click="onSubmit"
            >查询</el-button
          >
          <el-button type="primary" @click.native="handleForm(null, null)"
            >新增</el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="用户名" prop="userName" fixed> </el-table-column>
      <el-table-column label="用户昵称" prop="employeeName" fixed>
      </el-table-column>
      <el-table-column label="状态" fixed="">
        <template slot-scope="scope">
          <el-tag :type="scope.row.userFlag | statusFilterType">{{
            scope.row.userFlag | statusFilterName
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="comments" fixed> </el-table-column>
      <el-table-column
        label="登录时间"
        with="300"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span> {{ scope.row.lastLoginTime }}</span>
          <!-- <span>{{ formatTime(scope.row.lastLoginTime,"yyyy-MM-dd") }}</span> -->
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native="handleForm(scope.$index, scope.row)"
            >编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native="handleDel(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="query.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :title="formMap[formName]"
      :visible.sync="formVisible"
      :before-close="hideForm"
      width="70%"
      top="5vh"
    >
      <el-form :model="formData" :rules="formRules" ref="dataForm">
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col" type="flex">
            <div class="text item">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="formData.userName" size="small"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="text item">
                <el-form-item label="用户昵称" prop="employeeName">
                  <el-input
                    v-model="formData.employeeName"
                    size="small"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col" type="flex">
            <div class="text item">
              <el-form-item label="登录密码" prop="passWord">
                <el-input
                  type="password"
                  size="small"
                  v-model="formData.passWord"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="text item">
                <el-form-item label="确认密码" prop="checkPassword">
                  <el-input
                    type="password"
                    size="small"
                    v-model="formData.checkPassword"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="hideForm" size="small">取消</el-button>
        <el-button
          type="primary"
          size="small"
          @click.native="formSubmit()"
          :loading="formLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  authAdminList,
  authCustomerRoles,
  authAdminSave,
  authAdminDelete,
} from "../../api/auth/authAdmin";

import { userInfo } from "../../api/auth/login";
const formJson = {
  id: "",
  passWord: "",
  userName: "",
  checkPassword: "",
  employeeName: "",
  userFlag: 1,
  CustomerId: "",
  roles: [],
};
export default {
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formData.passWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      roles: [],
      query: {
        userName: "",
        userFlag: "",
        page: 1,
        limit: 20,
        roleId: "",
        customerId: "",
      },
      list: [],
      total: 0,
      loading: true,
      index: null,
      formName: null,
      formMap: {
        add: "新增",
        edit: "编辑",
      },

      userInfo: {
        customerId: "",
        userId: "",
        roles: [],
      },
      formLoading: false,
      formVisible: false,
      formData: formJson,
      formRules: {},
      addRules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        checkPassword: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur",
          },
          { validator: validatePass2, trigger: "blur" },
        ],
        // userFlag: [
        //   { required: true, message: "请选择状态", trigger: "change" },
        // ],
      },
      editRules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // userFlag: [
        //   { required: true, message: "请选择状态", trigger: "change" },
        // ],
      },
      deleteLoading: false,
    };
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.query = {
        userName: "",
        userFlag: "",
        page: 1,
        limit: 20,
        roleId: "",
        customerId: this.userInfo.customerId,
      };
      this.getList();
    },
    onSubmit() {
      this.$router.push({
        path: "",
        query: this.query,
      });
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      authAdminList(this.query)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
          this.roles = [];
        });
    },
    getRoleList() {
      authCustomerRoles(this.query)
        .then((response) => {
          this.roles = response.data.list || [];
        })
        .catch(() => {
          this.roles = [];
        });
    },

    getUserInfo() {
      userInfo()
        .then((response) => {
          this.userInfo = {
            customerId: response.data.customerId,
            userId: response.data.id,
            roles: response.data.roleIds,
          };
          this.query.customerId = response.data.customerId;

          this.getList();
        })
        .catch(() => {
          this.customerId = "";
        });
    },

    // 刷新表单
    resetForm() {
      if (this.$refs["dataForm"]) {
        // 清空验证信息表单
        this.$refs["dataForm"].clearValidate();
        // 刷新表单
        this.$refs["dataForm"].resetFields();
      }
    },
    // 隐藏表单
    hideForm() {
      // 更改值
      this.formVisible = !this.formVisible;
      // 清空表单
      this.$refs["dataForm"].resetFields();
      return true;
    },
    // 显示表单
    handleForm(index, row) {
      this.formVisible = true;
      this.formData = JSON.parse(JSON.stringify(formJson));
      if (row !== null) {
        this.formData = Object.assign({}, row);
      }
      this.formName = "add";
      this.formRules = this.addRules;
      if (index !== null) {
        this.index = index;
        this.formName = "edit";
        this.formRules = this.addRules;
      }
    },
    formSubmit() {
      console.log(
        this.formData.userName +
          "--222---" +
          this.formData.employeeName +
          this.formData.userFlag +
          this.formData.id
      );
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.formLoading = true;
          this.formData.userFlag = 1;
          this.formData.roles = this.userInfo.roles;
          this.formData.CustomerId = this.userInfo.customerId;
          let data = Object.assign({}, this.formData);
          let savequery = {
            id: this.formData.id,
            userFlag: 1,
            roles: this.userInfo.roles,
            customerId: this.userInfo.customerId,
            passWord: this.formData.passWord,
            userName: this.formData.userName,
            employeeName: this.formData.employeeName,
          };
          console.log(savequery.id + "---");
          authAdminSave(savequery, this.formName).then((response) => {
            this.formLoading = false;
            if (response.code != 20000) {
              this.$message.error(response.message);
              return false;
            }
            this.$message.success("操作成功");
            this.formVisible = false;
            if (this.formName === "add") {
              // 向头部添加数据
              if (response.data && response.data.id) {
                data.id = response.data.id;
                this.list.unshift(data);
              }
            } else {
              this.list.splice(this.index, 1, data);
            }
            // 刷新表单
            this.resetForm();
          });
        } else {
          console.log("参数错误");
        }
      });
    },
    // 删除
    handleDel(index, row) {
      if (row.id == this.userInfo.userId) {
        this.$message.warning("不能删除自己");
      } else if (row.id) {
        this.$confirm("确认删除该记录吗?", "提示", {
          type: "warning",
        })
          .then(() => {
            let para = { id: row.id };
            this.deleteLoading = true;
            authAdminDelete(para)
              .then((response) => {
                this.deleteLoading = false;
                if (response.code != 20000) {
                  this.$message.error(response.message);
                  return false;
                }
                this.$message.success("操作成功");
                // 刷新数据
                this.list.splice(index, 1);
              })
              .catch(() => {
                this.deleteLoading = false;
              });
          })
          .catch(() => {
            this.$message.info("取消删除");
          });
      }
    },
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "gray",
        1: "success",
        2: "danger",
      };
      return statusMap[status];
    },
    statusFilterName(status) {
      const statusMap = {
        0: "禁用",
        1: "正常",
        2: "未验证",
      };
      return statusMap[status];
    },
  },
  mounted() {},
  created() {
    this.getUserInfo();
    let query = this.$route.query;
    this.query = Object.assign(this.query, query);
    this.query.limit = parseInt(this.query.limit);
    // 加载表格数据

    // // 加载角色列表
    // this.getRoleList();
  },
};
</script>

<style type="text/scss" lang="scss">
</style>
