<template>
  <div>
    <el-form ref="selectionUserForm" label-width="auto" style="margin: 20px">
      <el-row :gutter="50">
        <el-col :span="6">
          <el-form-item label="用户姓名">
            <el-input placeholder="请输入用户名称" v-model="formData.username" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号码">
            <el-input placeholder="请输入手机号码" v-model="formData.phone" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-select placeholder="用户状态" v-model="formData.isValid" clearable>
              <el-option label="启用" value="1"> </el-option>
              <el-option label="停用" value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin:20px">
      <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="selectUser(0)">搜索
      </el-button>
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addUser" v-hasPermi="['system:user:add']">新增用户
      </el-button>
    </div>
    <Tables ductName="user" :data="data" :headerData="tableHeader" :limitSize="formData.size" :totalCount="total"
      :loading="loading" :page="formData.page" :pageSizes="[20, 30, 40, 50]" height="600" @sizeChange="sizeChange"
      @currentChange="currentChange">
      <template slot="optionColumn">
        <el-table-column header-align="center" align="center" width="auto" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)">查看</el-button>
            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:user:update']">修改
            </el-button>
            <!-- <el-button type="primary" size="mini" @click="passwordShow = !passwordShow"
              >修改密码</el-button
            > -->
            <el-button :type="scope.row.isValid == 1 ? 'warning' : 'primary'" size="mini"
              v-hasPermi="['system:user:openClose']" @click="userStatus(scope)">{{ scope.row.isValid == 1 ? "停用" : "启用"
              }}</el-button>
            <el-button type="danger" size="mini" @click="removeUser(scope)" v-hasPermi="['system:user:delete']">删除用户
            </el-button>
          </template>
        </el-table-column>
      </template>
    </Tables>
    <Drawer :drawer="drawer" :drawerTitle="drawerTitle" :userFormDisabled="userFormDisabled" :userData="userData"
      @handleClose="handleClose"></Drawer>
    <!-- <el-dialog
      title="修改密码"
      :visible.sync="passwordShow"
      width="30%"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form label-width="auto">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="旧密码：">
              <el-input placeholder="请输入旧密码" type="password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="新密码：">
              <el-input placeholder="请输入新密码" type="password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="确认新密码：">
              <el-input placeholder="请确认新密码" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="dialogFoot">
          <el-button @click="passwordShow = false">取 消</el-button>
          <el-button type="primary" @click="passwordShow = false">确 定</el-button>
        </div>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import Drawer from "./drawer.vue";
import { MessageBox } from "element-ui";
import { listUser, detailUser, updateUserStatus } from "@/api/system/user.js";
export default {
  name: "UserConfig",
  components: {
    Drawer,
  },
  data() {
    return {
      formData: {
        page: 1,
        size: 20,
        isValid: null,
        username: null,
        phone: null,
      }, //查询条件
      tableHeader: [
        {
          name: "员工号",
          value: "loginName",
          width: "150px",
          align: "center",
        },
        {
          name: "用户姓名",
          value: "username",
          width: "150px",
          align: "center",
        },
        {
          name: "所属口岸",
          value: "portName",
          width: "150px",
          align: "center",
        },
        {
          name: "所属角色",
          value: "roleNames",
          width: "150px",
          align: "center",
        },
        {
          name: "电子邮箱",
          value: "email",
          width: "150px",
          align: "center",
        },
        {
          name: "用户状态",
          value: "isValid",
          width: "100px",
          align: "center",
        },
        {
          name: "修改时间",
          value: "updateTime",
          width: "150px",
          align: "center",
        },
        {
          name: "备注",
          value: "remark",
          width: "150px",
          align: "center",
        },
      ], //表头数据
      userData: {}, //用户详情
      data: [], //用户列表
      drawer: false,
      userFormDisabled: false,
      passwordShow: false,
      drawerTitle: "",
      total: 0,
      loading: false,
    };
  },
  created() {
    if (this.$store.state.tagsView.cachedViews.length == 0) {
      this.selectUser();
    }
  },
  activated() {
    this.selectUser();
  },
  deactivated() {
    this.data = []
  },
  methods: {
    //用户列表
    selectUser(val) {
      if (val == 0) {
        this.formData.page = 1
      }
      this.loading = true;
      listUser(this.formData)
        .then((res) => {
          this.loading = false;
          if (res.code === 200) {
            this.data = res.data.list;
            this.total = res.data.total;
            this.formData.page = res.data.page;
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },

    //用户详情
    userDetail(id) {
      detailUser(id)
        .then((res) => {
          this.drawer = true;
          this.drawerTitle = "修改用户";
          if (res.code === 200) {
            this.userData = res.data;
            this.userData.portName
              ? this.userData.portName = this.userData.portName.split(",")
              : '';
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //新增用户
    addUser() {
      this.userData = {};
      this.drawer = true;
      this.drawerTitle = "新增用户";
      this.userFormDisabled = false;
    },

    //查询修改用户
    buttonClick(row, status) {
      this.userDetail(row.row.id);
      status == 0
        ? (this.userFormDisabled = true)
        : (this.userFormDisabled = false);
    },

    //修改用户状态
    userStatus(row) {
      let msg = "";
      let nowValid = 1;
      row.row.isValid == 1
        ? ((msg = "是否要停用此用户"), (nowValid = 2))
        : ((msg = "是否要启用此用户"), (nowValid = 1));
      MessageBox.confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateUserStatus({ id: row.row.id, isValid: nowValid }).then(
            (res) => {
              if (res.code === 200) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.selectUser();
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning",
                });
              }
            }
          );
        })
        .catch((err) => {
          console.log(err);
        })
        .catch(() => []);
    },

    //删除用户
    removeUser(row) {
      MessageBox.confirm("是否要删除此用户", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateUserStatus({ id: row.row.id, isValid: 0 }).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.selectUser();
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        })
        .catch(() => []);
    },

    handleClose(val) {
      this.drawer = val;
      this.userData = {};
      this.selectUser();
    },

    currentChange(val) {
      this.formData.page = val.page;
      this.selectUser();
    },

    sizeChange(val) {
      this.formData.size = val;
      this.selectUser()
    }
  },
};
</script>

<style>
</style>