<template>
  <div class="app-container">
    <!-- 详情对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%" append-to-body>
      <el-form ref="detailForm" :model="formData" label-width="140px" :disabled="true">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="网站删除条数">
              <el-input v-model="formData.website" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新媒体删除条数">
              <el-input v-model="formData.newMedia" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="总删除条数">
              <el-input v-model="formData.totalCount" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属季度">
              <el-select v-model="formData.quarter" style="width:100%">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.TRS_QUARTER)"
                           :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="内网/专网">
              <el-select v-model="formData.internalNetwork" style="width:100%">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.TRS_INTERNAL_NETWORK)"
                           :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报送人">
              <el-input v-model="formData.reporterName" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="上报人类型">
              <el-select v-model="formData.reporterType" style="width:100%">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.TRS_REPORTER_TYPE)"
                           :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报送人电话">
              <el-input v-model="formData.reporterPhone" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="报送时间">
              <el-date-picker
                v-model="formData.reportTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="timestamp"
                style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="formData.reportStatus" style="width:100%">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.TRS_REPORT_STATUS)"
                           :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="上报附件">
              <template #label>
                <span>情况说明附件<br/>(加盖公章)</span>
              </template>
              <FilePreview v-model="formData.attachment"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input v-model="formData.reportRemark" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as HarmfulInfoReportApi from '@/api/server/harmfulinforeport';
import FilePreview from '@/components/FilePreview';

export default {
  name: "HarmfulInfoReportDetail",
  components: { FilePreview },
  data() {
    return {
      // 弹出层标题
      dialogTitle: "有害信息上报详情",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单参数
      formData: {
        id: undefined,
        website: undefined,
        newMedia: undefined,
        internalNetwork: undefined,
        totalCount: undefined,
        quarter: undefined,
        reporterName: undefined,
        reporterType: undefined,
        reporterPhone: undefined,
        reportTime: undefined,
        departmentId: undefined,
        reportStatus: undefined,
        reportRemark: undefined,
        attachment: undefined,
      }
    };
  },
  methods: {
    /** 打开详情弹窗 */
    async open(id) {
      this.dialogVisible = true;
      if (id) {
        try {
          const res = await HarmfulInfoReportApi.getHarmfulInfoReport(id);
          this.formData = res.data;
        } catch (error) {
          console.error("获取详情失败:", error);
        }
      }
    }
  }
};
</script>

<style scoped>
/* 可以添加一些自定义样式 */
.el-input, .el-select, .el-textarea, .el-date-editor {
  width: 100%;
}
</style>
