<template>
  <div>
    <el-form ref="selectionUserForm" :inline="true" size="small" label-width="auto" style="margin: 20px" @submit.native.prevent>
        <el-form-item label="用户姓名">
            <el-input placeholder="请输入用户名称" v-model="formData.username" clearable></el-input>
          </el-form-item>
           <el-form-item label="手机号码">
            <el-input placeholder="请输入手机号码" v-model="formData.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select style="width: 60%;" 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-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="tableHeight"
      @sizeChange="sizeChange" @currentChange="currentChange">
      <template slot="optionColumn">
        <el-table-column header-align="center" align="center" min-width="210px" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)" class="btn-mb-4">查看</el-button>
            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:user:update']" class="btn-mb-4">修改
            </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)" class="btn-mb-4">{{
                scope.row.isValid == 1 ? "停用" : "启用"
              }}</el-button>
            <el-button type="danger" size="mini" @click="removeUser(scope)" v-hasPermi="['system:user:delete']" class="btn-mb-4">删除用户
            </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 { 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: this.tableHeaders['user'], //表头数据
      userData: {}, //用户详情
      data: [], //用户列表
      drawer: false,
      userFormDisabled: false,
      passwordShow: false,
      drawerTitle: "",
      total: 0,
      loading: false,
      tableHeight: 300
    };
  },
  created() {
    if (this.$store.state.tagsView.cachedViews.length == 0) {
      this.selectUser();
    }
  },
  mounted() {
    // this.tableHeight = window.innerHeight - this.$refs.selectionUserForm.$el.offsetHeight - 250;
  },
  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.msgWarning(res.msg)
          }
        })
        .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.msgWarning(res.msg)
          }
        })
        .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));
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateUserStatus({ id: row.row.id, isValid: nowValid }).then(
            (res) => {
              if (res.code === 200) {
                this.msgSuccess('操作成功')
                this.selectUser();
              } else {
                this.msgWarning(res.msg)
              }
            }
          );
        })
        .catch((err) => {
          console.log(err);
        })
        .catch(() => { });
    },
    //删除用户
    removeUser(row) {
      this.$confirm("是否要删除此用户", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateUserStatus({ id: row.row.id, isValid: 0 }).then((res) => {
            if (res.code === 200) {
              this.msgSuccess('操作成功')
              this.selectUser();
            } else {
              this.msgWarning(res.msg)
            }
          });
        })
        .catch((err) => {
          console.log(err);
        })
        .catch(() => { });
    },
    handleClose(val) {
      this.drawer = false;
      this.userData = {};
      this.selectUser();
    },
    currentChange(val) {
      this.formData.page = val.page;
      this.selectUser();
    },
    sizeChange(val) {
      this.formData.size = val;
      this.selectUser()
    }
  },
};
</script>

<style lang="scss" scoped>

</style>