<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>月报基本信息</span>
          <div>
            <el-button type="success" plain icon="Promotion" @click="handleReport" v-hasPermi="['hidd:monrepperi:edit']">上报</el-button>
            <el-button type="warning" plain icon="RefreshLeft" @click="handleReturn" v-hasPermi="['hidd:monrepperi:edit']">退回</el-button>
            <el-button type="danger" plain icon="Refresh" @click="handleRevocation" v-hasPermi="['hidd:monrepperi:edit']">撤回</el-button>
            <el-button type="primary" plain icon="ArrowLeft" @click="goBack">返回列表</el-button>
          </div>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="上报单位">{{ form.repOrgGuid }}</el-descriptions-item>
        <el-descriptions-item label="上报期间">{{ form.repName }}</el-descriptions-item>
        <el-descriptions-item label="上报状态">
          <dict-tag :options="rep_stat" :value="form.repAct" />
        </el-descriptions-item>
        <el-descriptions-item label="上报时间">{{ form.repTime }}</el-descriptions-item>
        <el-descriptions-item label="退回说明" :span="2">{{ form.note }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="mt10">
      <template #header>
        <div class="card-header">
          <span>月报隐患列表</span>
          <el-button type="primary" plain icon="Plus" @click="handleAddHidd" v-hasPermi="['hidd:monrepperi:edit']">导入隐患</el-button>
        </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>
    </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="150">
          <template #default="scope">
            <el-tooltip content="下载" placement="top">
              <el-button link type="primary" icon="Download" @click="handleDownload(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDeleteFile(scope.row)" v-hasPermi="['hidd:monrepperi:edit']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 上报对话框 -->
    <el-dialog title="月报上报" v-model="reportOpen" width="600px" append-to-body>
      <el-form :model="reportForm" :rules="reportRules" ref="reportRef" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上报说明" prop="reportDesc">
              <el-input v-model="reportForm.reportDesc" type="textarea" placeholder="请输入上报说明" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitReport">确 定</el-button>
          <el-button @click="reportOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 退回对话框 -->
    <el-dialog title="月报退回" v-model="returnOpen" width="600px" append-to-body>
      <el-form :model="returnForm" :rules="returnRules" ref="returnRef" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="退回原因" prop="returnDesc">
              <el-input v-model="returnForm.returnDesc" type="textarea" placeholder="请输入退回原因" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitReturn">确 定</el-button>
          <el-button @click="returnOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 撤回对话框 -->
    <el-dialog title="月报撤回" v-model="revocationOpen" width="600px" append-to-body>
      <el-form :model="revocationForm" :rules="revocationRules" ref="revocationRef" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="撤回原因" prop="revocationDesc">
              <el-input v-model="revocationForm.revocationDesc" type="textarea" placeholder="请输入撤回原因" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitRevocation">确 定</el-button>
          <el-button @click="revocationOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导入隐患对话框 -->
    <el-dialog title="导入隐患" v-model="importOpen" width="800px" append-to-body>
      <el-table v-loading="importLoading" :data="importList" @selection-change="handleImportSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <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>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitImport">确 定</el-button>
          <el-button @click="importOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="MonthDetail">
import { getBisOrgMonRepPeri, updateBisOrgMonRepPeri, submitMonth, returnMonth, revokeMonth, listBisHiddRecRepWithHidd } from "@/api/slaj/hidd"
import { listObjHidd } from "@/api/slaj/hidd"
import { listAttMedBase, delAttMedBase } 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 importList = ref([])
const importSelection = ref([])
const selectedHiddGuids = ref([])

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

// 上报对话框
const reportOpen = ref(false)
const reportForm = ref({})
const reportRules = {}

// 退回对话框
const returnOpen = ref(false)
const returnForm = ref({})
const returnRules = {
  returnDesc: [{ required: true, message: "退回原因不能为空", trigger: "blur" }]
}

// 撤回对话框
const revocationOpen = ref(false)
const revocationForm = ref({})
const revocationRules = {
  revocationDesc: [{ required: true, message: "撤回原因不能为空", trigger: "blur" }]
}

// 导入对话框
const importOpen = 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
  listBisHiddRecRepWithHidd(form.value.guid).then(res => {
    hiddLoading.value = false
    hiddList.value = res.data
  })
}

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

/** 上报按钮 */
function handleReport() {
  reportForm.value = {
    guid: form.value.guid,
    reportDesc: undefined
  }
  reportOpen.value = true
}

/** 提交上报 */
function submitReport() {
  proxy.$refs["reportRef"].validate(valid => {
    if (valid) {
      const guids = selectedHiddGuids.value.length > 0 ? selectedHiddGuids.value : []
      submitMonth(form.value.guid, guids).then(response => {
        proxy.$modal.msgSuccess("上报成功")
        reportOpen.value = false
        getInfo()
      })
    }
  })
}

/** 退回按钮 */
function handleReturn() {
  returnForm.value = {
    guid: form.value.guid,
    returnDesc: undefined
  }
  returnOpen.value = true
}

/** 提交退回 */
function submitReturn() {
  proxy.$refs["returnRef"].validate(valid => {
    if (valid) {
      returnMonth(form.value.guid, returnForm.value.returnDesc).then(response => {
        proxy.$modal.msgSuccess("退回成功")
        returnOpen.value = false
        getInfo()
      })
    }
  })
}

/** 撤回按钮 */
function handleRevocation() {
  revocationForm.value = {
    guid: form.value.guid,
    revocationDesc: undefined
  }
  revocationOpen.value = true
}

/** 提交撤回 */
function submitRevocation() {
  proxy.$refs["revocationRef"].validate(valid => {
    if (valid) {
      revokeMonth(form.value.guid).then(response => {
        proxy.$modal.msgSuccess("撤回成功")
        revocationOpen.value = false
        getInfo()
      })
    }
  })
}

/** 导入隐患按钮 */
function handleAddHidd() {
  importSelection.value = []
  importLoading.value = true
  listObjHidd({ hiddStat: '0' }).then(res => {
    importLoading.value = false
    importList.value = res.rows
    importOpen.value = true
  })
}

/** 导入选择改变 */
function handleImportSelectionChange(selection) {
  importSelection.value = selection
}

/** 提交导入 */
function submitImport() {
  if (importSelection.value.length === 0) {
    proxy.$modal.msgError("请选择要导入的隐患")
    return
  }
  const existingHiddGuids = new Set(hiddList.value.map(h => h.hiddGuid))
  for (const item of importSelection.value) {
    if (!existingHiddGuids.has(item.guid)) {
      hiddList.value.push({
        hiddGuid: item.guid,
        hiddName: item.hiddName,
        hiddGrad: item.hiddGrad,
        hiddStat: item.hiddStat,
        proPart: item.proPart
      })
      selectedHiddGuids.value.push(item.guid)
    }
  }
  proxy.$modal.msgSuccess("导入成功")
  importOpen.value = false
}

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

/** 删除附件 */
function handleDeleteFile(row) {
  proxy.$modal.confirm('是否确认删除附件"' + row.medName + '"？').then(function () {
    return delAttMedBase(row.guid)
  }).then(() => {
    getFileList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 返回列表 */
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>
