<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useDict } from '@/common/utils/dict'
import { useUserStore } from '@/store/modules/user'
import { getCompanyList } from '@/common/utils/transcoding'
import PullList from '../components/List/PullList.vue'
import { mineListquestionnaire } from '@/api/satisfaction/index'
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 userStore = useUserStore()
// const router = useRouter()
// const route = useRoute()

const pullListRef = ref<InstanceType<typeof PullList>>()
const companyOptionList = getCompanyList()



const optionexaminationType:any = ref('')

onLoad((option)=>{
  optionexaminationType.value = option.examinationType ? option.examinationType : ''
})

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  examinationType: optionexaminationType.value,
  belongCompany: userStore.userInfo.companyId,
  questionnaireTitle: ''
})

const moreOptionFormVisible = ref(false)

function handleChooseCompany(item: any) {
  queryParams.value.belongCompany = queryParams.value.belongCompany === item.companyCode ? '' : item.companyCode
}

function handleChooseExaminationType(item: any) {
  queryParams.value.examinationType = queryParams.value.examinationType === item.value ? '' : item.value
}

async function onRequest(query?: any, isRefresh?: boolean): Promise<{rows: any[], total: number}> {
  return await mineListquestionnaire(query)
}

function onSearch() {
  pullListRef.value?.refresh()
}

function toExam(item: any) {
  // router.push({
  //   path: '/satisfaction/test',
  //   query: {
  //     mainId: item.id,
  //     mineId: item.mineId
  //   }
  // })
  uni.navigateTo({
    url:'/satisfaction/test?mainId=' + item.id + '&mineId=' + item.mineId
  })
}

function catScore(item: any) {
  // router.push({
  //   path: '/satisfaction/detail',
  //   query: {
  //     mainId: item.id
  //   }
  // })
  uni.navigateTo({
    url:'/satisfaction/detail?mainId=' + item.id
  })
}

function onSearchByMore() {
  moreOptionFormVisible.value = false
  onSearch()
}
function handleSearchChange(e) {
    queryParams.value.questionnaireTitle = e.detail // 手动更新数据:ml-citation{ref="2,8" data="citationList"}
  }
</script>

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

        <van-search
          class="search-input"
          :value="queryParams.questionnaireTitle"
          @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"
          @click="moreOptionFormVisible = true"
        />
      </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"
            @cat-score="catScore"
          />
          </div>
      </template>
    </PullList>

    <uv-popup 
      v-model="moreOptionFormVisible" 
      mode="right" 
      :custom-style="{ width: '80%', height: '100%' }"
    >
      <view class="label">
        <view class="title">所属公司</view>
        <view class="option-select-container">
          <view
            class="option-item"
            :class="[queryParams.belongCompany === item.companyCode ? 'active-item' : '']"
            v-for="(item, index) in companyOptionList"
            :key="index"
            @click="handleChooseCompany(item)"
          >
            {{ item.companyName }}
          </view>
        </view>

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

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

        <view class="more-option-search-btn">
          <uv-button 
            type="primary" 
            custom-style="width: 100%;" 
            @click="onSearchByMore"
          >
            确认
          </uv-button>
        </view>
      </view>
    </uv-popup>

</template>

<style lang="scss" 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: 1rem;
  // min-height: 4.4rem;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  // overflow: hidden;
}
.label{
  .title{
    margin-top: 1.2rem;
    padding-left: 1.2rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(62, 62, 62, 1);
  }
  .option-select-container {
    padding: 1.2rem;
    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 1.2rem;
      margin-top: 0.8rem;
      border-radius: 10em;
      margin-left: 1.2rem;
    }
    .active-item {
      border: thin solid rgba(71, 115, 252, 1);
    }
  }
}
.more-option-search-btn {
  padding: 24rpx;
  position: absolute;
  bottom: 80rpx;
  width: 100%;
  left: 0;
}
: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>