<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>下级月报详情</span>
          <el-button type="primary" plain icon="ArrowLeft" @click="goBack">返回列表</el-button>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="上报单位">{{ form.repOrgGuid }}</el-descriptions-item>
        <el-descriptions-item label="上报期间">{{ form.repPeri }}</el-descriptions-item>
        <el-descriptions-item label="上报状态">
          <dict-tag :options="rep_stat" :value="form.repStat" />
        </el-descriptions-item>
        <el-descriptions-item label="上报时间">{{ form.repTime }}</el-descriptions-item>
        <el-descriptions-item label="退回说明" :span="2">{{ form.returnDesc }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="mt10">
      <template #header>
        <div class="card-header">
          <span>下级月报隐患列表</span>
        </div>
      </template>
      <el-table v-loading="hiddLoading" :data="hiddList">
        <el-table-column label="隐患名称" align="center" prop="hiddName" :show-overflow-tooltip="true" />
        <el-table-column label="隐患等级" align="center" prop="hiddGrad">
          <template #default="scope">
            <dict-tag :options="hidd_grad" :value="scope.row.hiddGrad" />
          </template>
        </el-table-column>
        <el-table-column label="隐患状态" align="center" prop="hiddStat">
          <template #default="scope">
            <dict-tag :options="hidd_stat" :value="scope.row.hiddStat" />
          </template>
        </el-table-column>
        <el-table-column label="涉及部位" align="center" prop="proPart" :show-overflow-tooltip="true" />
        <el-table-column label="采集时间" align="center" prop="collTime" width="180" />
        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-tooltip content="详情" placement="top">
              <el-button link type="primary" icon="View" @click="handleHiddDetail(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card shadow="never" class="mt10">
      <template #header>
        <div class="card-header">
          <span>下级月报附件</span>
        </div>
      </template>
      <el-table v-loading="fileLoading" :data="fileList">
        <el-table-column label="附件名称" align="center" prop="medName" :show-overflow-tooltip="true" />
        <el-table-column label="附件类型" align="center" prop="medType" />
        <el-table-column label="上传时间" align="center" prop="createTime" width="180" />
        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-tooltip content="下载" placement="top">
              <el-button link type="primary" icon="Download" @click="handleDownload(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup name="SubMonthDetail">
import { getBisOrgMonRepPeri } from "@/api/slaj/hidd"
import { listObjHidd } from "@/api/slaj/hidd"
import { listAttMedBase } from "@/api/slaj/hidd"

const { proxy } = getCurrentInstance()
const { hidd_grad, hidd_stat, rep_stat } = proxy.useDict("hidd_grad", "hidd_stat", "rep_stat")

const route = useRoute()
const form = ref({})
const hiddList = ref([])
const fileList = ref([])

const hiddLoading = ref(false)
const fileLoading = ref(false)

/** 查询月报详细 */
function getInfo() {
  const guid = route.query.guid
  if (guid) {
    getBisOrgMonRepPeri(guid).then(response => {
      form.value = response.data
      getHiddList()
      getFileList()
    })
  }
}

/** 查询月报隐患列表 */
function getHiddList() {
  hiddLoading.value = true
  listObjHidd({ repGuid: form.value.guid }).then(res => {
    hiddLoading.value = false
    hiddList.value = res.rows
  })
}

/** 查询月报附件 */
function getFileList() {
  fileLoading.value = true
  listAttMedBase({ bizGuid: form.value.guid }).then(res => {
    fileLoading.value = false
    fileList.value = res.rows
  })
}

/** 隐患详情 */
function handleHiddDetail(row) {
  proxy.$router.push({ path: '/slaj/hidd/detail', query: { guid: row.guid } })
}

/** 下载附件 */
function handleDownload(row) {
  proxy.download("common/download", { fileName: row.medPath }, row.medName)
}

/** 返回列表 */
function goBack() {
  proxy.$router.push({ path: '/slaj/hidd/month' })
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mt10 {
  margin-top: 10px;
}
</style>
