<script setup name='waitMeToHandle'>
import { reactive, ref, onMounted } from 'vue'
import { toDoCenterList, exportExc } from '@/http/apis/toDoCenter/todoList'
import { useRoute } from 'vue-router'
import useExportExc from '@/utils/useExportExc'
import store from '@/store'
import { storeToRefs } from 'pinia'
const { notAppendNum, appendNum } = storeToRefs(store.countStore) || 0
const props = defineProps({
  column: {
    type: Array,
    default: undefined
  },
  state: String,
  exportData: {
    type: Array,
    default: undefined
  }
})

const route = useRoute(),
  emits = defineEmits(['toHandle']),
  searchForm = reactive({
    buildOrgName: undefined,
    projectYear: undefined,
    projectName: undefined,
    times: undefined
  }),
  // 提交查询
  search = () => {
    getTableData()
  },
  // 重置
  reset = () => {
    searchForm.buildOrgName = undefined
    searchForm.projectYear = undefined
    searchForm.projectName = undefined
    searchForm.times = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  tableListRef = ref(),
  total = ref(0),
  data = ref([]),

  // 获取列表数据
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await toDoCenterList(props.state, {
      ...pageParams,
      ...searchForm,
      isTemporaryAugment: activeName.value,
      createOnMin: searchForm.times?.[0],
      createOnMax: searchForm.times?.[1],
      times: undefined,
      projectYear: searchForm.projectYear * 1 || undefined
    })
    total.value = res.data.total
    data.value = res.data.records
  },
  activeName = ref('0'),
  // 切换补增项目
  handleClick = (tab, event) => {
    activeName.value = tab.props.name
    getTableData()
  },
  // 处理、详情
  toHandle = (detailData) => {
    emits('toHandle', detailData)
  },
  // 导出excel文件
  { exportLoading, exportData } = useExportExc(),
  handleExcel = () => {
    exportData(() => exportExc(props.state, { ...searchForm,
      createOnMin: searchForm.times?.[0] || undefined,
      createOnMax: searchForm.times?.[1] || undefined,
      projectYear: searchForm.projectYear * 1 || undefined,
      exportOptionList: props.exportData,
      isTemporaryAugment: activeName.value
    }))
  }
onMounted(async () => {
  getTableData()
  store.countStore.setTodoNumsStore()
})
</script>
<template>
  <el-row>
    <el-card class="w-full search">
      <el-form :model="searchForm" size="small" label-suffix=":">
        <el-row :gutter="16" class="mb-16">
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input v-model="searchForm.projectName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目单位">
              <el-input v-model="searchForm.buildOrgName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预算年度">
              <el-date-picker
                v-model="searchForm.projectYear"
                type="year"
                value-format="YYYY"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="10">
            <el-form-item label="发起时间">
              <el-date-picker
                v-model="searchForm.times"
                type="datetimerange"
                :editable="false"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item class="btn">
              <div class="flex">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="w-full mt-8 tab-card">
      <template #header>
        <div class="flex justify-between items-center">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="`非增补项目${notAppendNum&&route.name==='waitMeToHandle'?`（${notAppendNum}）`:''}`" name="0" />
            <el-tab-pane :label="`增补项目${appendNum&&route.name==='waitMeToHandle'?`（${appendNum}）`:''}`" name="1" />
          </el-tabs>
          <el-button
            type="primary"
            plain
            size="small"
            :loading="exportLoading"
            @click="handleExcel"
          >导出</el-button>
        </div>
      </template>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #action="{ scope }">
          <a @click="toHandle(scope.row)">{{ route.name==='waitMeToHandle'&&(scope.row.processStatusName==='审核中'||scope.row.processStatusName==='被退回')?'处理':'详情' }}</a>
        </template>
      </table-list>
    </el-card>
  </el-row>
</template>
<style lang='less' scoped>
.container{
  position: relative;
  .funcBtn{
    position: absolute;
    top: 0;
    right: 9px;
  }
}
</style>
