<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">停用账号列表</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]">{{scope.row[item.prop]}}</div>
            </div>
            <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
              <el-button
                size="medium"
                type="primary"
                @click="handleRenew(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>
  </div>
</template>

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

  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'
          },
          {
            prop: 'invalidTime',
            tit: '停用时间',
            width: '160'
          },
          {
            operate: true,
            width: '160'
          }
        ]
      }
    },
    created() {
      this.pageQueryUser()
    },
    methods: {
      pageQueryUser() {
        var that = this
        that.$http.get(pageQueryUser, {
          actived: 0,
          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()
      },
      handleRenew(id) {
        var that = this
        this.$http.get(renewUser, {
          id: id
        }, function(res) {
          if (res.success) {
            that.pageQueryUser()
          }
        })
      }
    }
  }
</script>