<!-- eslint-disable unicorn/no-await-expression-member -->
<!-- eslint-disable unicorn/prefer-ternary -->
<!-- eslint-disable unicorn/prefer-single-call -->
<script setup lang="ts" name="stage-mgr">
import type { MjListProps } from '#/components/mj/mj-list'
import type { MjFormProps } from '#/components/mj/mj-table'

import { IconifyIcon } from '@vben/icons'
import { useUserStore } from '@vben/stores'

import {
  questionService,
  status_approving,
  status_draft,
  status_options,
  status_rejected,
  status_reviewed,
  status_reviewing,
} from '#/api/service/question-bank/question'
import { mj_form_select } from '#/components/mj/mj-table'
import { router } from '#/router'
import { useBasicData } from '#/store/basic-data'

const { userInfo } = storeToRefs(useUserStore())
const books = userInfo.value.personConfig?.books
const bookOptions = books?.map((item: any) => ({
  label: item.title,
  value: item.id,
}))

const { getUserChannelTypes } = useBasicData()

const channelTypeOptions = ref([] as any[])

const route = useRoute()
const { resourceId, fileId } = route.query

// 搜索表单
const searchItems = [
  // {
  //   title: '题型',
  //   field: 'type',
  //   span: 6,
  //   itemRender: {
  //     name: mj_form_select,
  //     options: type_options,
  //     props: { clearable: true },
  //   },
  // },
  {
    title: '状态',
    field: 'status',
    span: 6,
    itemRender: {
      name: mj_form_select,
      options: status_options,
      props: { clearable: true },
      events: {
        change: () => {
          listRef.value.reload()
        },
      },
    },
  },
] as any
if (bookOptions?.length) {
  searchItems.push({
    title: '教材',
    field: 'textbookIds',
    span: 6,
    itemRender: {
      name: mj_form_select,
      options: bookOptions,
      props: { clearable: true },
      events: {
        change: async ({ data }: any) => {
          if (data.textbookIds) {
            channelTypeOptions.value = (
              await getUserChannelTypes(data.textbookIds)
            ).map((item: any) => ({
              label: item.name,
              value: item.baseId,
            }))
          } else {
            channelTypeOptions.value = []
          }

          listRef.value.updateSearchFormData({
            channelTypeBaseId: undefined,
          })
          listRef.value.reload()
        },
      },
    },
  })
  searchItems.push({
    title: '题型',
    field: 'channelTypeBaseId',
    span: 6,
    itemRender: {
      name: mj_form_select,
      options: channelTypeOptions,
      props: { clearable: true },
      events: {
        change: () => {
          listRef.value.reload()
        },
      },
    },
  })
}
const searchForm = {
  items: searchItems,
  data: {},
} as MjFormProps

// 表格
const listRef = ref()
const listProps = {
  autoLoad: false,
  beforeLoadData(params) {
    if (resourceId) {
      params.resourceId = resourceId
    }
    if (fileId) {
      params.fileId = fileId
    }
    return params
  },
  afterLoadData(data) {
    countStats.value = data.countVo
    return data.pageResult
  },
} as MjListProps

// 审核统计
const countStats = ref({
  total: 0, // 总数
  draft: 0, // 草稿
  approving: 0, // 待审核
  reviewed: 0, // 审核通过
  reviewing: 0, // 待复核
  rejected: 0, // 拒绝
})

// 新增
function add() {
  router.push('/question-bank/question-add')
}

function reloadStatus(status: any = undefined) {
  listRef.value.updateSearchFormData({
    status,
  })
  listRef.value.reload()
}

function refresh() {
  listRef.value?.reload()
}

onActivated(() => {
  listRef.value.reload()
})
</script>

<template>
  <div class="question-mgr">
    <!-- 审核统计 -->
    <div class="stats-cards">
      <el-card class="stats-card add-card" @click="add">
        <IconifyIcon icon="si:add-square-line" />
        新增
      </el-card>
      <el-card class="stats-card" @click="reloadStatus()">
        <div class="stats-content">
          <div class="stats-number">{{ countStats.total || 0 }}</div>
          <div class="stats-label">总题目数</div>
        </div>
        <IconifyIcon icon="mdi:book-open-page-variant" class="stats-icon" />
      </el-card>
      <el-card class="stats-card draft" @click="reloadStatus(status_draft)">
        <div class="stats-content">
          <div class="stats-number">{{ countStats.draft || 0 }}</div>
          <div class="stats-label">草稿</div>
        </div>
        <IconifyIcon icon="ri:draft-fill" class="stats-icon" />
      </el-card>
      <el-card
        class="stats-card pending"
        @click="reloadStatus(status_approving)"
      >
        <div class="stats-content">
          <div class="stats-number">{{ countStats.approving || 0 }}</div>
          <div class="stats-label">待审核</div>
        </div>
        <IconifyIcon icon="mdi:clock-outline" class="stats-icon" />
      </el-card>
      <el-card
        class="stats-card reviewing"
        @click="reloadStatus(status_reviewing)"
      >
        <div class="stats-content">
          <div class="stats-number">{{ countStats.reviewing || 0 }}</div>
          <div class="stats-label">待复审</div>
        </div>
        <IconifyIcon
          icon="material-symbols:rate-review-outline"
          class="stats-icon"
        />
      </el-card>
      <el-card
        class="stats-card rejected"
        @click="reloadStatus(status_rejected)"
      >
        <div class="stats-content">
          <div class="stats-number">{{ countStats.rejected || 0 }}</div>
          <div class="stats-label">被拒绝</div>
        </div>
        <IconifyIcon icon="mdi:close-circle" class="stats-icon" />
      </el-card>
      <el-card
        class="stats-card approved"
        @click="reloadStatus(status_reviewed)"
      >
        <div class="stats-content">
          <div class="stats-number">{{ countStats.reviewed || 0 }}</div>
          <div class="stats-label">已通过</div>
        </div>
        <IconifyIcon icon="mdi:check-circle" class="stats-icon" />
      </el-card>
    </div>
    <div class="table-box">
      <mj-list
        ref="listRef"
        v-bind="listProps"
        :search-form="searchForm"
        :service="questionService"
      >
        <template #item="{ row, index }">
          <question-item
            :index="index + 1"
            :question="row"
            @refresh="refresh"
          />
        </template>
      </mj-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.question-mgr {
  display: flex;
  gap: 16px;
  height: 100% !important;
  padding: 16px;

  .table-box {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }

  .stats-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;

    .stats-card {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      width: 200px;
      overflow: hidden;
      cursor: pointer;

      :deep(.el-card__body) {
        display: flex;
        align-items: center;
        padding: 0 20px;
      }

      &.add-card {
        display: flex;
        flex: 0 1 auto;
        align-items: center;
        justify-content: center;
        height: 100px;
        color: #fff;
        background-color: #409eff;

        :deep(.el-card__body) {
          display: flex;
          gap: 16px;
          align-items: center;
          justify-content: center;
          font-size: 28px;
        }
      }

      .stats-content {
        .stats-number {
          margin-bottom: 4px;
          font-size: 28px;
          font-weight: 600;
          color: #303133;
        }

        .stats-label {
          font-size: 24px;
          color: #606266;
        }
      }

      .stats-icon {
        position: absolute;
        top: 50%;
        right: 16px;
        font-size: 32px;
        // opacity: 0.3;
        transform: translateY(-50%);
      }

      &.draft {
        .stats-number {
          color: #409eff;
        }

        .stats-icon {
          color: #409eff;
        }
      }

      &.pending {
        .stats-number {
          color: #e6a23c;
        }

        .stats-icon {
          color: #e6a23c;
        }
      }

      &.approved {
        .stats-number {
          color: #67c23a;
        }

        .stats-icon {
          color: #67c23a;
        }
      }

      &.reviewing {
        .stats-number {
          color: #e6a23c;
        }

        .stats-icon {
          color: #e6a23c;
        }
      }

      &.rejected {
        .stats-number {
          color: #f56c6c;
        }

        .stats-icon {
          color: #f56c6c;
        }
      }
    }
  }
}
</style>
