<!-- 操作审批 -->
<script lang="ts" setup name="ApprovalList">
import type { Ref } from 'vue'
import { reactive, ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { IList, IListQuery } from './approval-interface'
import EditDialog from './editDialog.vue'
import approvalDialog from './approvalDialog.vue'
import SystemEditResource from '@/views/system/resource/editResource.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getApprovalList } from '@/api/system/user'
import AddUser from '@/views/system/user/userAdd.vue'
import RoleAssignment from '@/views/system/user/roleAssignment.vue'
import { getDictByCode } from '@/api/system/dict'
import SystemEditRole from '@/views/system/role/editRole.vue'
import FunctionPerm from '@/views/system/role/functionPerm.vue'
import DataPerm from '@/views/system/role/dataPerm.vue'
import SystemEditDept from '@/views/system/dept/editDept.vue'
const { proxy } = getCurrentInstance() as any
const editDialogRef = ref() // 组件
const router = useRouter()
// 文件上传input
const fileRef = ref()
const loading = ref(false)
// 默认查询条件
const listQuery: Ref<IListQuery> = ref({
  auditRemark: '', // 审批备注
  jsonContext: '', // 操作内容(json格式)
  operationRemark: '', // 操作备注
  operationType: '', // 操作类型
  status: '', // 状态
  title: '', // 申请标题
  offset: 1,
  limit: 20,
})
// 表格表头
const columns: Ref<TableColumn[]> = ref([
  { text: '申请标题', value: 'title', align: 'center' },
  { text: '操作类型', value: 'operationTypeName', align: 'center' },
  // { text: '操作备注', value: 'operationRemark', align: 'center' },
  { text: '创建人', value: 'createName', align: 'center' },
  { text: '创建时间', value: 'createTime', align: 'center', width: '120' },
  { text: '审批人', value: 'auditName', align: 'center' },
  { text: '审批备注', value: 'auditRemark', align: 'center' },
])
const total = ref(0) // 数据条数
const list = ref<IList[]>([]) // 数据条数

const operationTypeMap: any = {
  user_add: '用户新增',
  user_update: '用户修改',
  user_delete: '用户删除',
  user_reset: '密码重置',
  user_freeze: '用户冻结',
  user_unfreeze: '用户解冻',
  user_roleAssign: '用户角色分配',

  role_add: '角色新增',
  role_update: '角色修改',
  role_delete: '角色删除',
  role_funcAuthor: '角色功能权限配置',
  role_dataAuthor: '角色数据权限配置',

  resource_add: '资源新增',
  resource_update: '资源修改',
  resource_delete: '资源删除',

  dept_add: '组织新增',
  dept_update: '组织修改',
  dept_delete: '组织删除',
}
const operationTypeList: any = [
  {
    name: '用户新增',
    value: 'user_add',
  },
  {
    name: '用户修改',
    value: 'user_update',
  },
  {
    name: '用户删除',
    value: 'user_delete',
  },
  {
    name: '密码重置',
    value: 'user_reset',
  },
  {
    name: '用户冻结',
    value: 'user_freeze',
  },
  {
    name: '用户解冻',
    value: 'user_unfreeze',
  },
  {
    name: '用户角色分配',
    value: 'user_roleAssign',
  },

  {
    name: '角色新增',
    value: 'role_add',
  },
  {
    name: '角色修改',
    value: 'role_update',
  },
  {
    name: '角色删除',
    value: 'role_delete',
  },
  {
    name: '角色功能权限配置',
    value: 'role_funcAuthor',
  },
  {
    name: '角色数据权限配置',
    value: 'role_dataAuthor',
  },

  {
    name: '资源新增',
    value: 'resource_add',
  },

  {
    name: '资源修改',
    value: 'resource_update',
  },
  {
    name: '资源删除',
    value: 'resource_delete',
  },
  {
    name: '组织新增',
    value: 'dept_add',
  },
  {
    name: '组织修改',
    value: 'dept_update',
  },
  {
    name: '组织删除',
    value: 'dept_delete',
  },
]
const approvalStatusList = [
  {
    name: '待审批',
    value: '0',
  },
  {
    name: '审批通过',
    value: '1',
  },
  {
    name: '审批不通过',
    value: '2',
  },
]
// 查询数据
const fetchData = () => {
  loading.value = true
  getApprovalList(listQuery.value).then((res: any) => {
    list.value = res.data.rows.map((item: { operationType: any; operationTypeMap: string | number }) => {
      return {
        ...item,
        operationTypeName: item.operationType ? operationTypeMap[item.operationType] : item.operationType, // 操作类型
      }
    })
    total.value = res.data.total
    loading.value = false
  })
  loading.value = false
}

// 搜索重置
const reset = () => {
  listQuery.value = {
    auditRemark: '', // 审批备注
    jsonContext: '', // 操作内容(json格式)
    operationRemark: '', // 操作备注
    operationType: '', // 操作类型
    status: '', // 状态
    title: '', // 申请标题
    offset: 1,
    limit: 20,
  }
  fetchData()
}

// 搜索按钮
const search = () => {
  fetchData()
}

const roleAssignmentRef = ref() // 角色分配弹窗
const addUserRef = ref() // 编辑用户弹窗
const rolefunctionPerm = ref() // 角色功能权限弹窗
const roledataPerm = ref() // 角色数据权限弹窗
const roleeditDialog = ref() // 角色编辑弹窗
const resourceEditDialog = ref() // 资源编辑弹窗
const deptEditDialog = ref() // 组织编辑弹窗
// 详情
const detail = (row: any) => {
  const data = JSON.parse(row.jsonContext)
  console.log('数据：', data)

  switch (row.operationType) {
    case 'user_add': // 用户新增
      addUserRef.value.initDialog('detail', data)
      break
    case 'user_update': // 用户修改
      addUserRef.value.initDialog('detail', data)
      break
    case 'user_roleAssign': // 用户角色分配
      // eslint-disable-next-line no-case-declarations
      const tempData = {
        ...data,
        id: data.userId,
      }
      roleAssignmentRef.value.initDialog(tempData, '', 'detail')
      break
    case 'user_delete': // 用户删除
      addUserRef.value.initDialog('detail', data)
      break
    case 'user_reset': // 密码重置
      addUserRef.value.initDialog('detail', data)
      break
    case 'user_freeze': // 冻结
      addUserRef.value.initDialog('detail', data)
      break
    case 'user_unfreeze': // 解冻
      addUserRef.value.initDialog('detail', data)
      break
    case 'role_add': // 角色新增
      roleeditDialog.value.initDialog('detail', data)
      break
    case 'role_update': // 角色修改
      roleeditDialog.value.initDialog('detail', data)
      break
    case 'role_delete': // 角色删除
      roleeditDialog.value.initDialog('detail', data)
      break
    case 'role_funcAuthor': // 角色功能权限配置
      // eslint-disable-next-line no-case-declarations
      const roleFuncTempData = {
        ...data,
        id: data.roleId,
      }
      rolefunctionPerm.value.initDialog(roleFuncTempData, '', 'detail')
      break
    case 'role_dataAuthor': // 角色数据权限配置
      // eslint-disable-next-line no-case-declarations
      const roleTempData = {
        ...data,
        id: data.roleId,
      }
      roledataPerm.value.initDialog(roleTempData, '', 'detail')
      break
    case 'resource_add': // 资源新增
      resourceEditDialog.value.initDialog('detail', data)
      break
    case 'resource_update': // 资源修改
      resourceEditDialog.value.initDialog('detail', data)
      break
    case 'resource_delete': // 资源删除
      resourceEditDialog.value.initDialog('detail', data)
      break
    case 'dept_add': // 组织新增
      deptEditDialog.value.initDialog('detail', data)
      break
    case 'dept_update': // 组织修改
      deptEditDialog.value.initDialog('detail', data)
      break
    case 'dept_delete': // 组织删除
      deptEditDialog.value.initDialog('detail', data)
      break
  }
}

const approvalDialogRef = ref()
/**
 * 同意/拒绝审批
 * @param row  列表行数据
 * @param type   1同意、2拒绝
 */
const handleApproval = (row: any, type: string) => {
  approvalDialogRef.value.initDialog(row, type)
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
function changePage(val: { size: number; page: number }) {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <app-container>
    <search-area :need-clear="true" @search="search" @clear="reset">
      <search-item>
        <el-input v-model="listQuery.title" placeholder="申请标题" clearable style="width: 200px;" @change="search" />
      </search-item>
      <search-item>
        <el-select
          v-model="listQuery.operationType"
          placeholder="操作类型"
          style="width: 180px;"
          clearable
          @change="search"
        >
          <el-option v-for="item of operationTypeList" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </search-item>
      <!-- <search-item>
        <el-input v-model="listQuery.operationRemark" placeholder="操作备注" clearable style="width: 200px;" @change="search" />
      </search-item> -->
      <search-item>
        <el-select
          v-model="listQuery.status"
          placeholder="审批状态"
          style="width: 130px;"
          clearable
          @change="search"
        >
          <el-option v-for="item of approvalStatusList" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </search-item>
    </search-area>
    <table-container>
      <normal-table :query="listQuery" :list-loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
        <template #columns>
          <el-table-column label="审批状态" align="center" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.status === '0' ? 'warning' : scope.row.status === '1' ? 'success' : 'danger'">
                {{ scope.row.status === '0' ? '待审批' : scope.row.status === '1' ? '审批通过' : '审批不通过' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center" fixed="right">
            <template #default="scope">
              <el-button type="primary" link size="small" class="table-text-button" @click="detail(scope.row)">
                详情
              </el-button>
              <el-button v-if="scope.row.status === '0' && proxy.hasPerm('/sys/approval/agree')" type="primary" link size="small" class="table-text-button" @click="handleApproval(scope.row, 'agree')">
                同意
              </el-button>
              <el-button v-if="scope.row.status === '0' && proxy.hasPerm('/sys/approval/refuse')" type="danger" link size="small" class="table-text-button" @click="handleApproval(scope.row, 'refuse')">
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
    <approval-dialog ref="approvalDialogRef" @on-success="fetchData()" />
    <!-- 角色分配 -->
    <role-assignment ref="roleAssignmentRef" />
    <!-- 添加或修改用户 -->
    <add-user ref="addUserRef" />
    <!-- 角色编辑页面 -->
    <system-edit-role ref="roleeditDialog" />
    <!-- 角色功能授权页面 -->
    <function-perm ref="rolefunctionPerm" />
    <!-- 角色授权页面 -->
    <data-perm ref="roledataPerm" />
    <!-- 资源管理编辑页面 -->
    <system-edit-resource ref="resourceEditDialog" />
    <!-- 组织编辑页面 -->
    <system-edit-dept ref="deptEditDialog" @close-refresh="search" />
  </app-container>
</template>