<script setup name="inquirySheetManage">
import { getCurrentInstance, h, onMounted, reactive, ref } from 'vue'
import { doAudit, list } from '@/http/apis/performanceEvaluation/inquirySheetManage'
import { districtList, downFileById } from '@/http/apis/commonApi'
import RecordListDialog from '@/pages/performanceEvaluation/inquirySheetManage/componets/recordListDialog.vue'
import UpLoadReplayDialog from '@/pages/performanceEvaluation/inquirySheetManage/componets/upLoadReplayDialog.vue'
import UpLoadZxDialog from '@/pages/performanceEvaluation/inquirySheetManage/componets/upLoadZxDialog.vue'
import store from '@/store'
const tableListRef = ref()
const { proxy } = getCurrentInstance()
const { projectTypeOptions } = store.dictStore.globalDicts || {},
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName'
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName'
    },
    {
      label: '所属区县',
      key: 'regionName',
      prop: 'regionName'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear'
    },
    {
      label: '状态',
      key: 'status',
      prop: 'status',
      render: row =>
        h(
          'span',
          {
            class:
                    [1, 2, 3].includes(row.status) // 1.待回复 2.待处理 3.待审核 4.通过 5.驳回
                      ? 'text-warning'
                      : row.status === 4 ? 'text-success' : 'text-danger'
          },
          row.statusName
        )
    },
    {
      label: '咨询单',
      slot: 'consultationForm',
      key: 'consultationForm'
    },
    {
      label: '回复单',
      slot: 'replyForm',
      key: 'replyForm'
    },
    {
      label: '操作',
      slot: 'action',
      fixed: 'right',
      width: '200'
    }
  ]),
  data = ref([]),
  total = ref(0),
  // 搜索栏表单数据
  searchForm = reactive({
    projectName: '',
    regionCode: undefined,
    buildOrgName: undefined,
    projectType: undefined,
    projectYear: undefined,
    consultationStatus: undefined
  }),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list({
      ...pageParams,
      ...searchForm
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  // 提交查询
  onSearch = () => {
    getTableData()
  },
  formReset = () => {
    searchForm.buildOrgName = undefined
    searchForm.regionCode = undefined
    searchForm.consultationStatus = undefined
    searchForm.projectName = undefined
    searchForm.projectType = undefined
    searchForm.projectYear = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 查看记录
  recordListDialogData = reactive({
    visible: false,
    data: undefined
  }),
  viewRecord = (row) => {
    recordListDialogData.visible = true
    recordListDialogData.data = row
  },
  // 下载
  down = async (file) => {
    const fileId = file && JSON.parse(file)?.[0]?.id
    const fileName = file && JSON.parse(file)?.[0]?.originalFileName
    const res = await downFileById({ fileId: fileId })
    const url = URL.createObjectURL(res)
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  },
  // 上传
  uploadReplayDialogData = reactive({
    visible: false,
    data: undefined
  }),
  upload = (row) => {
    uploadReplayDialogData.visible = true
    uploadReplayDialogData.data = row
  },
  closeUpR = (flag) => {
    uploadReplayDialogData.visible = false
    flag && getTableData()
  },
  // 审核
  uploadZxDialogData = reactive({
    visible: false,
    data: undefined
  }),
  audit = (row, status) => {
    if (status === 4) {
      proxy.$messageBox
        .confirm(`是否通过?`, '提示！', {
          type: 'warning'
        })
        .then(async () => {
          await doAudit({
            formId: row.id,
            status
          })
          proxy.$message.success(`通过成功！`)
        })
    } else {
      uploadZxDialogData.visible = true
      uploadZxDialogData.data = row
    }
  },
  closeUpZ = (flag) => {
    uploadZxDialogData.visible = false
    flag && getTableData()
  },
  treeData = ref()
onMounted(async () => {
  getTableData()
  const res = await districtList({ regionCode: 330500,
    regionLevel: 2 })
  treeData.value = res.data?.children || []
})
</script>

<template>
  <div>
    <el-card class="w-full search mb-8">
      <el-form
        size="small"
        :model="searchForm"
        label-suffix=":"
      >
        <el-row :gutter="16" class="mb-16">
          <el-col :span="8">
            <el-form-item label="项目名称" class="w-full">
              <el-input
                v-model="searchForm.projectName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申报单位" class="w-full">
              <el-input
                v-model="searchForm.buildOrgName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区县">
              <el-select
                v-model="searchForm.regionCode"
                placeholder="全部"
                class="w-full"
              >
                <el-option
                  v-for="(v,k) in treeData"
                  :key="k"
                  :label="v?.name"
                  :value="v?.regionCode"
                />
              </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-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"
                class="w-full"
                type="year"
                format="YYYY"
                value-format="YYYY"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="searchForm.consultationStatus" class="w-full">
                <el-option label="待回复" :value="1" />
                <el-option label="待处理" :value="2" />
                <el-option label="待审核" :value="3" />
                <el-option label="通过" :value="4" />
                <el-option label="驳回" :value="5" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item class="btn">
              <div class="flex">
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="formReset">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <template #header>列表</template>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #consultationForm="{ scope }">
          <a @click="down(scope.row.consultationForm)">下载</a>
        </template>
        <template #replyForm="{ scope }">
          <a v-if="scope.row.canUploadReply" @click="upload(scope.row)">上传</a>
          <a v-else-if="scope.row.replyForm" @click="down(scope.row.replyForm)">下载</a>
        </template>
        <template #action="{ scope }">
          <template v-if="scope.row.canAudit">
            <a @click="audit(scope.row,4)">通过</a>
            <a @click="audit(scope.row,5)">驳回</a>
          </template>
          <a @click="viewRecord(scope.row)">查看记录</a>
        </template>
      </table-list>
    </el-card>
  </div>
  <record-list-dialog :visible="recordListDialogData.visible" :data="recordListDialogData.data" @close="recordListDialogData.visible=false" />
  <up-load-replay-dialog :visible="uploadReplayDialogData.visible" :data="uploadReplayDialogData.data" @close="closeUpR" />
  <up-load-zx-dialog :visible="uploadZxDialogData.visible" :data="uploadZxDialogData.data" @close="closeUpZ" />
</template>
