<script setup lang="ts" name="ExamList">
import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useDict } from '@/common/utils/dict'
import { getCompanyList } from '@/common/utils/transcoding'
import PullList from '../components/List/PullList.vue'
import { mineListExamination } from '@/api/train/exam.ts'
import moreOption from '@/static/image/train/moreOption.png'
import ExamCard from './modules/card.vue'
const { examination_type, markpape_type } = useDict('examination_type', 'markpape_type')


const router = useRouter()
const pullListRef = ref<InstanceType<typeof PullList>>()

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  examinationName: '',
  belongCompany: '',
  examinationType: '',
  markPapeType: ''
})
const companyOptionList:any = getCompanyList()
/**
 * 选择公司
 * @param item
 */
function handleChooseCompany(item:any) {
  if (queryParams.value.belongCompany === item.companyCode) {
    queryParams.value.belongCompany = ''
  } else {
    queryParams.value.belongCompany = item.companyCode
  }

}

/**
 * 选择考试类型
 * @param item
 */
function handleChooseExaminationType(item:any) {
  if (queryParams.value.examinationType === item.value) {
    queryParams.value.examinationType = ''
  } else {
    queryParams.value.examinationType = item.value
  }
}
/**
 * 选择阅卷类型
 * @param item
 */
function handleChooseMarkPapeType(item:any) {
  if (queryParams.value.markPapeType === item.value) {
    queryParams.value.markPapeType = ''
  } else {
    queryParams.value.markPapeType = item.value
  }
}
onMounted(() => {

})
// 请求方法，传入PullList组件，需返回{rows: [], total: number}
function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {

  return mineListExamination(query)
}

function onSearch() {
  pullListRef.value?.refresh()
}
/**
 * 去考试
 * @param item
 */
function toExam(item:any) {

  uni.navigateTo({
    url:'/exam/test?mainId=' + item.id + '&repairExamination=0',
  })
}

/**
 * 去补考
 * @param item
 */
function toExamAgain(item:any) {

  uni.navigateTo({
    url:'/exam/test?mainId=' + item.id + '&repairExamination=1'
  })
}

/**
 * 查看成绩
 * @param item
 */
function catScore(item:any) {

  uni.navigateTo({
    url:'/exam/score?paperId=' + item.id
  })
}



function onSearchByMore() {
  moreOptionFormRef.value.close()
  onSearch()
}
function handleSearchChange(e) {
  queryParams.value.examinationName = e.detail // 手动更新数据:ml-citation{ref="2,8" data="citationList"}
}
const moreOptionFormRef:any = ref(null)
const openMoreOption = () =>{
  moreOptionFormRef.value.open('right')
}
</script>

<template>
    <div class="query-wrap">
      <div class="option-container search-pad">

        <van-search
          class="search-input"
          :value="queryParams.examinationName"
          @change="handleSearchChange"
          shape="round"
          placeholder="请输入考试名称"
          useActionSlot
          @search="onSearch"
          @clear="onSearch">
          <template #action>
            <div class="search-btn" @click="onSearch">搜索</div>
          </template>
        </van-search>
        <image
          class="more-option"
          :src="moreOption"
          mode="aspectFit"
          @tap="openMoreOption"
        />
      </div>
    </div>
    <!-- </div> -->
    <PullList ref="pullListRef" v-model:query-string="queryParams" :isFixed="false" zHeight="87vh" :request-method="onRequest">
      <template #default="{ item, index }">
         <div style="padding: 0 30rpx;">
            <ExamCard
            :item="item"
            @to-exam="toExam"
            @to-exam-again="toExamAgain"
            @cat-score="catScore"/>
          </div>
      </template>
    </PullList>
    <!-- 右侧弹出 -->
    <uv-popup 
      ref="moreOptionFormRef" 
      mode="right" 
      :custom-style="{ width: '620rpx', height: '100%' }"
    >
      <div class="label">
        <div class="title">
          所属公司
        </div>
        <div class="option-select-container">
          <div
            class="option-item"
            :class="[queryParams.belongCompany === item.companyCode ? 'active-item' : '']"
            v-for="(item,index) in companyOptionList"
            :key="index"
            @click="handleChooseCompany(item)">{{ item.companyName }}</div>
        </div>

        <div class="title">
          考试类型
        </div>

        <div class="option-select-container">
          <div
            class="option-item"
            :class="[queryParams.examinationType === item.value ? 'active-item' : '']"
            v-for="(item,index) in examination_type"
            :key="index"
            @click="handleChooseExaminationType(item)">{{ item.label }}</div>
        </div>

        <div class="title">
          阅卷类型
        </div>
        <div class="option-select-container">
          <div
            class="option-item"
            :class="[queryParams.markPapeType === item.value ? 'active-item' : '']"
            v-for="(item,index) in markpape_type"
            :key="index"
            @click="handleChooseMarkPapeType(item)">{{ item.label }}</div>
        </div>


        <div class="more-option-search-btn">
          <uv-button customStyle="width: 560rpx;" type="primary" @click="onSearchByMore">确认</uv-button>
        </div>

      </div>
    </uv-popup>

</template>

<style lang="less" scoped>
.option-container {
    display: flex;
    align-items: center;
    .more-option {
      height: 32rpx;
      width: 32rpx;
      margin-left: 24rpx;
    }
    .search-input {
      flex: 1;

    }
  }

.search-pad {
  padding: 30rpx;
  box-sizing: border-box;
}
.van-search {
  position: relative;
  z-index: 1;
  padding: 20rpx;
  // min-height: 4.4rem;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  // overflow: hidden;
}
.label{
  .title{
    margin-top: 24rpx;
    padding-left: 24rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: rgba(62, 62, 62, 1);
  }
  .option-select-container {
    padding: 24rpx;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    .option-item {
      border: thin solid rgb(222, 219, 219);
      box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
      padding: 0.5rem 24rpx;
      margin-top: 16rpx;
      border-radius: 10em;
      margin-left: 24rpx;
    }
    .active-item {
      border: thin solid rgba(71, 115, 252, 1);
    }
  }
}
.more-option-search-btn {
  padding: 24rpx;
  position: absolute;
  bottom: 80rpx;
  width: 620rpx;
  left: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
:deep(.van-pull-refresh__head) {
  height: 0;
}
.search-pad {
  padding: 30rpx;
  box-sizing: border-box;
}
:deep(.van-search) {
  position: relative;
  z-index: 1;
  padding: 20rpx;
  // min-height: 4.4rem;
  border-radius:24rpx;
  box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
  // overflow: hidden;
}
.search-btn {
  padding: 0 16.6rpx;
}
</style>
