<template>
  <div class="user_manage pg-main">
    <div class="pg-title">
      <span>用户管理</span>
    </div>
    <div class="pg-select-infos">
      <Form ref="user_query_form" :label-width="80" inline>
        <Row :gutter="20">
          <Col span="8">
            <FormItem label="用户名" style="width: 100%">
              <Input v-model="query.userName" placeholder="模糊查询" />
            </FormItem>
          </Col>
          <Col span="8">
            <Button
              @click="doQuery"
              style="min-left: 10px"
              type="primary"
              icon="md-search"
              >查询</Button
            >
            <Button @click="addUser" type="primary" icon="md-person-add"
              >新增用户</Button
            >
          </Col>
        </Row>
      </Form>
    </div>
    <div class="pg-body">
      <Table
        ref="user_table"
        :columns="columns"
        :data="list"
        :stripe="true"
        :disabled-hover="true"
      ></Table>
      <Page
        placement="top"
        :current="query.pageNo"
        :loading="true"
        :page-size="query.pageSize"
        :total="query.totalElements"
        show-total
        show-sizer
        @on-change="changePageNo"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>

    <Modal
      v-model="editUserModal"
      :closable="false"
      :mask-closable="false"
      :width="500"
    >
      <h3 slot="header" style="color: #2d8cf0">用户信息</h3>
      <Form
        ref="userForm"
        :model="user"
        :label-width="100"
        label-position="right"
        :rules="inforValidate"
      >
        <FormItem prop="schoolId" label="学校" style="width: 80%">
          <Select v-model="user.schoolId" placeholder="请选择学校">
            <Option
              v-for="item in xldata.schoolList"
              :value="item.id"
              :key="item.name"
              >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
        <FormItem prop="userName" label="用户名">
          <Input
            v-model="user.userName"
            :disabled="isEdit"
            placeholder="请输入用户名"
          ></Input>
        </FormItem>
        <FormItem prop="password" label="密码">
          <Input
            type="password"
            v-model="user.password"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem label="角色">
          <Input v-model="user.role" disabled></Input>
        </FormItem>
        <FormItem prop="realName" label="姓名">
          <Input v-model="user.realName" placeholder="请输入姓名"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelEditUser">取消</Button>
        <Button type="primary" @click="saveEditUser">保存</Button>
      </div>
    </Modal>

    <Modal
      v-model="resetPwdModal"
      :closable="false"
      :mask-closable="false"
      :width="500"
    >
      <h3 slot="header" style="color: #2d8cf0">重置密码</h3>
      <Form
        ref="resetUser"
        :model="resetUser"
        :label-width="100"
        label-position="right"
        :rules="resetValidate"
      >
        <FormItem prop="userName" label="用户名">
          <Input
            v-model="resetUser.userName"
            :disabled="true"
            placeholder="请输入用户名"
          ></Input>
        </FormItem>
        <FormItem prop="password" label="密码">
          <Input
            type="password"
            v-model="resetUser.password"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem prop="rpassword" label="确认密码">
          <Input
            type="password"
            v-model="resetUser.rpassword"
            placeholder="请再次输入密码"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelResetPwd">取消</Button>
        <Button type="primary" @click="doReset">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { axios } from "../../libs/http";
export default {
  name: "user_manage",
  data() {
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.resetUser.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      xldata: {
        schoolListList: [],
      },
      query: {
        pageNo: 1,
        pageSize: 10,
        totalElements: 0,
        totalPages: 0,
        userName: "",
      },
      resetUser: {
        id: "",
        userName: "",
        password: "",
        rpassword: "",
      },
      user: {
        id: "",
        userName: "",
        role: "ADMIN",
        realName: "",
        password: "",
        schoolId: "",
      },
      editUserModal: false,
      resetPwdModal: false,
      saveUserLoading: false,
      isEdit: false,
      columns: [
        {
          type: "index",
          title: "序号",
          width: 80,
        },
        {
          title: "学校",
          key: "schoolName",
          minWidth: 200,
          align: "center",
        },
        {
          title: "用户名",
          key: "userName",
          minWidth: 200,
          align: "center",
        },
        {
          title: "角色",
          key: "role",
          minWidth: 150,
          align: "center",
        },
        {
          title: "姓名",
          key: "realName",
          minWidth: 200,
          align: "center",
        },
        {
          title: "操作",
          key: "show_more",
          align: "center",
          width: 160,
          render: (h, params) => {
            if (params.row.role != "SUPER_ADMIN") {
              return h("div", [
                h(
                  "Tooltip",
                  {
                    props: {
                      content: "修改密码",
                      placement: "top",
                    },
                  },
                  [
                    h(
                      "span",
                      {
                        style: {
                          cursor: "pointer",
                          padding: "0 10px",
                        },
                        on: {
                          click: () => {
                            this.doResetShow(params.row);
                          },
                        },
                      },
                      [
                        h(
                          "Icon",
                          {
                            props: {
                              size: "22",
                              type: "md-lock",
                            },
                          },
                          ""
                        ),
                      ]
                    ),
                  ]
                ),
                h(
                  "Tooltip",
                  {
                    props: {
                      content: "删除",
                      placement: "top",
                    },
                  },
                  [
                    h(
                      "span",
                      {
                        style: {
                          cursor: "pointer",
                          padding: "0 10px",
                        },
                        on: {
                          click: () => {
                            this.doDelete(params.row);
                          },
                        },
                      },
                      [
                        h(
                          "Icon",
                          {
                            props: {
                              size: "22",
                              type: "ios-trash",
                            },
                          },
                          ""
                        ),
                      ]
                    ),
                  ]
                ),
              ]);
            }
          },
        },
      ],
      list: [],
      inforValidate: {
        schoolId: [{ required: true, message: "请选择学校", trigger: "blur" }],
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      resetValidate: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        rpassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: valideRePassword, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    avatorImage() {
      return localStorage.avatorImgPath;
    },
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      axios.post("/system/user/pageQuery", this.query).then((response) => {
        let data = response.data.data;
        if (data) {
          this.list = data.content || [];
          this.query.totalElements = data.totalElements;
          this.query.totalPages = data.totalPages;
        }
      });
      let a = this.user.schoolId;
      this.xldata.schoolList = [];
      axios.post("/system/common/find/school/list", {}).then((response) => {
        let data = response.data.data;
        if (data) {
          this.xldata.schoolList = data;
          this.user.schoolId = a;
        }
      });
    },
    doQuery() {
      this.query.pageNo = 1;
      this.load();
    },
    changePageNo(p) {
      //切换页码
      this.query.pageNo = p;
      this.load();
    },
    changePageSize(pageSize) {
      //切换每一页显示多少条
      this.query.pageSize = pageSize;
      this.load();
    },
    addUser() {
      this.user.userName = null;
      this.user.realName = null;
      this.user.id = null;
      this.isEdit = false;
      this.editUserModal = true;
    },
    cancelEditUser() {
      this.editUserModal = false;
    },
    saveEditUser() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.saveUserLoading = true;
          axios.post("/system/user/save", this.user).then((response) => {
            let data = response.data;
            if (data.code == 0) {
              this.$Notice.success({
                title: "系统提示",
                desc: "<p>操作成功</p>",
              });
              this.load();
            }
            this.saveUserLoading = false;
            this.editUserModal = false;
          });
        }
      });
    },
    doEdit(row) {
      this.user.id = row.id;
      this.user.userName = row.userName;
      this.user.realName = row.realName;
      this.user.password = row.password;
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.isEdit = true;
          this.editUserModal = true;
        }
      });
    },
    cancelResetPwd() {
      this.resetPwdModal = false;
    },
    doResetShow(row) {
      this.resetUser.userName = row.userName;
      this.resetUser.password = "";
      this.resetUser.rpassword = "";
      this.resetUser.schoolId = row.schoolId;
      this.resetPwdModal = true;
    },
    doReset() {
      this.$refs["resetUser"].validate((valid) => {
        if (valid) {
          axios
            .post("/system/user/superResetPwd", this.resetUser, {
              headers: {
                schoolId: this.$store.state.user.schoolId, //token换成从缓存获取
              },
            })
            .then((response) => {
              let data = response.data;
              if (data.code == 0) {
                this.$Notice.success({
                  title: "系统提示",
                  desc: "<p>操作成功</p>",
                });
                this.load();
              }
              this.resetPwdModal = false;
            });
        }
      });
    },
    doDelete(row) {
      let _$ = this;
      if (row) {
        this.$Modal.confirm({
          title: "系统提示",
          content: "是否删除？",
          onOk() {
            axios
              .post("/system/user/deleteById", { id: row.id })
              .then((response) => {
                let data = response.data;
                if (data.code == 0) {
                  _$.load();
                  this.$Notice.success({
                    title: "系统提示",
                    desc: "<p>用户删除成功</p>",
                  });
                }
              });
          },
        });
      }
    },
  },
};
</script>
