<template>
  <div class="mainView">
    <BreadCrumb />
    <div class="editInfo">
      <el-form label-width="180">
        <el-card class="box-card">
          <template #header>
            <span>举报内容</span>
          </template>
          <el-form-item label="被举报人">
            <el-input
              disabled
              size="large"
              v-model="recoverData.reportedPerson"
            />
          </el-form-item>
          <el-form-item label="联系方式" prop="contactInformation">
            <el-input
              size="large"
              disabled
              v-model.number="recoverData.contactInformation"
            />
          </el-form-item>
          <el-form-item label="被举报部门">
            <el-select
              disabled
              size="large"
              v-model="recoverData.ioDepartmentFunctionId"
            >
              <el-option
                v-for="item in unitDict"
                :key="item.id"
                :value="item.id"
                :label="item.departmentName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="提交时间">
            <el-date-picker
              disabled
              :size="size"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="recoverData.createTime"
            />
          </el-form-item>
          <el-form-item label="举报内容" prop="complaintContent" class="length">
            <el-input
              disabled
              size="large"
              :rows="8"
              type="textarea"
              v-model="recoverData.complaintContent"
            />
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <template #header>
            <span>回复内容</span>
          </template>
          <template v-if="recoverData.isResponded">
            <el-form-item label="回复人">
              <el-input disabled v-model="recoverData.respondent" />
            </el-form-item>
            <el-form-item label="回复时间">
              <el-date-picker
                disabled
                :size="size"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="recoverData.completionDate"
              />
            </el-form-item>
            <el-form-item label="回复内容">
              <el-input
                :rows="8"
                disabled
                type="textarea"
                v-model="recoverData.responseContent"
              />
            </el-form-item>
          </template>
          <template v-else>
            <el-empty description="等待回复...">
              <template #image>
                <el-icon><Timer /></el-icon>
              </template>
            </el-empty>
          </template>
        </el-card>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import api from "@/api/hdjl.js";
import "@/style/hdjl/xfjb.less";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import dictStore from "@/store/dictionary.js"; //引入仓库
import BreadCrumb from "@/components/breadcrumbModule/index.vue";

const recoverData = ref({});
const unitDict = dictStore().DICT_BM;
const routerQuery = useRouter().currentRoute.value.query;

onMounted(() => {
  if (routerQuery) {
    api.getDetails(routerQuery).then((res) => {
      recoverData.value = res.data;
    });
  }
});
</script>
<style scoped lang="less">
.editInfo {
  .el-form {
    .el-form-item {
      width: 100%;
      .el-select {
        width: 360px;
      }
    }
  }
}
</style>
