<script setup name="projectAdjustment">
import { ref, reactive, onMounted, h } from 'vue'
import { declareExport, projectAdjustmentList } from '@/http/apis/declareMange'
import store from '@/store'
import { useRouter } from 'vue-router'
import useExportExc from '@/utils/useExportExc'
const { statusOptionsCascader, statusOptions, projectTypeOptions } =
  store.dictStore.globalDicts || {},
  router = useRouter()
// 搜索栏表单数据
const formInline = reactive({
    projectType: undefined,
    status: undefined,
    projectYear: undefined,
    projectName: undefined,
    createOnMin: undefined,
    createOnMax: undefined,
    times: []
  }),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '200',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: '80'
    },
    {
      label: '申报金额(万元)',
      key: 'declaredAmount',
      prop: 'declaredAmount',
      width: '150'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: 80
    },
    {
      label: '项目状态',
      key: 'status',
      prop: 'status',
      width: '220',
      render: row => [
        h('span', {
          class: ['dot mr-4', `bg-${statusOptions[row.status]?.color}`]
        }),
        h(
          'span',
          {
            class: `text-${statusOptions[row.status]?.color}`
          },
          row.status && statusOptions[row.stage]?.name + '-' + statusOptions[row.status]?.name
        )
      ]
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      showOverflowTooltip: true,
      width: '200'
    },
    {
      label: '操作',
      slot: 'action',
      width: '150px',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  tableListRef = ref(),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await projectAdjustmentList({
      ...pageParams,
      ...formInline,
      createOnMin: formInline.times?.[0],
      createOnMax: formInline.times?.[1],
      projectYear: formInline.projectYear * 1 || undefined,
      status: formInline.status?.[formInline.status.length - 1],
      times: undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  // 数据总数
  total = ref(2),
  // 提交查询
  search = () => {
    getTableData()
  },
  // 重置
  formReset = () => {
    formInline.status = undefined
    formInline.projectYear = undefined
    formInline.projectName = undefined
    formInline.projectType = undefined
    formInline.createOnMin = undefined
    formInline.createOnMax = undefined
    formInline.times = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 导出excel文件
  { exportLoading, exportData } = useExportExc(),
  handleExcel = () => {
    exportData(() => declareExport(4, {
      ...formInline,
      createOnMin: formInline.times?.[0],
      createOnMax: formInline.times?.[1],
      projectYear: formInline.projectYear * 1 || undefined,
      status: formInline.status?.[formInline.status.length - 1],
      times: undefined
    }))
  },
  reDeclare = (row) => {
    if (row.status === 20005) {
      router.push({ name: 'declarationFinal', query: { id: row.id }})
    } else {
      router.push({ name: 'declarePage', query: { id: row.id }})
    }
  }
onMounted(async () => {
  getTableData()
})
</script>
<template>
  <el-card class="w-full search">
    <el-form :model="formInline" size="small" label-suffix=":">
      <el-row :gutter="16" class="mb-16">
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input
              v-model="formInline.projectName"
              maxlength="50"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类型">
            <el-select
              v-model="formInline.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-cascader
              v-model="formInline.status"
              class="w-full"
              :props="{label:'name',value:'code'}"
              :options="statusOptionsCascader.map(i=>{
                return {
                  ...i,
                  children:i?.children?.filter(j=>j.color==='danger')
                }
              })"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="预算年度">
            <el-date-picker
              v-model="formInline.projectYear"
              type="year"
              placeholder="请选择"
              format="YYYY"
              value-format="YYYY"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="formInline.times"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
            />
          </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="formReset">重置</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"
            size="small"
            plain
            :loading="exportLoading"
            @click="handleExcel"
          >
            导出
          </el-button>
        </div>
      </div>
    </template>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #action="{ scope }">
        <a v-if="scope.row.status!==10009" @click="reDeclare(scope.row)">重新申报</a>
        <a @click="router.push({name:'projectDeclareDetail',query:{id:scope.row.id}})">详情</a>
      </template>
    </table-list>
  </el-card>
</template>
<style lang="less" scoped></style>
