<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item class="filter-item" label="姓名">
        <el-input v-model.trim="listQuery.userName" placeholder="姓名" />
      </el-form-item>
      <el-form-item class="filter-item" label="手机号" >
        <el-input v-model.trim="listQuery.loginName" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="手机号" />
      </el-form-item>
      <el-form-item>
        <el-button type="info" class="filter-item" @click="handleFilter">清空</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button type="primary" @click="addUser">添加</el-button>
      <el-button type="warning" @click="upDate">修改</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="listDate"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column prop="userName" label="姓名" align="center"/>
      <el-table-column prop="roleName" label="角色权限" align="center">
        <template slot-scope="scope"><a :title="scope.row.roleName">
          <span style="color: #8B8378	">
            {{ scope.row.roleName.length>='15'?scope.row.roleName.substring(0,15)+'..':scope.row.roleName }}
          </span>
          <span v-if="scope.row.roleName==='null'">
            {{ scope.row.roleName='' }}
          </span>
          </a>
          </template>
      </el-table-column>
      <el-table-column prop="loginName" label="手机号" align="center"/>
      <el-table-column prop="remark" label="备注" align="center"/>
      <el-table-column prop="createNmae" label="创建人" align="center"/>
      <el-table-column prop="createDate" label="创建时间" align="center"><template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template></el-table-column>
      <el-table-column prop="updateNmae" label="修改人" align="center"/>
      <el-table-column prop="updateDate" label="修改时间" align="center" ><template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template></el-table-column>
      <el-table-column prop="id" label="操作" align="center">
        <template slot-scope="scope"><a><span style="color: #63B8FF" @click="upDateStatus(scope.row.id,scope.row.status)">{{ scope.row.status =='1' ? '停用账号':'启用账号' }}</span></a></template>
      <!-- <a><template slot-scope="scope">
          <span v-if="scope.row.status==1">{{ '停用账号' }}</span>
          <span v-if="scope.row.status==0">{{ '启用账号' }}</span>
     </template></a> -->
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        id: '',
        userName: '',
        loginName: '',
        roleName: '',
        createUser: '',
        updateUser: '',
        updateDate: '',
        status: '',
        pageNum: 1,
        pageSize: 10,
        roleNameNoNull:''
      },
      total: 0, // 数据总数
      listDate: [],
      deleteIds: [], // 选择的id集合
      listLoading: true // 加载圈
    }
  },
  mounted() {
    // 获取数据
    this.dataQuery()
  },
  methods: {
    ...mapActions('listAnnouncement', [
      'BserPassCertification'
    ]),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.dataQuery()
    },
    padDate(value) {
      value = value < 10 ? '0' + value : value
      return value
    },
    // getStatus(row) { // 获取状态
    //   let statusName = ''

    //   // 判断状态
    //   switch (row.status) {
    //     case '0':
    //       statusName = '已作废'
    //       break
    //     case '1':
    //       statusName = '已发布'
    //       break
    //     case '2':
    //       statusName = '草稿'
    //       break
    //   }

    //   // 如果修改时间和创建时间不一致, 就显示已修改
    //   if (row.status === '1' && (row.updateDate > row.createDate)) {
    //     statusName = '已修改'
    //   }

    //   return statusName
    // },
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('EmployeesList', this.listQuery).then((res) => {
        this.listDate = res.item
        this.list = res.item
        this.total = res.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error EmployeesList')
      })
    },
    handleSelectionChange(data) {
      this.deleteIds = [] // 设置为 空
      for (let i = 0; i < data.length; i++) {
        this.deleteIds.push(data[i].id)
      }
    },
	  search() {
      this.listQuery.pageNum = 1
      this.dataQuery()
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.listQuery.ownerName =''
      this.listQuery.userName=''
      this.listQuery.loginName=''
      this.dataQuery()
    },
    clickTitle(id) {
      this.$router.push({ name: 'contentParticulars-details', params: { id: id }})
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      return year + '-' + month + '-' + day
    },
    addUser(){
    this.$router.push({ name: 'user-addUser' })
     this.listQuery.id=''
    },
    upDate(){
          const deleteIds = this.deleteIds
      if (deleteIds.length > 1) {
        this.$message.error('只能选择一行数据进行修改!')
        return
      }
      if (deleteIds < 1) {
        this.$message.error('请选择一行数据进行修改!')
        return
      }
      //  this.$router.push({ name: 'user-edit' })
       const ids = this.deleteIds[0]
          this.$router.push({ name: 'user-edit', params: { id: ids }})
    },
    upDateStatus(id,status){
      this.listQuery.id=id
      this.listQuery.status=status
      this.$store.dispatch('UpDateStatus', this.listQuery).then((res) => {
        console.log('res',res)
        this.dataQuery()
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error UpDateStatus')
      })
    }
    }
    }
  

</script>

<style scoped>
.root{
  display: flex;
  flex-flow: column;
}
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.operation{
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.button {
  margin-left: 20px;
}
</style>

