<script setup lang="ts" name="PlanList">
import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useDict } from '@/common/utils/dict'
import PullList from '@/components/List/PullList.vue'
import PlanCard from './modules/card.vue'
import { myPlanlist } from '@/api/train/plan.ts'
import moreOption from '@/static/image/train/moreOption.png'
const { train_type, train_category, train_way } = useDict('train_type', 'train_category', 'train_way')
import { getCompanyList } from '@/common/utils/transcoding'

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

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  trainName: '',
  belongCompany: '',
  trainType: '', // 培训类别
  trainCategory: '', // 培训类型
  trainWay: ''
})

const companyOptionList:any = getCompanyList()
function handleChooseCompany(item:any) {
  if (queryParams.value.belongCompany === item.companyCode) {
    queryParams.value.belongCompany = ''
  } else {
    queryParams.value.belongCompany = item.companyCode
  }

}
/**
 * 选择培训类别
 * @param item
 */
function handleChooseTrainType(item:any) {
  if (queryParams.value.trainType === item.value) {
    queryParams.value.trainType = ''
  } else {
    queryParams.value.trainType = item.value
  }
}
/**
 * 选择培训类型
 * @param item
 */
function handleChooseTrainCategory(item:any) {
  if (queryParams.value.trainCategory === item.value) {
    queryParams.value.trainCategory = ''
  } else {
    queryParams.value.trainCategory = item.value
  }
}

/**
 * 选择开展方式
 * @param item
 */
function handleChooseTrainWay(item:any) {
  if (queryParams.value.trainWay === item.value) {
    queryParams.value.trainWay = ''
  } else {
    queryParams.value.trainWay = item.value
  }
}

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

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

const moreOptionFormVisible = ref(false)


/**
 * 培训详情
 * @param item
 */
function planDetail(item) {
  // router.push({
  //   path: '/plan/detail',
  //   query: {
  //     planId: item.id
  //   }
  // })
  uni.navigateTo({
    url:'/plan/detail?planId=' + item.id
  })
}
/**
 * 相关课程
 * @param item
 */
function relaCourseList(item) {
  // router.push({
  //   path: '/plan/relaCourseList',
  //   query: {
  //     planId: item.id,
  //     trainStatus: item.trainStatus
  //   }
  // })
  uni.navigateTo({
    url:'/plan/relaCourseList?planId=' + item.id + '&trainStatus=' + item.trainStatus
  })
}

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

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


        <van-search
            class="search-input"
            :value="queryParams.trainName"
            @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;">
          <PlanCard :item="item" @plan-detail="planDetail" @rela-course-list="relaCourseList"/>
        </div>
      </template>
    </PullList>

    <!-- 右侧弹出 -->
    <uv-popup 
      ref="moreOptionFormRef" 
      mode="right" 
      :custom-style="{ width: '620rpx', 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.trainType === item.value ? 'active-item' : '']"
          v-for="(item, index) in train_type"
          :key="index"
          @click="handleChooseTrainType(item)"
        >
          {{ item.label }}
        </view>
      </view>

      <view class="title">培训类型</view>
      <view class="option-select-container">
        <view
          class="option-item"
          :class="[queryParams.trainCategory === item.value ? 'active-item' : '']"
          v-for="(item, index) in train_category"
          :key="index"
          @click="handleChooseTrainCategory(item)"
        >
          {{ item.label }}
        </view>
      </view>

      <view class="title">开展方式</view>
      <view class="option-select-container">
        <view
          class="option-item"
          :class="[queryParams.trainWay === item.value ? 'active-item' : '']"
          v-for="(item, index) in train_way"
          :key="index"
          @click="handleChooseTrainWay(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="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: 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>
