<template>
  <section class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名称"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" style="width: 308px">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="审批状态" style="width: 308px">
        <el-select placeholder="请选择审批状态" v-model="queryParams.audit">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.USER_AUDIT_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->
    <el-table
      v-loading="loading"
      :data="userList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="姓名"
        align="center"
        key="realName"
        prop="realName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="手机号码"
        align="center"
        key="mobile"
        prop="mobile"
      />
      <el-table-column align="center" key="audit" prop="audit" label="申请角色">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.WX_USER_TYPE" :value="scope.row.userType" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template #default="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批状态" align="center" key="audit" prop="audit">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.USER_AUDIT_TYPE" :value="scope.row.audit" />
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="审批内容"
        align="center"
        key="content"
        prop="content"
      /> -->
      <el-table-column
        label="操作"
        align="center"
        width="250"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            v-if="scope.row.userType === 2"
            @click="showDetail(scope.row.id)"
          >
            <el-icon style="margin-right: 5px"><OfficeBuilding /></el-icon>
            公司信息
          </el-button>
          <el-button
            link
            type="danger"
            @click="examine(scope.row)"
            v-if="scope.row.audit == 1 || scope.row.audit == 3"
          >
            <el-icon style="margin-right: 5px"><Stamp /></el-icon>
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </section>
  <ExamineForm ref="examineFormRef" @success="handleQuery" />
  <EnterprisesDetail ref="enterprisesDetailRef" />
</template>

<script setup>
import * as UserApi from '@/api/system/user'
import ExamineForm from "./examineform.vue";
import EnterprisesDetail from "./enterprisesDetail.vue";

const userList = ref([]);
const loading = ref(true);
const total = ref(0);
const { proxy } = getCurrentInstance();
// const { user_status, user_type } = proxy.useDict("user_status", "user_type");

import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

const examineFormRef = ref();
const enterprisesDetailRef = ref();

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  username: undefined,
  mobile: undefined,
  status: undefined,
  deptId: undefined,
  audit: [1,3],
  userType: "2, 3",
  createTime: []

})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deptId: undefined,
  },
});
// const { queryParams } = toRefs(data);
const dateRange = ref([]);
const showSearch = ref(true);

/** 查询用户列表 */

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserPage(queryParams)
    userList.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
} 

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  handleQuery();
}

/**
 * 查看企业信息
 * @param id
 */
function showDetail(id) {
  unref(enterprisesDetailRef).open(id);
}

/**
 * 审核用户
 */
function examine(row) {
  unref(examineFormRef).open(row);
}

getList();
</script>
<style scoped lang="scss"></style>
