<template>
  <div class="common-page-shadow">
    <div class="common-search-container" ref="contentPanel">
      <el-form :inline="true" :model="params" @submit.native.prevent>
        <el-form-item label="公司名称" v-if="getMethodauth('platView')">
          <el-select
            style="width: 100%"
            clearable
            v-model="params.orgCode"
            filterable
            size="small"
            placeholder="公司名称"
            @change="changeCompany"
          >
            <el-option
              v-for="(item, index) in companyNameList"
              :key="index"
              :label="item.companyName"
              :value="item.companyCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input size="small" clearable v-model="params.fullname" placeholder="姓名">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="danger" @click="handleSearch" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button size="small" icon="el-icon-refresh" @click="handleReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-row
      class="common-table-container flex searchPanel"
      :style="SearchPanel"
    >
      <el-col :span="24" class="common-table-wrapper">
        <div class="common-btn-group"></div>
        <div class="common-table-content btn-pagenation" ref="tableContent">
          <el-table
            border
            size="mini"
            v-loading="loading"
            ref="multipleSelection"
            :data="tableData"
            :style="{width: '100%'}"
            height="100%"
            :cell-style="{'text-align': 'center'}"
            :header-cell-style="{'text-align': 'center'}"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              type="index"
              width="55"
              label="序号"
            ></el-table-column>
            <el-table-column
              min-width="110"
              sortable
              prop="fullname"
              label="姓名"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              min-width="130"
              sortable
              prop="account"
              label="账号"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              min-width="130"
              sortable
              prop="email"
              label="邮箱"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              min-width="130"
              sortable
              prop="mobile"
              label="手机号码"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              min-width="130"
              sortable
              prop="address"
              label="地址"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              min-width="110"
              sortable
              prop="status"
              label="状态"
              show-overflow-tooltip
            >
              <template v-slot="{row}">
                <el-tag type="warning" v-if="row.status === 0">禁用</el-tag>
                <el-tag type="success" v-if="row.status === 1">正常</el-tag>
                <el-tag type="info" v-if="row.status === -1">未激活</el-tag>
                <el-tag type="danger" v-if="row.status === -2">离职</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="common-pagenation">
          <el-pagination
            ref="paginationPanel"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParam.pageBean.page"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="queryParam.pageBean.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryParam.pageBean.total"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  <script>
import pagination from '@/components/pagination'
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
// import api from '@/api/basicData.js'
import uc from '@/api/uc.js'

export default {
  name: 'UserManagement',
  mixins: [TableMixin],
  data() {
    return {
      tableData: [],
      sysList: [],
      data: [],
      loadingSave: false,
      defaultProps: {
        children: 'children',
        label: 'companyName',
        isLeaf: 'leaf',
      },
      orgCode: '',
      companyCode: '',
      multipleSelection: [],
      filterText: '',
      params: {},
      loading: false,
      dialogTitle: '',
      showPassword: false,
      defaultPwdData: null,
      optionsUserType: [],
      companyNameList: [],
      tableMaxHeight: 550,
      queryParam: {
        pageBean: {
          page: 1,
          pageSize: 20,
          total:0
        },
      },
      currentUser:{}
    }
  },
  created() {
    this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
    this.params.companyCode = this.currentUser.org[0].orgCode
    this.loadData()
    this.loadNode()
    
  },
  mounted() {

  },
  methods: {
    handleReset() {
      this.params.fullname = ''
      this.params.companyCode = this.currentUser.org[0].orgCode
      this.params.orgCode = ''
      this.loadData()
    },
    handleSearch(){
      this.loadData()
    },
    changeCompany(val) {
      this.params.companyCode = val
      this.params.orgCode = val
    },
    loadNode() {
      this.$http
        .post('${portal}/enterprise/v1/queryAll', {
          pageBean: {
            pageSize: -1,
            page: 1,
          },
        })
        .then((res) => {
            this.companyNameList = res.data.rows
            this.companyNameList.forEach((item) => {
              item.leaf = true
            })
        })
    },
    loadData() {
      this.loading = true
      let params = {
        companyCode: this.params.companyCode,
        fullName: this.params.fullname,
        index: this.queryParam.pageBean.page,
        size: this.queryParam.pageBean.pageSize,
      }
      this.$http
        .post('${portal}/enterprise/v1/getUserByOrgPlat', params)
        .then((res) => {
          this.tableData = res.data.rows
          this.queryParam.pageBean = {
            page: res.data.page,
            pageSize: res.data.pageSize,
            total:res.data.total
          }
          this.loading = false
        })
        .catch((res) => {
          this.loading = false
        })
    },
    handleCurrentChange(page) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, page}
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, pageSize}
      this.loadData()
    },
    getMethodauth(elAuth) {
      let allMethod = window.sessionStorage.allMethod
      let methodAuth = window.sessionStorage.methodAuth
      let allMethodArray = allMethod && allMethod.split(',')
      let methodAuthArray = methodAuth && methodAuth.split(',')
      // 无权限则隐藏按钮
      if (
        methodAuthArray &&
        methodAuthArray.includes(elAuth) &&
        allMethodArray &&
        allMethodArray.includes(elAuth)
      ) {
        return true
      } else {
        return false
      }
    },
  },
  computed: {
    SearchPanel() {
      return {
        '--searchPanel': this.searchPanel + 'px'
      }
    }
  }
}
</script>
  <style lang="scss" scoped>

.common-page-shadow {
    height: calc(100% - 60px);
}
/deep/ .el-tree-node__label {
  font-size: 12px;
}
/deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}
.view-icon {
  cursor: pointer;
}
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #fff;
  padding: 0 8px;
}
/deep/.el-table .cell.el-tooltip {
  white-space: pre-wrap;
}
</style>
  