<script setup name="preExaminationDeclare">
import { ref, reactive, onMounted, h } from 'vue'
import { getPreExamineList, declareExport } from '@/http/apis/declareMange'
import { useRouter } from 'vue-router'
import useExportExc from '@/utils/useExportExc'
import PreExaminationDialog from './components/preExaminationDialog.vue'
import store from '@/store'
const { statusOptions, projectTypeOptions } = store.dictStore.globalDicts || {}
// 搜索栏表单数据
const
  router = useRouter(),
  searchForm = reactive({
    projectName: undefined,
    buildUnitName: undefined,
    projectType: 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: 'projectTypeName',
      prop: 'projectTypeName',
      width: 80
    },
    {
      label: '申报金额(万元)',
      key: 'declaredAmount',
      prop: 'declaredAmount',
      width: '150'
    },
    {
      label: '申报单位',
      key: 'buildOrg',
      prop: 'buildOrg',
      width: '120',
      showOverflowTooltip: true
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    },
    {
      label: '项目状态',
      key: 'status',
      prop: 'status',
      showOverflowTooltip: true,
      width: '180',
      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',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '160',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await getPreExamineList({
      ...pageParams,
      ...searchForm,
      createOnMin: searchForm.times?.[0] || undefined,
      createOnMax: searchForm.times?.[1] || undefined,
      times: undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    searchForm.buildUnitName = undefined
    searchForm.projectType = undefined
    searchForm.projectYear = undefined
    searchForm.times = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 导出excel文件
  { exportLoading, exportData } = useExportExc(),
  handleExcel = () => {
    exportData(() => declareExport(2, {
      ...searchForm,
      createOnMin: searchForm.times?.[0] || undefined,
      createOnMax: searchForm.times?.[1] || undefined,
      times: undefined
    }))
  },
  // 预审申报
  preExamDeclare = (data) => {
    dialogData.visible = true
    dialogData.data = data
  },
  dialogData = reactive({
    visible: undefined,
    data: undefined
  }),
  close = (flag) => {
    dialogData.visible = false
    flag && getTableData()
  },
  checkDetail = (data) => {
    router.push({ name: 'preExaminationDeclareDetail', query: { id: data.id }})
  }
onMounted(async () => {
  getTableData()
})
</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-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-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">
      <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>
      <div class="mb-8">
        <el-alert
          title="温馨提示"
          :closable="false"
          type="info"
          description="一级单位用户有权限进行[申报预审]操作，若您无权操作，请联系您上级单位管理员"
          show-icon
          class="primary-alert"
        />
      </div>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #action="{ scope }">
          <a v-if="scope.row.canPreDeclared" @click="preExamDeclare(scope.row)">申报预审</a>
          <a @click="checkDetail(scope.row)">详情</a>
        </template>
      </table-list>
    </el-card>
  </el-row>
  <pre-examination-dialog :visible="dialogData.visible" :data="dialogData.data" @close="close" />
</template>
<style lang='less' scoped>
.container{
  position: relative;
  .funcBtn{
  position: absolute;
  top: 0;
  right: 26px;
}
}
:deep(.el-form--inline .el-form-item) {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 8px;
}
</style>
