<template>
  <div class="main-page">
    <div class="main-page-header">
      <p class="title">用户管理</p>
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        size="small"
      >
        <el-form-item
          prop="hospitalCode"
          label="单位名称"
        >
          <el-select
            v-model="searchForm.hospitalCode"
            placeholder="请选择医院"
            style="width: 100%"
            filterable
            remote
            :loading="selectLoading"
            :remote-method="remoteMethod"
            :clearable="true"
          >
            <el-option
              v-for="item in hospitalList"
              :label="item.hospitalName"
              :key="item.id"
              :value="item.hospitalCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="roleId"
          label="角色类型"
        >
          <el-select
            v-model="searchForm.roleId"
            placeholder="请选择角色类型"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              label="管理员"
              :value="1"
            />
            <el-option
              label="机构用户"
              :value="2"
            />
            <el-option
              label="二级管理员"
              :value="3"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="userName"
          label="用户名"
        >
          <el-input
            placeholder="请输入用户名"
            v-model="searchForm.userName"
          />
        </el-form-item>
        <div class="btns">
          <el-button
            type="primary"
            size="small"
            @click="searchFormSub"
          >查询</el-button>
          <el-button
            size="small"
            @click="resetForm('searchForm')"
          >重置</el-button>
          <!-- <el-button
            type="primary"
            size="small"
            @click="search"
          >同步用户信息</el-button> -->
        </div>
      </el-form>
    </div>
    <div class="main-page-body">
      <div class="mainContent">
        <div class="bt">
          <el-button
            type="primary"
            size="small"
            @click="showSaveDialog()"
          >新增</el-button>
        </div>
        <table-mixin
          :pageSize="pageSize"
          :pageNum="pageNum"
          :total="total"
          :pagination="pagination"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        >
          <el-table
            v-loading="tableData.loading"
            :data="tableData.body"
            @sort-change="handleSortChange"
          >
            <div
              slot="empty"
              class="noData"
            ></div>
            <el-table-column
              label="序号"
              type="index"
              min-width="50"
            >
            </el-table-column>
            <el-table-column
              v-for="(item,index) in tableData.head"
              :prop="item.key"
              :label="item.name"
              align="left"
              :formatter="item.formatter"
              :sortable="item.sortable"
              :fixed="item.fixed"
              :key="index"
              :min-width="item.width"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              width="auto"
              min-width="250px"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="showSaveDialog('detail',scope.row.userId)"
                >查看详情</el-link>
                <el-link
                  type="primary"
                  @click="showSaveDialog('update', scope.row.userId)"
                >修改</el-link>
                <el-link
                  type="primary"
                  @click="delHandler(scope.row.userId)"
                >删除</el-link>
                <el-link
                  type="primary"
                  @click="showAuthDialog(scope.row.userId, scope.row.roleId, scope.row.area)"
                >权限配置</el-link>
              </template>
            </el-table-column>
          </el-table>
        </table-mixin>
      </div>
    </div>
    <AuthDialog
      ref="authDialog"
      @subsucc="search"
    />
    <UserDialog
      ref="userDialog"
      @subsucc="search"
    />
  </div>
</template>
<script>
import { tableDataMixin } from '../../common/js/mixin'
import { queryHospitalList } from '@/api/common'
import { queryTeamUserPageList, deleteUserInfo } from '@/api/user'
import AuthDialog from './components/authDialog.vue'
import UserDialog from './components/userDialog.vue'
export default {
  name: 'expertPage',
  mixins: [tableDataMixin],
  components: {
    AuthDialog,
    UserDialog
  },
  data() {
    return {
      searchForm: {
        roleId: '',
        userName: '',
        hospitalCode: ''
      },
      hospitalList: [],
      selectLoading: false,
      tableData: {
        loading: false,
        head: [
          {
            name: '登录账号',
            key: 'loginName',
            sortable: false,
            width: '200',
            fixed: false
          },
          {
            name: '申请账号',
            key: 'rigisterName',
            sortable: false,
            width: '200',
            fixed: false
          },
          {
            name: '用户名',
            key: 'userName',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '手机号',
            key: 'cellphone',
            sortable: false,
            width: '200',
            fixed: false
          },
          {
            name: '性别',
            key: 'sexStr',
            sortable: false,
            width: '150',
            fixed: false
          },
          {
            name: '机构名称',
            key: 'hospitalName',
            sortable: false,
            width: '300',
            fixed: false
          },
          {
            name: '管理区域',
            key: 'areaStr',
            sortable: false,
            width: '150',
            fixed: false
          }
        ],
        body: [],
        option: [],
        condition: []
      }
    }
  },
  mounted() {
    //获取可选择的医院
    queryHospitalList().then(res => {
      this.hospitalList = res.respData
    })
    this.search()
  },
  methods: {
    getTableData() {
      this.tableData.loading = true
      const params = {
        ...this.searchForm,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      }
      queryTeamUserPageList(params).then((res) => {
        if (res.msg == 201) {
          this.dealTableResponse(res)
        } else {
          this.$message.error(res.content)
        }
      })
    },
    remoteMethod(query) {
      this.selectLoading = true;
      queryHospitalList(query).then(res => {
        this.hospitalList = res.respData
        this.selectLoading = false;
      })
    },
    showAuthDialog(userId, roleId, area) {
      this.$refs.authDialog.init(userId, roleId, area)
    },
    delHandler(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUserInfo({ userId: id }).then(res => {
          if (res.msg === 201) {
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.content)
          }
          this.search()
        })
      })
    },
    showSaveDialog(type = 'add', id = '') {
      this.$refs.userDialog.init(type, id)
    }
  }
}
</script>
<style lang="scss" scoped>
.mainContent {
  padding: 20px;
  .bt {
    text-align: right;
    margin-bottom: 16px;
  }
}
</style>
