<script setup name="earlyWarningRecord">
import ElTree from '@/components/elTree/index.vue'
import { onMounted, reactive, ref } from 'vue'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'
import { record } from '@/http/apis/systemManage/earlyWarningManage'
const searchForm = reactive({
    projectName: undefined,
    times: undefined,
    buildOrgName: undefined,
    areaCode: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName'
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '流程类型',
      key: 'instTypeName',
      prop: 'instTypeName'
    },
    {
      label: '到达节点时间',
      key: 'instStart',
      prop: 'instStart',
      width: 150
    },
    {
      label: '提醒时间',
      key: 'warningTime',
      prop: 'warningTime',
      width: 150
    },
    {
      label: '提醒人员',
      key: 'warningUsername',
      prop: 'warningUsername'
    }
  ]),
  column1 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName'
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '填报类型',
      key: 'instTypeName',
      prop: 'instTypeName'
    },
    {
      label: '到达环节时间',
      key: 'instStart',
      prop: 'instStart',
      width: 150
    },
    {
      label: '提醒时间',
      key: 'warningTime',
      prop: 'warningTime',
      width: 150
    },
    {
      label: '提醒人员',
      key: 'warningUsername',
      prop: 'warningUsername'
    }
  ]),
  column2 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName'
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '预警环节',
      key: 'instTypeName',
      prop: 'instTypeName'
    },
    {
      label: '到达环节时间',
      key: 'instStart',
      prop: 'instStart',
      width: 150
    },
    {
      label: '提醒时间',
      key: 'warningTime',
      prop: 'warningTime',
      width: 150
    },
    {
      label: '提醒人员',
      key: 'warningUsername',
      prop: 'warningUsername'
    }
  ]),
  column3 = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '被关联项目名称',
      key: 'projectName',
      prop: 'projectName'
    },
    {
      label: '资金申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '到达节点时间',
      key: 'instStart',
      prop: 'instStart',
      width: 150
    },
    {
      label: '提醒时间',
      key: 'warningTime',
      prop: 'warningTime',
      width: 150
    },
    {
      label: '提醒人员',
      key: 'warningUsername',
      prop: 'warningUsername'
    }
  ]),
  tableData = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await record(activeName.value, {
      ...pageParams,
      ...searchForm,
      startTime: searchForm.times?.[0] || undefined,
      endTime: searchForm.times?.[1] || undefined,
      times: undefined
    })
    tableData.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    searchForm.times = undefined
    searchForm.buildOrgName = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  getTree = (value) => {
    searchForm.areaCode = value.regionLevel === 3 ? value.regionCode : undefined
    getTableData()
  },
  activeName = ref('1'),
  changeTab = (val) => {
    activeName.value = val
    reset()
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER'])) getTableData()
})
</script>

<template>
  <el-row>
    <el-col v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])" style="padding-right: 16px" :span="4">
      <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false})" @get-tree="getTree" />
    </el-col>
    <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])?20:24">
      <el-card class="search mb-16">
        <el-form label-suffix=":" :model="searchForm" size="small">
          <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.times"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="24">
              <el-form-item class="btn">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="tab-card">
        <template #header>
          <el-tabs v-model="activeName" @tab-change="changeTab">
            <el-tab-pane label="流程预警记录" name="1" />
            <el-tab-pane label="填报预警记录" name="2" />
            <el-tab-pane label="实施监管" name="3" />
            <el-tab-pane label="续建项目资金审批" name="4" />
          </el-tabs>
        </template>
        <table-list
          ref="tableListRef"
          :column="activeName==='1'?column:activeName==='2'?column1:activeName==='4'?column3:column2"
          :data="tableData"
          :total="total"
          @get-table-data="getTableData"
        />
      </el-card>
    </el-col>
  </el-row>
</template>
