<template>
  <box-content>
    <div class="search">
      <SearchForm
        size="mini"
        :that="this"
        :search-data="searchData"
        :search-form="searchForm"
        :search-handle="searchHandle"
        @search="handleSearch"
        @reset="handleReset"
      />
      <el-button
        type="primary"
        size="mini"
        style="margin-left:auto;"
        @click="handleAddUser"
      >New</el-button>
    </div>
    <base-table
      v-loading="loading"
      :columns="columns"
      :list="users"
      :search-data="searchData"
      :total="total"
      @getList="getList"
      @editCb="handleEditUser"
      @deleteCb="handleDeleteUser"
      @sortByColumn="sortByColumn"
    >
      <!-- 选择自定义slot -->
      <template slot="genderSlot" slot-scope="{scope}">
        {{ scope.row.Sex?'Male':'Female' }}
      </template>
      <template slot="roleSlot" slot-scope="{scope}">
        {{ scope.row.RoleNameList.map(role => role.RoleName).join(',') }}
      </template>
      <template slot="statusSlot" slot-scope="{scope}">
        {{ scope.row.Status?'Enable':'Disable' }}
      </template>
    </base-table>
  </box-content>
</template>
<script>
import { getUserList, getUserTypeList, deleteSysUser } from '@/api/admin'
import { searchForm, searchHandle, columns } from './list'
import BoxContent from '@/components/BoxContent'
import SearchForm from '@/components/BaseForm/search-form'
import BaseTable from '@/components/BaseTable'
import tableMixins from '@/mixins/table'
const searchDataDefault = () => {
  return {
    UserName: null,
    Phone: null,
    OrganizationName: null,
    UserState: null,
    UserType: null,
    PageIndex: 1,
    PageSize: 20,
    Asc: true,
    SortField: ''
  }
}
export default {
  name: 'UserList',
  components: { BoxContent, SearchForm, BaseTable },
  mixins: [tableMixins],
  data() {
    return {
      searchData: searchDataDefault(),
      searchForm,
      searchHandle,
      columns,
      userTypeOptions: [],
      loading: false,
      total: 0,
      users: []
    }
  },
  created() {
    this.getList()
    this.getInfo()
  },
  methods: {
    // 获取用户信息
    getList() {
      this.loading = true
      getUserList(this.searchData).then(res => {
        this.loading = false
        this.users = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => {
        this.loading = false
      })
    },
    findItemIndex(key) {
      return this.searchForm.findIndex(value => value.prop && value.prop === key
      )
    },
    // 获取用户类型下拉选项信息
    async getInfo() {
      const res = await getUserTypeList()
      const index = this.findItemIndex('UserType')
      this.$set(this.searchForm[index], 'options', res.Result)
    },
    // 新增用户
    handleAddUser() {
      this.$router.push({ path: '/system/user/add' })
    },
    // 编辑用户
    handleEditUser(data) {
      this.$router.push({ path: '/system/user/edit', query: { Id: data.Id }})
    },
    // 删除用户
    handleDeleteUser(data) {
      this.$confirm(this.$t('trials:uploadedDicoms:message:deleteMes'), {
        type: 'warning',
        distinguishCancelAndClose: true,

      })
        .then(() => {
          deleteSysUser(data.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.users.splice(this.users.findIndex(item => item.Id === data.Id), 1)
                this.$message.success(this.$t('common:message:deletedSuccessfully'))
              }
            })
        })
    },
    // 重置列表查询
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    }
  }
}
</script>
