<script setup name="applicationRegist">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
// import { declareExport } from '@/http/apis/declareMange'
import { useRouter } from 'vue-router'
// import useExportExc from '@/utils/useExportExc'
import { list, pushProjectApp } from '@/http/apis/declareMange/applicationRegist'
import store from '@/store'
const router = useRouter(),
  { digitalModifySystem, projectTypeOptions } = store.dictStore.globalDicts,
  { proxy } = getCurrentInstance()
// 搜索栏表单数据
const searchForm = reactive({
    projectType: undefined,
    status: undefined,
    projectYear: undefined,
    projectName: undefined,
    createOnMin: undefined,
    createOnMax: undefined,
    times: []
  }),
  column = reactive([
    {
      type: 'expand'
    },
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '200',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: '80'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: 80
    },
    {
      label: '批复时间',
      key: 'approvalDate',
      prop: 'approvalDate',
      width: '110'
    },
    {
      label: '批复金额（万元）',
      key: 'approvedAmount',
      prop: 'approvedAmount',
      width: '140'
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '200'
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  tableListRef = ref(),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list({
      ...pageParams,
      ...searchForm,
      createOnMin: searchForm.times?.[0],
      createOnMax: searchForm.times?.[1],
      projectYear: searchForm.projectYear * 1 || undefined,
      times: undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  // 数据总数
  total = ref(2),
  // 提交查询
  search = () => {
    getTableData()
  },
  // 重置
  formReset = () => {
    searchForm.projectYear = undefined
    searchForm.projectName = undefined
    searchForm.projectType = undefined
    searchForm.createOnMin = undefined
    searchForm.createOnMax = undefined
    searchForm.times = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // // 导出excel文件
  // { exportLoading, exportData } = useExportExc(),
  // handleExcel = () => {
  //   exportData(() => declareExport(6, {
  //     ...searchForm,
  //     createOnMin: searchForm.times?.[0],
  //     createOnMax: searchForm.times?.[1],
  //     projectYear: searchForm.projectYear * 1 || undefined,
  //     times: undefined
  //   }))
  // },
  // 应用注册
  visible = ref(false),
  appData = ref(),
  showDialog = (data) => {
    visible.value = true
    appData.value = data
  }
onMounted(async () => {
  getTableData()
  window.onmessage = async (event) => {
    if (event.data && event.data.msg === '编码已生成，请复制编码查询应用') {
      console.log(event.data, '编码')
      appData.value['appCode'] = event.data.data
      await pushProjectApp(appData.value)
      proxy.$message.success('注册成功')
      visible.value = false
      getTableData()
    }
  }
})
</script>
<template>
  <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"
              maxlength="50"
              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"
              placeholder="请选择"
              format="YYYY"
              value-format="YYYY"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="searchForm.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="12">
          <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 #expand="{scope}">
        <div
          v-for="(item,index) in scope.row.projectApplications"
          :key="index"
          class="flex py-8"
          style="padding-left: 140px;border-bottom: 1px solid rgb(235, 238, 245)"
        >
          <p class="flex-1 pr-4">
            应用名称：{{ item.applicationName ||item.relatedExistsApplication }}
          </p>
          <p class="flex-1 pr-4">
            数改系统：{{ item.digitalModification&&item.digitalModification.split(',').map(i=>digitalModifySystem[i]).join('，')||'-' }}
          </p>
          <p class="flex-1 pr-4">
            是否初次建设：{{ item.isFirst?'是':'否' }}
          </p>
          <p class="flex-1 pr-4">
            是否注册：{{ item.isFirst&&item.appCode?'是':item.isFirst&&!item.appCode?'否':'--' }}
          </p>
          <p class="flex-1">
            <a v-if="!item.appCode" @click="showDialog({projectCode:scope.row.projectCode,appId:item.id})">应用注册</a>
          </p>
        </div>
      </template>
      <template #action="{ scope }">
        <a @click="router.push({name:'applicationRegistDetail',query:{id:scope.row.id}})">详情</a>
      </template>
    </table-list>
  </el-card>
  <el-dialog
    :model-value="visible"
    title="应用注册"
    width="80%"
    @close="visible=false"
  >
    <iframe src="https://jdirs.zj.gov.cn/api/system/register-view?X-BG-HMAC-ACCESS-KEY=42bcb49bea174986a3bfdfba7d005566&path=Ovl4aua87eB" width="100%" height="700px"></iframe>
  </el-dialog>
</template>
<style lang="less" scoped></style>
