<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="from-Card">
      <el-form
        ref="queryRef" :inline="true" :model="queryParams" label-position="top" label-width="auto"
        size="small"
      >
        <el-row style="width: 100%;">
          <el-col :span="4">
            <el-form-item label="调动人员" prop="personName">
              <el-input v-model.trim="queryParams.personName" style="width: 100%;" @keyup.enter="searchFN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="证件号" prop="personIdcCode">
              <el-input v-model.trim="queryParams.personIdcCode" style="width: 100%;" @keyup.enter="searchFN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="申请单位" prop="targetMemName">
              <el-input v-model.trim="queryParams.targetMemName" style="width: 100%;" @keyup.enter="searchFN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="原来单位" prop="sourceMemName">
              <el-input v-model.trim="queryParams.sourceMemName" style="width: 100%;" @keyup.enter="searchFN" />
            </el-form-item>
          </el-col>


          <div class="po-r-btns">
            <el-button icon="Search" size="small" type="primary" @click="searchFN">查询</el-button>
            <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
          </div>
        </el-row>
      </el-form>

    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        v-loading="loading" :data="list" border
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" type="index" width="55" />
        <el-table-column align="center" label="调动人员" prop="personName" width="120" />
        <el-table-column align="center" label="证件号" prop="personIdcCode" width="200" />
        <el-table-column align="center" label="申请单位" min-width="160" prop="targetMemName" show-overflow-tooltip />
        <el-table-column align="center" label="原单位" min-width="160" prop="sourceMemName" show-overflow-tooltip />
        <el-table-column align="center" label="申请日期" prop="operTime" width="200">
          <template #default="{row}">
            {{ parseTime(row.operTime,'{y}-{m}-{d}') }}
          </template>
        </el-table-column>
      </el-table>

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

<script setup>
import { reactive, onMounted } from 'vue'
import { logList } from '@/api/member/mobilize.js'
import { ref, toRefs } from 'vue'


const validateTIme = ref([])
const total = ref(0)
const list = ref([])
const loading = ref(false)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    sourceMemName: '',
    targetMemName: '',
    personName: '',
    personCode: ''
  }
})

const { queryParams } = toRefs(data)

onMounted(() => {
  initData()
})


function searchFN() {
  queryParams.value.pageNum = 1
  initData()
}

// 获取赛会列表
async function initData() {
  loading.value = true

  queryParams.value.createTimeRange = validateTIme.value?.toString()
  queryParams.value.noAuditProcess = '1'
  const res = await logList(queryParams.value)
  list.value = res.rows
  total.value = res.total
  loading.value = false
}

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

</script>

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

.left {
  margin-left: 20px;
}

.input {
  width: 300px;
}

.col-4 {
  text-align: center;
  border: 1px solid #ebeef5;
  padding: 10px;
}

.first {
  background-color: #f5f7f9;
}

:deep(.el-progress-circle) {
  width: 50px;
  height: 50px;
}
</style>