<template lang='pug'>
  el-container
    el-main( style="padding:0px;height:700px;")
      el-header(style='height:42px;line-height:42px;')
        span.title-bold.title-left-color()  人员列表
      el-card()
          div.tableCard
            el-form( :inline="true" :model="dataForm" size="mini" )
              el-form-item(label="姓名:")
                el-input(  v-model="dataForm.name" placeholder="姓名" clearable)
              el-form-item( label="证件号码:")
                el-input(  v-model="dataForm.cardNumber" placeholder="证件号码" clearable)
              el-form-item( label="移动电话:")
                el-input(  v-model="dataForm.mobile" placeholder="移动电话" clearable)
              el-form-item( label="政治面貌:")
                el-select(  v-model="dataForm.politicCountenance" placeholder="政治面貌" clearable)
                  el-option(v-for="(item, index) in politicCountenance" :key="index" :label="item.name" :value="item.id")
              el-form-item( label="人员类型:")
                el-select(  multiple  v-model="dataForm.types" placeholder="人员类型" clearable)
                  el-option(v-for="(item, index) in types" :key="index" :label="item.name" :value="item.id")
              el-form-item( label="民族:")
                el-select(  v-model="dataForm.nation" placeholder="民族" clearable)
                  el-option(v-for="(item, index) in nations" :key="index" :label="item.name" :value="item.id")
              el-button(v-if="isAuth('em:person:info')" @click="getDataList()" size="mini" icon="el-icon-search" type="primary") 查询
              el-button(v-if="isAuth('em:person:save')" type="primary" size="mini" icon='el-icon-plus' @click="addOrUpdateHandle()" style="float:right;") 新增
          el-table(:data="dataList" @sort-change='sortChange' style="width:100%;" v-loading="dataListLoading" :stripe="true"  @selection-change="selectionChangeHandle"  :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
            el-table-column( type='index', header-align='center', align='center', label='序号')
              template(scope="scope")
                span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
            el-table-column( prop="name" header-align="center" align="center" label="姓名" sortable='custom')
            el-table-column( prop="gender" header-align="center" align="center" label="性别" sortable='custom')
              template(slot-scope='scope')
                font(v-if='scope.row.gender===0') 女
                font(v-if='scope.row.gender===1') 男
            el-table-column( prop="birthday" header-align="center" align="center" label="出生日期" sortable='custom')
            el-table-column( prop="politicCountenanceName" header-align="center" align="center" label="政治面貌" sortable='custom')
            el-table-column( prop="nationName" header-align="center" align="center" label="民族" sortable='custom')
            el-table-column( prop="card_number" header-align="center" align="center" label="证件号码" sortable='custom')
            el-table-column( prop="mobile" header-align="center" align="center" label="移动电话" sortable='custom')
            el-table-column( prop="typesName" header-align="center" align="center" label="人员类型" )
              template(slot-scope="scope")
                font(:title="scope.row.typesName") {{scope.row.typesName | ellipsis}}
            el-table-column( prop="skill" header-align="center" align="center" label="专长" sortable='custom')
              template(slot-scope="scope")
                font(:title="scope.row.skill") {{scope.row.skill | ellipsis}}
            el-table-column( prop header-align="center" align="center" label="操作" width='300px')
              template.operation( slot-scope="scope")
                el-button(size='mini' type='success' v-if="isAuth('em:person:info')" @click="queryHandle(scope.row)") 详情
                el-button(size='mini' type='primary' v-if="isAuth('em:person:update')" @click="addOrUpdateHandle(scope.row.id)") 修改
                el-button(size='mini' type='danger' v-if="isAuth('em:person:delete')" @click="deleteHandle(scope.row.id)") 删除
          el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"  :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
      //- 弹窗, 新增 / 修改
      add-or-update(v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshdatalist="getDataList")
      query-detail(v-if="queryDetailVisible" ref="queryView" @refreshdatalist="getDataList")
      //- config-role(v-if="configRoleVisible" ref="configView" @refreshdatalist="getDataList")
</template>

<script>
import AddOrUpdate from './person-add-or-update'
import queryDetail from './query-detail'
// import configRole from './config-role'
export default {
  name: 'em-person',
  components: {
    AddOrUpdate,
    queryDetail
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value
    }
  },
  data () {
    return {
      data: [],
      dataForm: {
        types: []
      },
      dataList: [],
      nations: [],
      types: [],
      politicCountenance: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      sort: 'create_time',
      order: 'desc',
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      queryDetailVisible: false,
      configRoleVisible: false
    }
  },
  watch: {
    totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
          this.pageIndex = pages || 1
          this.getDataList()//获取表格数据的方法
      }
    }
  },
  created () {
    this.getDataList()
    this.getNation()
    this.getAllTypes()
    this.getAllPoliticCountenance()
  },
  methods: {
    //获取民族信息
    getNation () {
      this.$http({
        url: this.$http.adornUrl('/emPerson/getAllNation'),
        method: 'get'
      }).then(data => {
        // console.log("data", data);
        if (data && data.code === 0) {
          this.nations = data.result
        }
      })
    },
    //获取人员类型
    getAllTypes () {
      this.$http({
        url: this.$http.adornUrl('/emPerson/getAllTypes'),
        method: 'get'
      }).then(data => {
        // console.log("data", data);
        if (data && data.code === 0) {
          this.types = data.result
        }
      })
    },
    //获取政治面貌
    getAllPoliticCountenance () {
      this.$http({
        url: this.$http.adornUrl('/emPerson/getAllPoliticCountenance'),
        method: 'get'
      }).then(data => {
        // console.log("data", data);
        if (data && data.code === 0) {
          this.politicCountenance = data.result
        }
      })
    },
    //查看当前用户角色信息
    queryHandle (id) {
      this.queryDetailVisible = true
      this.$nextTick(() => {
        this.$refs.queryView.init(id)
      })
    },
    configHandle (row) {
      // console.log("row", row);
      this.configRoleVisible = true
      this.$nextTick(() => {
        this.$refs.configView.init(row)
      })
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      if (column.column.columnKey) {
        this.sort = column.column.columnKey
      } else {
        this.sort = column.prop
      }
      this.getDataList()
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      // console.log(this.dataForm.types);
      this.$http({
        url: this.$http.adornUrl('/emPerson/getPersonList'),
        method: 'post',
        data: {
          name: this.dataForm.name,
          card_number: this.dataForm.cardNumber,
          mobile: this.dataForm.mobile,
          politic_countenance: this.dataForm.politicCountenance,
          types: this.dataForm.types,
          nation: this.dataForm.nation,
          page: this.pageIndex,
          size: this.pageSize,
          sort: this.sort,
          order: this.order
        }
      }).then(data => {
        // console.log("data", data);
        if (data && data.code === 0) {
          this.dataList = data.result.records
          this.totalPage = data.result.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      // var userIds = id ? [id] : this.dataListSelections.map(item => {
      //       return item.userId;
      //     });
      // console.log("id", id);
      this.$confirm(`确认删除用户?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/emPerson/deletePerson'),
            method: 'post',
            data: id
          }).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        .catch(() => { })
    }
  }
}
</script>
<style lang='scss' scoped>
.inputWidth {
  width: 130px;
}
</style>