<template>
  <box-content>
    <div class="search" style="position: relative">
      <SearchForm
        size="mini"
        :that="this"
        :search-data="searchData"
        :search-form="searchForm"
        :search-handle="searchHandle"
        @search="handleSearch"
        @reset="handleReset"
        @new="handleAddUser"
      />
    </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="tip-slot" slot-scope="{ scope }">
        <i
          v-if="diffTime(scope.row.LastLoginTime) >= 90"
          class="el-icon-warning"
          style="color: #f56c6c"
          :title="$t('system:userlist:tip:overTime')"
        />
      </template>
      <template slot="genderSlot" slot-scope="{ scope }">
        {{ scope.row.Sex ? 'Male' : 'Female' }}
      </template>
      <template slot="UserTypeSlot" slot-scope="{ scope }">
        {{
          Array.isArray(scope.row.UserRoleList) &&
          scope.row.UserRoleList.length > 0
            ? scope.row.UserRoleList.map((item) => item.UserTypeShortName).join(
                ','
              )
            : ''
        }}
      </template>
      <template slot="roleSlot" slot-scope="{ scope }">
        {{ scope.row.RoleNameList.map((role) => role.RoleName).join(',') }}
      </template>
      <template slot="isZhiZhunSlot" slot-scope="{ scope }">
        {{
          scope.row.IsZhiZhun
            ? $t('system:userlist:table:InternalOrExternal:Internal')
            : $t('system:userlist:table:InternalOrExternal:External')
        }}
      </template>
      <template slot="isTestUserSlot" slot-scope="{ scope }">
        {{
          scope.row.IsTestUser
            ? $t('system:userlist:table:IsTestUser:Yes')
            : $t('system:userlist:table:IsTestUser:No')
        }}
      </template>
      <template slot="statusSlot" slot-scope="{ scope }">
        {{
          scope.row.Status
            ? $t('system:userlist:table:Status:Enable')
            : $t('system:userlist:table:Status: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'
import moment from 'moment'
// 用户列表查询表单配置信息
// 用户列表查询表单事件配置信息
const searchDataDefault = () => {
  return {
    UserName: null,
    Phone: null,
    OrganizationName: null,
    UserState: null,
    UserType: null,
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    RealName: '',
    BeginCreateTime: '',
    EndCreateTime: '',
    EndLastLoginTime: null,
    EndLastChangePassWordTime: null,
    BeginLastChangePassWordTime: null,
    CreateTimeArr: [],
    LastLoginTimeArr: [],
    LastChangePassWordTimeArr: [],
    SortField: 'CreateTime',
  }
}
export default {
  name: 'UserList',
  components: { BoxContent, SearchForm, BaseTable },
  mixins: [tableMixins],
  data() {
    return {
      searchData: searchDataDefault(),
      columns: [
        { type: 'tip', slot: 'tip-slot' },
        { type: 'index' },
        {
          prop: 'UserCode',
          label: this.$t('system:userlist:table:S/N'),
          width: 100,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'UserName',
          label: this.$t('system:userlist:table:UserName'),
          minWidth: 100,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'FullName',
          label: this.$t('system:userlist:table:RealName'),
          minWidth: 120,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        // {
        //   prop: 'Sex',
        //   label: this.$t('system:userlist:table:Gender'),
        //   hidden: true,
        //   slot: 'genderSlot',
        //   minWidth: 100,
        //   sortable: 'custom',
        //   showOverflowTooltip: true
        // },
        {
          prop: 'Phone',
          label: this.$t('system:userlist:table:Phone'),
          minWidth: 120,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'EMail',
          label: this.$t('system:userlist:table:Email'),
          minWidth: 150,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'OrganizationName',
          label: this.$t('system:userlist:table:Organization'),
          minWidth: 130,
          showOverflowTooltip: true,
        },
        {
          prop: 'UserType',
          label: this.$t('system:userlist:table:UserType'),
          minWidth: 100,
          slot: 'UserTypeSlot',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'IsZhiZhun',
          label: this.$t('system:userlist:table:InternalOrExternal'),
          hidden: true,
          slot: 'isZhiZhunSlot',
          minWidth: 140,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'IsTestUser',
          label: this.$t('system:userlist:table:IsTestUser'),
          hidden: true,
          slot: 'isTestUserSlot',
          minWidth: 120,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'Status',
          label: this.$t('system:userlist:table:Status'),
          hidden: true,
          slot: 'statusSlot',
          minWidth: 100,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'LastLoginTime',
          label: this.$t('system:userlist:table:LastLoginTime'),
          minWidth: 200,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'LastChangePassWordTime',
          label: this.$t('system:userlist:table:LastChangePassWordTime'),
          minWidth: 250,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'CreateTime',
          label: this.$t('system:userlist:table:createTime'),
          minWidth: 200,
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          type: 'operate',
          label: this.$t('common:action:action'),
          minWidth: 200,
          fixed: 'right',
          operates: [
            {
              name: this.$t('common:button:edit'),
              type: 'primary',
              emitKey: 'editCb',
            },
            // {
            //   name: this.$t('common:button:delete'),
            //   type: 'danger',
            //   emitKey: 'deleteCb',
            // },
          ],
        },
      ],
      searchForm: [
        {
          type: 'Input',
          label: this.$t('system:userlist:label:UserName'),
          prop: 'UserName',
          width: '120px',
          placeholder: '',
        },
        {
          type: 'Input',
          label: this.$t('system:userlist:label:RealName'),
          prop: 'RealName',
          width: '120px',
          placeholder: '',
        },
        {
          type: 'Input',
          label: this.$t('system:userlist:label:Phone'),
          prop: 'Phone',
          width: '120px',
          placeholder: '',
        },
        {
          type: 'Input',
          label: this.$t('system:userlist:label:EMail'),
          prop: 'EMail',
          width: '120px',
          placeholder: '',
        },
        {
          type: 'Input',
          label: this.$t('system:userlist:label:Organization'),
          prop: 'OrganizationName',
          width: '120px',
          placeholder: '',
        },
        {
          type: 'Select',
          label: this.$t('system:userlist:label:InternalOrExternal'),
          prop: 'IsZhiZhun',
          width: '100px',
          options: [
            {
              label: this.$t(
                'system:userlist:label:InternalOrExternal:Internal'
              ),
              value: true,
            },
            {
              label: this.$t(
                'system:userlist:label:InternalOrExternal:External'
              ),
              value: false,
            },
          ],
          props: { label: 'label', value: 'value' },
          change: (scope) => '',
          placeholder: '',
        },
        {
          type: 'Select',
          label: this.$t('system:userlist:label:IsTestUser'),
          prop: 'IsTestUser',
          width: '100px',
          options: [
            {
              label: this.$t('system:userlist:label:IsTestUser:Yes'),
              value: true,
            },
            {
              label: this.$t('system:userlist:label:IsTestUser:No'),
              value: false,
            },
          ],
          props: { label: 'label', value: 'value' },
          change: (scope) => '',
          placeholder: '',
        },
        {
          type: 'Select',
          label: this.$t('system:userlist:label:Status'),
          prop: 'UserState',
          width: '100px',
          options: [
            { label: this.$t('system:userlist:label:Status:Enable'), value: 1 },
            {
              label: this.$t('system:userlist:label:Status:Disable'),
              value: 0,
            },
          ],
          props: { label: 'label', value: 'value' },
          change: (scope) => '',
          placeholder: '',
        },
        {
          type: 'Select',
          label: this.$t('system:userlist:label:UserType'),
          prop: 'UserType',
          width: '100px',
          options: [], // 下拉选项
          props: { label: 'UserType', value: 'Id' }, // 下拉选项配置信息，必填
          placeholder: '',
        },
        {
          type: 'Daterange',
          label: this.$t('system:userlist:label:LastLoginTime'),
          prop: 'LastLoginTimeArr',
          width: '400px',
          placeholder: '',
        },
        {
          type: 'Daterange',
          label: this.$t('system:userlist:label:LastChangePassWordTime'),
          prop: 'LastChangePassWordTimeArr',
          width: '400px',
          placeholder: '',
        },
        {
          type: 'Daterange',
          label: this.$t('system:userlist:label:CreateTime'),
          prop: 'CreateTimeArr',
          width: '400px',
          placeholder: '',
        },
      ],
      searchHandle: [
        {
          label: this.$t('common:button:reset'),
          type: 'primary',
          emitKey: 'reset',
        },
        {
          label: this.$t('common:button:search'),
          type: 'primary',
          emitKey: 'search',
        },
        {
          label: this.$t('common:button:new'),
          type: 'primary',
          emitKey: 'new',
        },
      ],
      userTypeOptions: [],
      loading: false,
      total: 0,
      users: [],
    }
  },
  created() {
    this.getList()
    this.getInfo()
  },
  methods: {
    diffTime(time) {
      return moment(new Date()).diff(time, 'days')
    },
    // 获取用户信息
    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, userName: data.UserName, email: data.EMail },
      })
    },
    // 删除用户
    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()
    },
    handleSearch() {
      if (this.searchData.CreateTimeArr.length > 0) {
        this.searchData.BeginCreateTime = this.searchData.CreateTimeArr[0]
        this.searchData.EndCreateTime = this.searchData.CreateTimeArr[1]
      }
      if (this.searchData.LastLoginTimeArr.length > 0) {
        this.searchData.BeginLastLoginTime = this.searchData.LastLoginTimeArr[0]
        this.searchData.EndLastLoginTime = this.searchData.LastLoginTimeArr[1]
      }
      if (this.searchData.LastChangePassWordTimeArr.length > 0) {
        this.searchData.BeginLastChangePassWordTime =
          this.searchData.LastChangePassWordTimeArr[0]
        this.searchData.EndLastChangePassWordTime =
          this.searchData.LastChangePassWordTimeArr[1]
      }
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
/deep/ .box-body .search .base-search-form .el-form-item {
  margin-bottom: 15px;
}
</style>
