<template>
  <div>
    <div>
      <!-- 搜索区域 -->
      <div class="from-Card" style="padding:20px 20px 0">
        <el-form
          ref="queryRef" size="small" :model="queryParams" :inline="true" label-width="auto"
          label-position="top"
        >
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="缴费编号" prop="">
                <el-input
                  v-model="queryParams.wfCode"
                  placeholder=""
                  clearable
                  style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
         
            <el-col :span="8">
              <el-form-item label="提交日期" prop="validityDate">
                <el-date-picker
                  v-model="validityDateRange"
                  type="datetimerange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <div class="po-r-btns">
              <el-button size="small" type="primary" icon="Search" @click="searchFN">查询</el-button>
              <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
            </div>
          </el-row>

        </el-form>
      </div>

      <!-- 表格数据 -->
      <div class="table">
        <el-table
          v-loading="showLoading" border :data="list" style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="55" label="序号" center />
          <el-table-column
            label="缴费编号"
            align="center"
            prop="wfCode"
            min-width="180"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="缴费年限"
            align="center"
            prop="payYear"
            min-width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="所属单位"
            align="center"
            prop="memName"
            min-width="100"
            :show-overflow-tooltip="true"
          />
         
          <el-table-column
            label="原有效期"
            align="center"
            prop="originValidityDate"
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.originValidityDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="提交日期"
            align="center"
            prop="commitTime"
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.commitTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="initData"
        />
      </div>
    </div>
  </div>
</template>

<script setup >
import { onMounted } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs } from 'vue'
import { queryJiaoFeitLog } from '@/api/person/info'
import { useRoute } from 'vue-router'
const route = useRoute()
const showLoading = ref(false)
const total = ref(0)
const list = ref([])
const validityDateRange = ref([])
const lists = ref([])
const flag = ref(true)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    perId: route.query.perId
  }
})
const { queryParams } = toRefs(data)
const props = defineProps({
  userId: {}
})
onMounted(() => {
  queryParams.value.perId = props.userId
  initData()
})

// 获取赛会列表
async function initData() {
  if (validityDateRange.value)queryParams.value.commitTimeRange = validityDateRange.value.toString()
  const res = await queryJiaoFeitLog(queryParams.value)
  list.value = res.rows
  total.value = res.total
}

// 多选
function handleSelectionChange(e) {
  if (e.length > 0) {
    lists.value = JSON.parse(JSON.stringify(e))
    flag.value = false
  } else {
    flag.value = true
  }
}

// 查询
function searchFN() {
  initData()
}

// 重置
function resetQuery() {
  queryParams.value = 
    {
      pageNum: 1,
      pageSize: 10,
      perId: props.userId
    }
  validityDateRange.value = []
  initData()
}

</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}


</style>