<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">
      <el-table
        :data="tableData"
        height="630"
        v-loading="tableLoading"
        border ref="tableEle">
        <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]">
              <div v-if="scope.row[item.prop]">
                <el-button v-if="item.link" type="text"
                  @click="handleView(scope.row.id)">{{scope.row[item.prop]}}</el-button>
                <span v-else>{{scope.row[item.prop]}}</span>
              </div>
            </div>
            <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
              <el-button
                size="medium"
                type="primary"
                @click="handleEdit(scope.row.id)">修改</el-button>
              <el-button
                size="medium"
                type="primary"
                @click="handleResetpw(scope.row)">重置密码</el-button>
              <el-button
                size="medium"
                type="danger"
                @click="handleBan(scope.row.id)">停用</el-button>
              <el-button
                size="medium"
                type="primary"
                @click="handleRight(scope.row.id)">分配权限</el-button>
            </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" :operateM="operateM" v-on:dialogChanged="dialogChanged"></editUser>
  </div>
</template>

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

  import editUser from './editUser'
  export default {
    data() {
      return {
        searchText: '',
        operateM: {},
        pageSize: 10,
        pageNo: 1,
        total: 0,
        tableData: [],
        tableLoading: true,
        tableItem: [
          {
            prop: 'account',
            tit: '账号',
            link: true
          },
          {
            prop: 'name',
            tit: '用户名'
          },
          {
            prop: 'job',
            tit: '职位'
          },
          {
            prop: 'comp',
            tit: '所在部门'
          },
          {
            prop: 'dep',
            tit: '所在机构'
          },
          {
            prop: 'phone',
            tit: '联系电话',
            width: '160'
          },
          {
            prop: 'email',
            tit: '联系邮箱',
            width: '160'
          },
          {
            prop: 'createTime',
            tit: '创建时间',
            width: '160'
          },
          {
            operate: true,
            width: '220'
          }
        ]
      }
    },
    components: {
      editUser
    },
    created() {
      this.pageQueryUser()
    },
    methods: {
      pageQueryUser() {
        var that = this
        that.$http.get(pageQueryUser, {
          actived: 1,
          pageSize: that.pageSize,
          pageNo: that.pageNo
        }, function(res) {
          that.tableLoading = false
          if (res.success && res.data) {
            const obj = res.data.data
            if (obj.length) {
              for (let i = 0; i < obj.length; ++i) {
                if (obj[i].createTime) {
                  obj[i].createTime = parseTime(obj[i].createTime)
                }
                if (obj[i].invalidTime) {
                  obj[i].invalidTime = parseTime(obj[i].invalidTime)
                }
              }
            }
            that.total = res.data.total
            that.tableData = obj
            comTable.gapFilling(that.tableData)
          } else {
            that.total = 0
            that.tableData = []
          }
        })
      },
      handleCurrentChange(val) {
        this.$refs.tableEle.bodyWrapper.scrollTop = 0
        this.pageNo = val
        this.pageQueryUser()
      },
      dialogChanged() {
        this.searchText = ''
        this.pageNo = 1
        this.total = 0
        this.tableData = []
        this.pageQueryUser()
      },
      handleAdd() {
        this.operateM = {
          type: 'add',
          tit: '添加用户信息'
        }
        this.$refs.userInfoDialog.getUserDetail()
      },
      handleView(id) {
        this.operateM = {
          type: 'view',
          tit: '查看用户信息'
        }
        this.$refs.userInfoDialog.getUserDetail(id)
      },
      handleEdit(id) {
        this.operateM = {
          type: 'edit',
          tit: '修改用户信息'
        }
        this.$refs.userInfoDialog.getUserDetail(id)
      },
      handleRight(id) {
        this.operateM = {
          type: 'right',
          tit: '用户分配权限'
        }
        this.$refs.userInfoDialog.getUserDetail(id)
      },
      handleResetpw(row) {
        var that = this
        that.$confirm(`确定重置用户 ${row.name} 的密码`, '提示信息', {
          type: 'warning',
          center: true
        }).then(() => {
          that.$http.get(resetPw, {
            id: row.id
          }, function(res) {
            if (res.success) {
              that.$message({
                type: 'success',
                message: '该用户密码重置成功!'
              })
            }
          })
        }).catch(() => {})
      },
      handleBan(id) {
        var that = this
        this.$confirm('确定停用该账户？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          that.$http.get(banUser, {
            id: id
          }, function(res) {
            if (res.success) {
              that.pageQueryUser()
            }
          })
        })
      }
    }
  }
</script>