<template>
  <div>
    <el-dialog
      v-if="shouDialog"
      v-model="shouDialog" class="dialog" title="重置密码" :close-on-click-modal="true" width="80%"
      draggable
      @close="close"
    >
      <el-form
        ref="queryRef" size="small"
        label-position="top"
        :model="queryParams"
        :inline="true"
        style="width: 100%;padding-left: 20px"
      >

        <el-row style="width: 100%">
          <el-col :span="4">
            <el-form-item label="登录账号" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入登录账号"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input
                v-model="queryParams.phonenumber"
                placeholder="请输入手机号码"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间" style="width: 100%">
              <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[
                  new Date(2000, 1, 1, 0, 0, 0),
                  new Date(2000, 1, 1, 23, 59, 59),
                ]"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: auto">
            <el-form-item label="&nbsp;" style="margin-left: auto">
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div class="table">
        <el-table
          v-loading="loading"
          :data="userList"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="序号" width="55" align="center" />

          <!-- <el-table-column
            v-if="columns[0].visible"
            key="userId"
            label="用户编号"
            align="center"
            prop="userId"
            :show-overflow-tooltip="true"
          /> -->
          <el-table-column
            v-if="columns[1].visible"
            key="userName"
            label="登录账号"
            align="center"
            prop="userName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[2].visible"
            key="nickName"
            label="用户昵称"
            align="center"
            prop="nickName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[3].visible"
            key="deptName"
            label="部门"
            align="center"
            prop="dept.deptName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[4].visible"
            key="phonenumber"
            label="手机号码"
            align="center"
            prop="phonenumber"
            width="120"
          />
          <el-table-column
            label="角色"
            align="center"
            prop="roleNameStr"
            width="140"
          />
          <!--          <el-table-column-->
          <!--            v-if="columns[5].visible"-->
          <!--            key="status"-->
          <!--            label="状态"-->
          <!--            align="center"-->
          <!--            width="90"-->
          <!--          >-->
          <!--            <template #default="scope">-->
          <!--              <el-switch-->
          <!--                v-model="scope.row.status"-->
          <!--                active-value="0"-->
          <!--                inactive-value="1"-->
          <!--                @change="handleStatusChange(scope.row)"-->
          <!--              />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            v-if="columns[6].visible"
            label="创建时间"
            align="center"
            prop="createTime"
            width="160"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="120"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                v-if="scope.row.userId !== 1"
                type="primary"
                @click="handleResetPwd(scope.row)"
              >重置密码
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script setup >
import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
import {
  listUser,
  resetUserPwd
} from '@/api/system/user'
import { validPassword } from '/@/utils/validate'
import { nextTick } from '@vue/runtime-core'
import { changeStatus } from '/@/api/groupMember'
const { proxy } = getCurrentInstance()
const loading = ref(false)
const userList = ref([])
const total = ref(0)
const shouDialog = ref(false)
const dateRange = ref([])

const columns = ref([
  { key: 0, label: `用户编号`, visible: true },
  { key: 1, label: `用户名称`, visible: true },
  { key: 2, label: `用户昵称`, visible: true },
  { key: 3, label: `部门`, visible: true },
  { key: 4, label: `手机号码`, visible: true },
  { key: 5, label: `状态`, visible: true },
  { key: 6, label: `创建时间`, visible: true }
])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
})
const { queryParams } = toRefs(data)

function open(id) {
  shouDialog.value = true
  queryParams.value.deptId = id
  getList()
}

async function getList() {
  loading.value = true
  const res = await listUser(queryParams.value, dateRange.value)
  if (res.code == 200) {
    loading.value = false
    userList.value = res.rows
    total.value = res.total
  }
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  dateRange.value = []
  proxy.resetForm('queryRef')
  handleQuery()
}

function close() {
  queryParams.value = {}
}

function handleResetPwd(row, val) {
  // proxy.$prompt(`请输入"${row.userName}"的新密码 <br> 请设置8位以上大小写字母、数字、特殊符号组合的密码`, '提示', {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   closeOnClickModal: false,
  //   dangerouslyUseHTMLString: true,
  //   inputValue: val
  // }).then(({ value }) => {
  //   if (validPassword(value)) {
  //     resetUserPwd(row.userId, value).then((response) => {
  //       proxy.$modal.msgSuccess('修改成功，新密码是：' + value)
  //     })
  //   } else {
  //     handleResetPwd(row, value)
  //     nextTick(() => {
  //       proxy.$modal.msgError('请设置8位以上大小写字母、数字、特殊符号组合的密码')
  //     })
  //   }
  // })

  proxy.$modal.confirm('是否确认重置登录账号为' + row.userName + '的密码？').then(function() {
    return resetUserPwd(row.userId)
  }).then(() => {
    loading.value = true
    proxy.$modal.msgSuccess('操作成功')
  }).catch(() => {
  }).finally(() => {
    loading.value = false
  })
}

defineExpose({
  open
})

</script>
<style scoped lang="scss">

</style>