<script setup name="reviewCheckProjectList">
import { h, onMounted, reactive, ref } from 'vue'
import store from '@/store'
import { list } from '@/http/apis/projectStoreManage/reviewCheckProjectList'
import { storeToRefs } from 'pinia'
import { getIsShowReviewCheck } from '@/utils/getIsShowReviewCheck'
const userInfo = storeToRefs(store.userStore).userInfo || {},
  { statusOptions, statusGjOptions, statusOptionsCascader, projectTypeOptions } = store.dictStore.globalDicts || {},
  searchForm = reactive({
    projectName: undefined,
    buildOrg: undefined,
    projectType: undefined,
    status: undefined,
    approveAmountMin: undefined,
    approveAmountMax: undefined,
    projectYear: 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: 'buildOrg',
      prop: 'buildOrg',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: 80
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    },
    {
      label: '当前已审查人数',
      slot: 'verifiedHumans',
      prop: 'verifiedHumans',
      width: '130'
    },
    {
      label: '项目状态',
      key: 'status',
      prop: 'status',
      width: '120',
      render: row => [
        h('span', {
          class: ['dot mr-4', `bg-${statusOptions[row.status]?.color || statusGjOptions[row.status]?.color}`]
        }),
        h(
          'span',
          {
            class: `text-${statusOptions[row.status]?.color || statusGjOptions[row.status]?.color}`
          },
          row.status && statusOptions[row.stage]?.name ? `${statusOptions[row.stage]?.name}-${statusOptions[row.status]?.name}` : statusGjOptions[row.status]?.name || '-'
        )
      ]
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '150',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list({
      ...pageParams,
      ...searchForm,
      projectYear: searchForm.projectYear * 1 || undefined,
      createOnMin: searchForm.times?.[0] || undefined,
      createOnMax: searchForm.times?.[1] || undefined,
      approveAmountMin: searchForm.approveAmountMin * 1 || undefined,
      approveAmountMax: searchForm.approveAmountMax * 1 || undefined,
      times: undefined,
      status: searchForm.status?.[searchForm.status.length - 1]
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    searchForm.projectType = undefined
    searchForm.buildOrg = undefined
    searchForm.status = undefined
    searchForm.projectYear = undefined
    searchForm.approveAmountMin = undefined
    searchForm.approveAmountMax = undefined
    searchForm.times = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  }
onMounted(async () => {
  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"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申报单位">
            <el-input
              v-model="searchForm.buildOrg"
              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-row>
      <el-row
        :gutter="16"
        class="mb-16"
      >
        <el-col :span="8">
          <el-form-item label="项目状态">
            <el-cascader
              v-model="searchForm.status"
              class="w-full"
              :props="{label:'name',value:'code'}"
              :options="statusOptionsCascader"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            class="whitespace-nowrap"
            label="批复资金(万元)"
          >
            <div class="flex">
              <el-input
                v-model="searchForm.approveAmountMin"
                type="number"
                placeholder=""
                clearable
              /> &nbsp;至&nbsp;
              <el-input
                v-model="searchForm.approveAmountMax"
                type="number"
                placeholder=""
                clearable
              />
            </div>
          </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="16">
          <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="8">
          <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>
    </template>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #verifiedHumans="{scope}">
        <span v-if="!scope.row.reviewCheckNotApprove">{{ scope.row.verifiedHumans }}</span>
        <el-tooltip
          v-else
          class="box-item"
          effect="dark"
          :content="scope.row.reviewCheckNotApprove"
          placement="top-start"
        >
          <a>{{ scope.row.verifiedHumans }}</a>
        </el-tooltip>
      </template>
      <template #action="{ scope }">
        <a v-if="!scope.row.approved&&getIsShowReviewCheck(true)" @click="$router.push({name:'auditList',query:{id:scope.row.id,projectCode:scope.row.projectCode}})">审查</a>
        <a v-if="scope.row.approved" class="text-info cursor-not-allowed">已审查</a>
        <template v-if="userInfo.userRoleInfoList.map(i=>i.code).includes('REGION_MANAGER')||userInfo.userRoleInfoList.map(i=>i.code).includes('SUPER_ADMIN')">
          <a v-if="!scope.row.reviewCheckFinish&&scope.row.verifiedHumans==='7/7'" @click="$router.push({name:'reviewSummary',query:{id:scope.row.id,projectCode:scope.row.projectCode}})">合成报告</a>
          <a v-else-if="scope.row.reviewCheckFinish" @click="$router.push({name:'reviewCheckProjectListProjectDetail',query:{id:scope.row.id}})">查看报告</a>
        </template>
      </template>
    </table-list>
  </el-card>
</template>
<style lang='less' scoped>
</style>
