<template>
  <div class="hallDirectorPage H100">
    <div class="head_box">
      <h6>支行人员管理</h6>
      <h4>支行人员管理</h4>
    </div>
    <div class="content_box">
      <div class="form_box h778px" >
        <el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
          <el-form-item label="">
            <el-input  size="mini" placeholder="请输入账号/姓名"  v-model="form.name" @keyup.enter.native="Search" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini"  type="primary" class="btn_form_search" @click="Search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="scrool">
          <el-table style="width:100%;"  :data="tableData">
            <el-table-column label="账号" show-overflow-tooltip prop="username" ></el-table-column>
            <el-table-column label="角色" show-overflow-tooltip prop="roleName" ></el-table-column>
            <el-table-column label="姓名" show-overflow-tooltip prop="name" ></el-table-column>
            <el-table-column label="员工号" show-overflow-tooltip prop="code" ></el-table-column>
            <el-table-column label="电话" show-overflow-tooltip prop="mobile" ></el-table-column>
            <el-table-column label="归属网点" show-overflow-tooltip prop="bankBranchName" ></el-table-column>
            <el-table-column label="状态" prop="status" >
              <template slot-scope="scope">
                <div class="statusBox">
                  <span class="active" :style="{'backgroundColor':(scope.row.status ? 'rgba(82,196,26,1)' :'rgba(0,0,0,0.25)')}"></span>
                  <span class="openKey">{{scope.row.status ? '启用':'禁用'}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作"  header-align="center" align="center" width="190">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button title="" type="text" size="mini" @click="resetStatus(scope.row)">{{scope.row.status ? '禁用':'启用'}}</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination small background
                       @current-change="handleCurrentChange"
                       :current-page="page.currentPage"
                       :page-size="page.pageSize"
                       layout="prev, pager, next"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        bankBranchId: '',
        logid: '',
        form:{
          name: '',
        },
        page: {
          currentPage: 1, //当前页
          pageSize: null, //每页条数
          total: null, //总条数
        },
        tableData: [],
      }
    },
    computed: {},
    mounted() {
      this.initData();
    },
    components: {},
    methods: {
      initData () {
        this.bankBranchId = localStorage.getItem('bankBranchId');
        this.logid = localStorage.getItem('userId');
        this.onSearch();
      },
      // 获得数据接口
      getTableData(param) {
        let vm = this;
        vm.$https({
          url : "employee/selectOwnEmpList",
          method: 'get',
          authType: this.backToken
        },param).then((res)=>{
          let data = res.data;
          vm.page.pageSize = data.size;
          vm.page.total = data.total;
          vm.tableData = data.records;
        }).catch(function(err){
          console.log(err);
        })
      },
      // 分页
      handleCurrentChange(val) {
        let _this = this;
        _this.page.currentPage = val;
        _this.onSearch();
      },
      onSearch() {
        let _this = this;
        let param = _this.getSearchQuery();
        _this.getTableData(param)
      },
      Search(){
        let _this = this;
        _this.page.currentPage = 1;
        let searchObj = {
          "_index": 1,
          "_size": _this.page.pageSize,
          "employName": _this.form.name,
          "currBankID": _this.bankBranchId,
        };
        this.getTableData(searchObj);
      },
      // // 获取当前查询参数
      getSearchQuery() {
        let _this = this;
        let searchObj = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize,
          "employName": _this.form.name,
          "currBankID": _this.bankBranchId,
        };
        return searchObj;
      },
      // 修改状态
      resetStatus(row) {
        let _this = this;
        if(row.id == _this.logid){
          _this.$message({type: 'error', message: '不可修改自己状态'});
        }else{
          let tipTitle = row.status == true?'确定要禁用该用户吗？':'确定要启用该用户吗？';
          this.$confirm(tipTitle, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            let url = '';
            if (row.status == false) {
              url = 'employee/enable?employeeId=' + row.id +'&currBankId='+_this.bankBranchId;
            } else {
              url = 'employee/disable?employeeId=' + row.id;
            }
            _this.$https({
              method: 'put',
              url: url,
              authType: this.backToken
            }).then((res) => {
                if(res.status == 201 || res.status == 200){
                  this.$message({type: 'success', message: res.data.message});
                  _this.onSearch();
                }else{
                  this.$message({type: 'error', message: res.data.message});
                  _this.onSearch();
                }
              }, (error) => {
                this.$message({type: 'fail', message: "设置失败!" + error.response.data});
              }
            )
          }).catch(() => {
            this.$message({type: 'info', message: '已取消'});
          });
        }

      },
    }
  }
</script>

<style lang="less">
  @import '../../style/common';
  .hallDirectorPage{
    .content_box{
      .input_box{
        width: 100%;
        min-width: 815px;
        margin-bottom: 32px;
        .el-input, .el-select{
          max-width:272px;
          height:32px;
          background:rgba(255,255,255,1);
          border-radius:4px;
          .el-input__inner{
            height:32px;
          }
        }
        .btn_form_search,.btn_form_add{
          height: 32px;
          text-align: center;
          padding: 0 15px;
        }
      }
      .scrool {
        width: 100%;
        height: calc(100% - 100px);
        overflow-x: hidden;
        overflow-y: scroll;
        .el-table {
          .el-table__header-wrapper {
            .el-table__header {
              .has-gutter tr th {
                background: rgba(250, 250, 250, 1);
              }

            }
          }
          .el-table__body-wrapper {
            width: 100%;
            table tbody tr td {
              padding: 6px 0px;
            }
          }
        }
      }
    }
  }


</style>