<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"
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addUser" v-hasPermi="['system:user:add']"
        >新增用户</el-button
      >
    </div>
    <Tables
      :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>
        <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: [
        {
          type: "index",
          name: "",
          value: "",
          width: "",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "员工号",
          value: "loginName",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "用户姓名",
          value: "username",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "所属口岸",
          value: "portName",
          width: "150px",
          align: "center",
          sortable: false,
          disabled:true
        },
        {
          type: "",
          name: "所属角色",
          value: "roleNames",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "电子邮箱",
          value: "email",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "用户状态",
          value: "isValid",
          width: "100px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "修改时间",
          value: "updateTime",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
        {
          type: "",
          name: "备注",
          value: "remark",
          width: "150px",
          align: "center",
          sorTable: false,
          disabled:true
        },
      ], //表头数据
      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() {
      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>