<template>
  <div class="full-size">
    <!--<div class="fixed-header" v-if="nowSelectChangeRows.length > 0">
      <el-button size="mini" @click.stop="batchResetPassword(nowSelectChangeRows)">批量重置密码</el-button>
      <el-button size="mini" @click.stop="toFreezeUser(nowSelectChangeRows)">批量冻结</el-button>
      <el-button size="mini" @click.stop="toUnfreezeUser(nowSelectChangeRows)">批量解冻</el-button>
      <el-button size="mini" @click.stop="toDeleteUser(nowSelectChangeRows)">批量删除</el-button>
    </div>-->
    <div class="main-header">
      <el-form inline :model="searchForm" @keyup.enter.native="search" @submit.native.prevent>
        <el-form-item>
          <el-input v-model.trim="searchForm.id" clearable placeholder="用户登录名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="searchForm.displayName" clearable placeholder="显示名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search" :disabled="loading">搜索</el-button>
          <!--<el-button type="primary" size="mini" @click="toAddGroup" :disabled="loading">添加用户组</el-button>-->
        </el-form-item>
        <el-form-item class="right">
          <el-button v-permission="'user:CreateInstances'"  @click.stop="toCreate" size="mini" icon="el-icon-plus" type="success">新建用户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-content">
      <div class="main-content-table-wrapper">
        <el-table ref="userTable" :data="tableData" row-key="id" @row-click="tableCurrentChange" @selection-change="handleSelectionChange">
          <!--<el-table-column type="selection" width="45"></el-table-column>-->
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="id" :render-header="renderHeader" label="用户登录名称" width="250"></el-table-column>
          <el-table-column prop="displayName" :render-header="renderHeader" label="显示名称" width="180"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              {{ scope.row.status | filterUserStatus }}
            </template>
          </el-table-column>
          <el-table-column prop="comments" label="备注"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        </el-table>
      </div>
      <div class="main-content-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize" :page-sizes="$pagination.defaultPageSizes"
          :total="pagination.total"
          layout="prev, pager, next, total, sizes,  jumper"
          background>
        </el-pagination>
      </div>
    </div>

    <!--创建用户-->
    <transition name="slide-fade-form-panel">
      <slide-form-panel v-if="createUserFormShow">
        <div class="form-panel-title">
          <div class="form-panel-title-desc">
            <div class="form-panel-title-desc-text">新建用户</div>
          </div>
          <div class="form-panel-title-close" @click="closeCreateUserForm"><i class="el-icon-close"></i></div>
        </div>
        <div class="form-panel-content-wrapper">
          <template v-if="!createUserComplete">
            <el-table
              key="createUserTable"
              :data="addUserList"
              class="table-height-auto"
              border
              >
            <el-table-column
              prop="userName"
              label="用户名"
              min-width="250">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.userName" autocomplete='off'>
                  <template slot="suffix">
                    <span style="margin-top: 3px;">
                      @{{ tenantId}}
                    </span>
                  </template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="displayName"
              label="显示名称"
              min-width="180">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.displayName" autocomplete='off' placeholder=""></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="agentNo"
              label="工号"
              min-width="180">
              <template slot="header">
                <span>工号</span>
                <el-button @click="addUser" style="float: right; margin-top: 3px;" type="text"><i class="el-icon-plus">添加用户</i></el-button>
              </template>
              <template slot-scope="scope">
                <el-input style="width: calc(100% - 60px)" maxlength="10" v-model.trim="scope.row.agentNo" autocomplete='off' placeholder=""></el-input>
                <el-button v-if="scope.$index > 0 && addUserList.length > 1" @click="removeUser(scope.$index)" style="margin-left: 20px;" type="text">删除</el-button>
              </template>
            </el-table-column>
            </el-table>
            <div class="custom-password-wrapper">
              <span>自定义登录密码：</span><el-input type="password" v-model="customPassword" auto-complete="new-password"></el-input>
            </div>
            <el-button type="primary" style="margin-top: 15px;" @click="batchCreateUser" :disabled="saving">确定</el-button>
          </template>
          <template v-else>
            <el-table
              key="listUserTable"
              :data="addUserList"
              class="table-height-auto"
              border
            >
              <el-table-column
                prop="id"
                label="用户名"
                min-width="250">
              </el-table-column>
              <el-table-column
                prop="displayName"
                label="显示名称"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="agentNo"
                label="工号"
                min-width="180">
              </el-table-column>
            </el-table>
            <div class="custom-password-wrapper">
              <span>自定义登录密码：</span>{{customPassword}}
            </div>
            <div class="add-group-wrapper">
              <UserGroupSelector :userId="addUserIds"></UserGroupSelector>
            </div>
          </template>
          </div>
      </slide-form-panel>
    </transition>

    <!--编辑用户-->
    <transition name="slide-fade-form-panel">
      <slide-form-panel v-if="editUserFormShow">
        <div class="form-panel-title">
          <div class="form-panel-title-desc">
            <div class="form-panel-title-desc-text">{{ userForm.id }}</div>
            <div class="form-panel-title-desc-button">
              <div v-permission="'user:ModifyInstanceStatusLeave'"  v-if="userForm.status === 'normal'" class="plain-button" @click="toLeaveUser(userForm)">
                <i class="font_family icon-delete1 plain-button-icon"></i><span class="plain-button-text">离职</span>
              </div>
              <div v-else v-permission="'user:ModifyInstanceStatusEnable'" class="plain-button" @click="toEnableUser(userForm)">
                <i class="font_family icon-check-circle plain-button-icon"></i><span class="plain-button-text">启用</span>
              </div>
            </div>
          </div>
          <div class="form-panel-title-close" @click="closeEditUserForm"><i class="el-icon-close"></i></div>
        </div>
        <div class="form-panel-content-wrapper" style="display: flex; flex-direction: column;">
          <el-form ref="userForm"  label-width="100px" :model="userForm"  :rules="userFormRules" :inline-message="true">
            <el-form-item label="用户名：" prop="name">
                <el-input v-model.trim="userForm.userName" readonly autocomplete='off'>
                  <template slot="suffix">
                    <span style="margin-top: 3px;">
                      @{{ tenantId}}
                    </span>
                  </template>
                </el-input>
            </el-form-item>
            <el-form-item label="显示名称：" prop="displayName">
              <el-input v-model="userForm.displayName"></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="comments">
              <el-input v-model="userForm.comments"></el-input>
            </el-form-item>
            <el-form-item label="工号：" prop="agentNo">
              <el-input v-model="userForm.agentNo" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="mobilePhone">
              <el-input v-model="userForm.mobilePhone"  maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="userForm.email"  maxlength="100"></el-input>
            </el-form-item>
            <!--<el-form-item label="绑定分机：" prop="extNo">
              <el-input @change="createOrUpdateUser" v-model="userForm.extNo" type="number" maxlength="10"></el-input>
            </el-form-item>-->
            <el-form-item v-permission="'user:Modify'"  label-width="100px">
              <el-button type="primary" @click="createOrUpdateUser">保存</el-button>
            </el-form-item>
          </el-form>
          <el-tabs style="margin: 10px 0px; flex: 1; border: 1px solid #E4E4E4;overflow: hidden;background: white; padding: 10px;" v-model="activeTabName">
            <!-- 自动导入任务设置 -->
            <el-tab-pane lazy label="加入的组" name="group">
              <div class="full-size">
                <UserGroupSelector @change="refreshUserPolicy" :userId="userForm.id"></UserGroupSelector>
              </div>
            </el-tab-pane>
            <el-tab-pane lazy label="权限管理" name="policy">
              <UserPolicySelector ref="user-policy-selector" :userId="userForm.id"></UserPolicySelector>
            </el-tab-pane>
            <el-tab-pane lazy label="设置登录密码" name="password">
              <UserPasswordSetting :userId="userForm.id"></UserPasswordSetting>
            </el-tab-pane>
          </el-tabs>
        </div>
      </slide-form-panel>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    const validateUserPass2 = (rule, value, callback) => {
      if (value !== this.userForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validateBatchUserPass2 = (rule, value, callback) => {
      if (value !== this.batchUserForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validateUsername = (rule, value, callback) => {
      const reg = /^[A-Za-z0-9@_-]+$/
      if (!reg.test(value)) {
        callback(new Error('只能输入数字和字母!'))
      } else {
        callback()
      }
    }
    return {
      tenantId: this.$util.getTenantId(),
      createUserFormShow: false,
      createUserComplete: false,
      editUserFormShow: false,
      isDisplayMoreSearch: true, // 是否显示更多搜索
      currentRow: null,
      nowSelectChangeRows: [],
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      lastSearchForm: '',
      searchForm: {
        id: '',
        displayName: ''
      },
      currentTabName: 'create',
      addUserList: [],
      customPassword: '',
      userForm: {
        id: '',
        userName: '',
        displayName: '',
        agentNo: '',
        mobilePhone: '',
        email: '',
        comments: '',
        status: ''
      },
      batchUserForm: {
        password: '',
        repeatPassword: '',
        startAgentNo: '',
        endAgentNo: '',
        startExtNo: ''
      },
      userFormRules: {
        displayName: [
          { required: true, message: '请输入姓名' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符' }
        ],
        userName: [
          { required: true, message: '请输入用户名' },
          { validator: validateUsername, trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        ],
        agentNo: [
          { min: 3, max: 10, message: '长度在 3 到 10 个数字' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        // phone: [
        //   { pattern: '^(0?1\\d{10})|(([0-9]{3,4})?[0-9]{4,8})$', message: '请输入正确的手机号或固定号码', trigger: 'blur' }
        // ],
        mobilePhone: [
          { pattern: '^0?1\\d{10}$', message: '请输入正确的手机', trigger: 'blur' }
        ],
        extNo: [
          { min: 3, max: 10, message: '长度在 3 到 10 个数字' }
        ],
        repeatPassword: [
          { required: true, message: '请输入重复密码' },
          { validator: validateUserPass2, trigger: 'blur' }
        ]
      },
      batchUserFormRules: {
        startAgentNo: [
          { required: true, message: '请输入起始工号' }
        ],
        endAgentNo: [
          { required: true, message: '请输入结束工号' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        ],
        repeatPassword: [
          { required: true, message: '请输入重复密码' },
          { validator: validateBatchUserPass2, trigger: 'blur' }
        ]
      },
      activeTabName: 'group',
      ruleForm: {},
      tableData: [],
      loading: false,
      saving: false,
      addData: {}
    }
  },
  computed: {
    addUserIds () {
      return this.addUserList.map(user => user.id)
    }
  },
  filters: {
    filterUserStatus: function (value) {
      return value === 'normal' ? '正常' : '离职'
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.search()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.search()
      console.log(`当前页: ${val}`)
    },
    toggleIsDisplayMoreSearch () {
      this.isDisplayMoreSearch = !this.isDisplayMoreSearch
      this.searchForm.extNo = ''
      this.searchForm.flag = []
    },
    search () {
      this.loading = true
      // 变更检索条件，设置到第一页
      const _lastSearchForm = this.$qs.stringify(this.searchForm)
      if (this.lastSearchForm !== _lastSearchForm) {
        this.pagination.currentPage = 1
      }
      this.lastSearchForm = _lastSearchForm

      this.$http.get(this.$apiUrl('listUser') + `?page=${this.pagination.currentPage - 1}&size=${this.pagination.pageSize}&${_lastSearchForm}`)
        .then(response => {
          this.tableData = response.data.data
          console.log(this.tableData)
          // 重新设置总页数
          this.pagination.total = response.data.total
        })
        .catch((error) => {
          console.dir(error)
          this.$message.error(error.message)
        }).always(() => {
          this.loading = false
        })
    },
    refreshUserPolicy () {
      const component = this.$refs['user-policy-selector']
      component && component.refresh && component.refresh()
    },
    addUser () {
      const emptyUser = {
        userName: '',
        displayName: '',
        agentNo: ''
      }
      this.addUserList.push(emptyUser)
    },
    removeUser (index) {
      this.addUserList.splice(index, 1)
    },
    toCreate () {
      this.resetForm()
      this.showCreateUserForm()
    },
    createOrUpdateUser () {
      this.$refs.userForm && this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.saving = true
          // 更新用户
          this.$http.put(this.$apiUrl('updateUser'), this.$qs.stringify(this.userForm))
            .then(response => {
              this.$message.success('修改成功')
              this.search()
            })
            .catch(error => {
              if (error.response) {
                this.$message.error(`修改失败! ${error.response.data.message}`)
              } else {
                this.$message.error(`修改失败! ${error.message}`)
              }
            })
            .always(() => {
              this.saving = false
            })
        } else {
          return false
        }
      })
    },
    // 验证待创建用户信息是否符合要求
    validateAddUserList () {
      // 以字母开头，英文字母、数字、“.”、“_”或“-”， 6-30位
      const userNameReg = /^[a-zA-Z]{1}[a-zA-Z\d_.-]{3,29}$/

      return this.addUserList.every(user => {
        console.log('@@@@@开始验证：', user, userNameReg.test(user.userName))
        if (!userNameReg.test(user.userName)) {
          this.$message.warning('用户名不能为空，且以字母开头，英文字母、数字、“.”、“_”或“-”， 4-30位')
          return false
        }

        if (user.displayName.length === 0) {
          this.$message.warning('显示名称不能为空')
          return false
        }
        return true
      })
    },
    findRepeat (arr) {
      const res = []
      arr.forEach(item => {
        if (arr.indexOf(item) !== arr.lastIndexOf(item) && res.indexOf(item) === -1) {
          res.push(item)
        }
      })
      return res
    },
    // 批量创建用户
    batchCreateUser () {
      if (!this.validateAddUserList()) {
        return
      }

      if (this.customPassword.length < 4) {
        this.$message.warning('登录密码至少4位！')
        return
      }

      // 判断是否有重复的用户名
      const repeatArr = this.findRepeat(this.addUserList.map(user => user.userName))
      if (repeatArr.length !== 0) {
        return this.$message.warning('用户名重复：' + repeatArr)
      }

      this.saving = true
      this.$http.postJson(this.$apiUrl('createBatchUser'), { password: this.customPassword, users: this.addUserList })
        .then(response => {
          this.$message.success('批量创建成功')
          this.addUserList = response.data.data
          this.createUserComplete = true
          this.search()
        })
        .catch(error => {
          if (error.response) {
            this.$message.error(`批量创建失败! ${error.response.data.message}`)
          } else {
            this.$message.error(`批量创建失败! ${error.message}`)
          }
        })
        .always(() => {
          this.saving = false
        })
    },
    // 离职操作
    toLeaveUser (selection) {
      // 判断是否是管理员，管理员不能离职
      if (selection instanceof Array) {
        if (selection.some(u => u.userName === 'admin')) {
          return this.$message.warning('管理员不能进行离职操作')
        }
      } else {
        if (selection.userName === 'admin') {
          return this.$message.warning('管理员不能进行离职操作')
        }
      }

      if (!selection.id && selection.length === 0) {
        this.$message.warning('请选择要离职的用户')
      } else {
        this.$confirm('此用户已经离职, 是否确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.leaveUser(selection)
        })
      }
    },
    toDeleteUser (selection) {
      if (!selection.id && selection.length === 0) {
        this.$message.warning('请选择要删除的用户')
      } else {
        this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteUser(selection)
        })
      }
    },
    deleteUser (selection) {
      let _id = selection.id
      if (Array.isArray(selection)) {
        _id = selection.map(row => row.id).join(',')
      }
      this.$http.delete(this.$apiUrl('systemUser002', [_id]))
        .then(response => {
          this.$message.success('删除成功!')
          this.closeEditUserForm()
          this.search()
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(`删除失败! ${error.response.data.message}`)
          } else {
            this.$message.error(`删除失败! ${error.message}`)
          }
        })
    },
    leaveUser (selection) {
      let _id = selection.id
      if (Array.isArray(selection)) {
        _id = selection.map(row => row.id).join(',')
      }
      this.$http.put(this.$apiUrl('updateLeaveOfUser'), { id: _id })
        .then(response => {
          this.$message.success('操作成功!')
          this.closeEditUserForm()
          this.search()
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(`操作失败! ${error.response.data.message}`)
          } else {
            this.$message.error(`操作失败! ${error.message}`)
          }
        })
    },
    toFreezeUser (selection) {
      if (!selection.id && selection.length === 0) {
        this.$message.warning('请选择要冻结的用户')
      } else {
        this.$confirm('确认冻结用户, 是否继续?', '冻结用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.freezeUser(selection)
        })
      }
    },
    freezeUser (selection) {
      let _id = selection.id
      if (Array.isArray(selection)) {
        _id = selection.map(row => row.id).join(',')
      }
      this.$http.put(this.$apiUrl('systemUser005', [_id]))
        .then(response => {
          this.$message.success('冻结成功!')
          this.search()
          this.userForm.flag = '2'
          this.closeEditUserForm()
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(`冻结失败! ${error.response.data.message}`)
          } else {
            this.$message.error(`冻结失败! ${error.message}`)
          }
        })
    },
    toUnfreezeUser (selection) {
      if (!selection.id && selection.length === 0) {
        this.$message.warning('请选择要冻结的用户')
      } else {
        this.$confirm('确认解冻该用户, 是否继续?', '恢复用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.unfreezeUser(selection)
        })
      }
    },
    unfreezeUser (selection) {
      let _id = selection.id
      if (Array.isArray(selection)) {
        _id = selection.map(row => row.id).join(',')
      }
      this.$http.put(this.$apiUrl('systemUser008', [_id]))
        .then(response => {
          this.$message.success('解冻成功!')
          this.search()
          this.userForm.flag = '0'
          this.closeEditUserForm()
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(`解冻失败! ${error.response.data.message}`)
          } else {
            this.$message.error(`解冻失败! ${error.message}`)
          }
        })
    },
    toEnableUser (selection) {
      if (!selection.id && selection.length === 0) {
        this.$message.warning('请选择要启用的用户')
      } else {
        this.$confirm('确认启用该用户, 是否继续?', '启用用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.enableUser(selection)
        })
      }
    },
    enableUser (selection) {
      let _id = selection.id
      if (Array.isArray(selection)) {
        _id = selection.map(row => row.id).join(',')
      }
      this.$http.put(this.$apiUrl('updateEnableOfUser'), { id: _id })
        .then(response => {
          this.$message.success('启用成功!')
          this.closeEditUserForm()
          this.search()
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(`启用失败! ${error.response.data.message}`)
          } else {
            this.$message.error(`启用失败! ${error.message}`)
          }
        })
    },
    toEditUser () {
      if (!this.currentRow) {
        this.$message.warning('请选择要编辑的用户')
      } else {
        this.closeEditUserForm()
        this.$nextTick(() => {
          Object.keys(this.userForm).forEach(k => {
            this.userForm[k] = this.currentRow[k]
          })
          this.showEditUserForm()
        })
      }
      this.clearValidate()
    },
    resetPassword (row) {
      row = row || this.userForm
      this.$confirm(`请确认是否重置${row.username}的密码为123456?`, '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$http.put(this.$apiUrl('systemUser006', [row.id]))
          .then(response => {
            this.$message.success('重置密码成功')
            this.closeEditUserForm()
            this.search()
          })
          .catch(error => {
            if (error.response) {
              this.$message.error(`重置密码失败! ${error.response.data.message}`)
            } else {
              this.$message.error(`重置密码失败! ${error.message}`)
            }
          })
      })
    },
    batchResetPassword (selection) {
      this.$confirm('请确认是否重置密码为123456?', '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let _id = selection.id
        if (Array.isArray(selection)) {
          _id = selection.map(row => row.id).join(',')
        }
        this.$http.put(this.$apiUrl('systemUser006', [_id]))
          .then(response => {
            this.$message.success('重置密码成功')
            this.search()
          })
          .catch(error => {
            if (error.response) {
              this.$message.error(`重置密码失败! ${error.response.data.message}`)
            } else {
              this.$message.error(`重置密码失败! ${error.message}`)
            }
          })
      })
    },
    showCreateUserForm () {
      this.createUserFormShow = true
      this.editUserFormShow = false
    },
    closeCreateUserForm () {
      this.createUserFormShow = false
    },
    showEditUserForm () {
      this.editUserFormShow = true
      this.createUserFormShow = false
    },
    closeEditUserForm () {
      this.editUserFormShow = false
    },
    // 清空form表单
    resetForm () {
      this.$resetToEmpty(this.userForm)
      this.saving = false
      this.addUserList = []
      this.addUserList.push({
        userName: '',
        displayName: '',
        agentNo: ''
      })
      this.customPassword = ''
    },
    clearValidate () {
      // 移除整个表单的校验结果
      this.$nextTick(() => {
        this.$refs.userForm && this.$refs.userForm.clearValidate()
      })
      this.$nextTick(() => {
        this.$refs.batchUserForm && this.$refs.batchUserForm.clearValidate()
      })
    },
    handleSelectionChange (val) {
      this.nowSelectChangeRows = val
    },
    tableCurrentChange (currentRow, oldCurrentRow) {
      this.currentRow = currentRow
      if (this.currentRow) this.toEditUser()
    },
    renderHeader (h, { column }) {
      return h('span', { domProps: { innerHTML: column.label } })
    },
    parseUserFlag (flag) {
      if (flag === '1') {
        return '受限'
      } else if (flag === '2') {
        return '冻结'
      } else if (flag === '4') {
        return '删除'
      } else {
        return '可用'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '../../style/mixin';
  .fixed-header {
    height: 50px;
    line-height: 50px;
    width: 100%;
    top: -10px;
    right: 0;
    z-index: 99;
    position: absolute;
    box-shadow: 2px 1px 5px rgba(0,0,0,0.15);
  }
  .row-button {
    margin-left: 15px;
  }
  .more {
    cursor: pointer;
  }
  .el-link {
    vertical-align: top !important;
  }
  .custom-password-wrapper {
    background: white;
    margin-top: 10px;
    height: 44px;
    align-items: center;
    display: flex;
    padding: 0px 10px;
    border: 1px solid #E4E4E4;
    justify-content: flex-start;
    span:first-child {
      color: #999999;
      margin-right: 20px;
    }
    .el-input {
      width: auto;
    }
  }
  .add-group-wrapper {
    background: white;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #E4E4E4;
  }
  .table-height-auto.el-table {
    height: auto !important;
  }
</style>
