<script setup name="projectStore">
import { getCurrentInstance, h, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'
import { renewalProjectDelete, renewalProjectList } from '@/http/apis/projectStoreManage/renewalProjectTreasury'
import useExportExc from '@/utils/useExportExc'
import { declareExport } from '@/http/apis/declareMange'
const
  { proxy } = getCurrentInstance(),
  router = useRouter(),
  { reAuditStatusOptions, projectTypeOptions } = store.dictStore.globalDicts || {},
  searchForm = reactive({
    projectName: undefined,
    projectType: undefined,
    approvalStatus: undefined,
    year: undefined,
    times: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  // 列表数据
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '200',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectType',
      prop: 'projectType',
      minWidth: '80',
      render: row => h('span', projectTypeOptions[row.projectType] || '-')
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    },
    {
      label: '下一年度支付金额（万元）',
      key: 'annualPaymentAmount',
      prop: 'annualPaymentAmount',
      width: '200'
    },
    {
      label: '项目状态',
      key: 'approvalStatus',
      prop: 'approvalStatus',
      width: '180',
      render: row => [
        h('span', {
          class: [
            'dot mr-4',
            `bg-${row.approvalStatus === 'PENDING' ? 'warning' : row.approvalStatus === 'PASS' ? 'success' : 'danger'}`
          ]
        }),
        h(
          'span',
          {
            class: `text-${row.approvalStatus === 'PENDING' ? 'warning' : row.approvalStatus === 'PASS' ? 'success' : 'danger'}`
          },
          row.approvalStatus === 'PENDING' ? '待审核' : row.approvalStatus === 'PASS' ? '审核通过' : '审核不通过'
        )
      ]
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '200',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  areaCode = ref(),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await renewalProjectList({
      ...pageParams,
      ...searchForm,
      year: searchForm.year * 1 || undefined,
      startTime: searchForm.times?.[0] || undefined,
      endTime: searchForm.times?.[1] || undefined,
      regionCode: areaCode.value || undefined,
      times: undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    searchForm.projectType = undefined
    searchForm.approvalStatus = undefined
    searchForm.maxDeclareAmount = undefined
    searchForm.maxApprovalAmount = undefined
    searchForm.year = undefined
    searchForm.times = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 导出excel文件
  { exportLoading, exportData } = useExportExc(),
  handleExcel = () => {
    exportData(() => declareExport(5, {
      ...searchForm,
      year: searchForm.year * 1 || undefined,
      maxDeclareAmount: searchForm.maxDeclareAmount * 1 || undefined,
      maxApprovalAmount: searchForm.maxApprovalAmount * 1 || undefined,
      startTime: searchForm.times?.[0] || undefined,
      endTime: searchForm.times?.[1] || undefined,
      areaCode: areaCode.value || undefined,
      times: undefined
    }))
  },
  deleteItem = (data) => {
    proxy.$messageBox
      .confirm('确定要删除该项吗?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await renewalProjectDelete({ projectRenewalId: data.id })
        proxy.$message.success('删除成功！')
        getTableData()
      })
  },
  checkDetail = (row) => {
    router.push({ name: 'renewProjectDetail', query: { id: row.id }})
  },
  redeclare = (row) => {
    router.push({ name: 'renewalCapitalDeclare', query: { id: row.id }})
  }
onMounted(async () => {
  getTableData()
})
</script>
<template>
  <el-row>
    <el-col :span="24">
      <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-select
                  v-model="searchForm.projectType"
                  placeholder="全部"
                  class="w-full"
                >
                  <el-option
                    v-for="(v,k) in projectTypeOptions"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目状态">
                <el-select
                  v-model="searchForm.approvalStatus"
                  placeholder="全部"
                  class="w-full"
                >
                  <el-option
                    v-for="(v,k) in reAuditStatusOptions"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            :gutter="16"
          >
            <el-col :span="8">
              <el-form-item label="预算年度">
                <el-date-picker
                  v-model="searchForm.year"
                  type="year"
                  value-format="YYYY"
                  placeholder="请选择"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <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="4">
              <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">
        <template #header>
          <div class="flex justify-between">
            <span>申报列表</span>
            <div>
              <el-button
                type="primary"
                plain
                size="small"
                :loading="exportLoading"
                @click="handleExcel"
              >导出</el-button>
              <el-button
                type="primary"
                size="small"
                icon="Plus"
                @click="router.push({ name: 'renewalCapitalDeclare'})"
              >续建资金申报</el-button>
            </div>
          </div>
        </template>
        <table-list
          ref="tableListRef"
          :column="column"
          :data="data"
          :total="total"
          @get-table-data="getTableData"
        >
          <template #action="{ scope }">
            <a @click="checkDetail(scope.row)">详情</a>
            <a v-if="scope.row.approvalStatus==='NOT_PASS'" @click="redeclare(scope.row)">重新申报</a>
            <a v-if="scope.row.approvalStatus==='NOT_PASS'" class="text-danger" @click="deleteItem(scope.row)">删除</a>
          </template>
        </table-list>
      </el-card>
    </el-col>
  </el-row>
</template>
<style lang='less' scoped>
</style>
