<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">平台后台用户管理列表</div>
      <div class="contian-operate">
        <el-button type="primary" @click="handleADD">添加</el-button>
      </div>
    </div>
    <div class="content-container">
      <div class="contain-select">
        <span>用户分类：</span>
        <el-select
          v-model="selectMode"
          @change="selectChange">
          <el-option label="正常账号" value="1" selected></el-option>
          <el-option label="停用账号" value="2"></el-option>
        </el-select>
      </div>
      <el-table
        :data="tableData"
        height="630"
        border>
        <el-table-column
          v-for="item in tableItem"
          :key="item.index"
          :prop="item.prop ? item.prop : ''"
          :label="item.tit ? item.tit : ''"
          :width="item.width ? item.width : ''"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row[item.prop]">
              {{scope.row[item.prop]}}
            </div>
            <div v-if="item.operate && typeof scope.row === 'object'">
              <div class="normal" v-if="scope.row.active">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)">修改</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleResetpw(scope.row)">重置密码</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleRight(scope.row)">分配权限</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">停用</el-button>
              </div>
              <div class="forbidden" v-else>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">恢复</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <editUser ref="userInfoDialog"></editUser>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import { parseTime } from '@/utils'
  import comTable from '@/utils/comTable'
  import {
    pageQueryUser,
    // addUser,
    resetPw
    // updateUser,
    // updatePermission,
    // banUser
  } from '@/api/sysSetting'

  import editUser from './editUser'
  export default {
    data() {
      return {
        searchText: '',
        selectMode: '1',
        pageSize: 10,
        pageNo: 1,
        total: 0,
        tableData: [],
        tableItem: [
          {
            prop: 'account',
            tit: '账号'
          },
          {
            prop: 'id',
            tit: '用户名'
          },
          {
            prop: 'job',
            tit: '职位',
            width: '160'
          },
          {
            prop: 'comp',
            tit: '所在部门',
            width: '160'
          },
          {
            prop: 'dep',
            tit: '所在机构'
          },
          {
            prop: 'phone',
            tit: '联系电话',
            width: '160'
          },
          {
            prop: 'email',
            tit: '联系邮箱',
            width: '160'
          },
          {
            prop: 'createTime',
            tit: '创建时间',
            width: '160'
          },
          {
            operate: true,
            width: '200'
          }
        ]
      }
    },
    components: {
      editUser
    },
    created() {
      this.pageQueryUser()
    },
    methods: {
      pageQueryUser() {
        var that = this
        request.get(pageQueryUser, {
          active: that.selectMode,
          pageSize: that.pageSize,
          pageNo: that.pageNo
        }, function(res) {
          if (res.data.success && res.data.data) {
            const obj = res.data.data
            for (let i = 0; i < obj.length; ++i) {
              if (obj[i].createTime) {
                obj[i].createTime = parseTime(obj[i].createTime)
              }
            }
            that.total = res.data.total
            that.tableData = obj
          }
        })
        comTable.gapFilling(that.tableData)
      },
      handleADD() {
        // this.$refs.BInfoDialog02.queryServerList()
        this.$refs.userInfoDialog.userDialogVisible = true
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.pageQueryUser()
      },
      selectChange(val) {
        this.selectMode = val
        this.pageQueryUser()
      },
      handleEdit(row) {
        var that = this
        request.get(resetPw, {
          id: row.id
        }, function(res) {
          that.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      },
      handleResetpw(row) {
        var that = this
        that.$confirm(`确定重置用户${row.name}的密码`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          request.get(resetPw, {
            id: row.id
          }, function(res) {
            that.$message({
              type: 'success',
              message: '该用户密码重置成功!'
            })
          })
        })
      },
      handleRight(row) {
        // var that = this
        // request.get(updatePermission + row.id, {
        // }, function(res) {
        //   that.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   })
        // })
      }
    }
  }
</script>