<template>
  <a-modal
    v-model:open="visible"
    :title="title"
    :width="width"
    centered
    :footer="null"
    :maskClosable="false"
    :bodyStyle="{ maxHeight: '70vh', overflowY: 'auto', padding: '16px 24px 20px' }"
    destroyOnClose
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="item" tab="事项信息">
        <div class="detail-grid">
          <div
            v-for="field in detailFields"
            :key="field.label"
            class="detail-row"
            :class="{ 'detail-row-full': field.fullWidth, 'detail-row-bold': field.bold }"
          >
            <span class="detail-label">{{ field.label }}</span>
            <span class="detail-value">{{ field.value }}</span>
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="feedback" tab="反馈信息">
        <div class="feedback-summary-header">
          <div class="feedback-summary-title">
            <span class="feedback-summary-icon">
              <Icon icon="ant-design:message-outlined" />
            </span>
            <span>办理情况</span>
            <a-tag class="feedback-summary-tag">共 {{ total }} 条</a-tag>
            <a-tag class="feedback-summary-tag" color="success">已完成 {{ done }} 条</a-tag>
          </div>
          <div class="feedback-summary-desc">当前整改任务的工作进展反馈记录</div>
        </div>
        <a-table
          rowKey="id"
          size="small"
          bordered
          :columns="feedbackColumns"
          :data-source="feedbackList"
          :pagination="false"
          :scroll="{ x: 1200 }"
          :loading="feedbackLoading"
        >
          <template #bodyCell="{ column, record: fb }">
            <template v-if="column.key === 'attachments'">
              <SUploadFile
                v-if="fb.id"
                class="feedback-attachment-list"
                :bussiness-id="fb.id"
                :disabled="true"
                :multiple="true"
              />
              <span v-else>-</span>
            </template>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, defineExpose } from 'vue';
  import Icon from '/@/components/Icon/index';
  import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
  import { list } from '../../inspectProgress/DqInspectProgress.api';
  import type { BasicColumn } from '/@/components/Table';

  const visible = ref(false);
  const title = ref('详情');
  const width = 1100;
  const activeKey = ref('item');
  const record = ref<Recordable>({});

  const feedbackList = ref<Recordable[]>([]);
  const feedbackLoading = ref(false);

  function fmt(value: any): string {
    return value === undefined || value === null || value === '' ? '-' : String(value);
  }
  function fmtDate(value: any): string {
    const s = fmt(value);
    return s.length > 10 ? s.slice(0, 10) : s;
  }
  function ynText(value: any): string {
    const v = fmt(value);
    if (v === '1') return '是';
    if (v === '0') return '否';
    return v;
  }
  function dictText(record: Recordable, key: string): string {
    return fmt(record[`${key}_dictText`] || record[key]);
  }

  const detailFields = computed(() => {
    const r = record.value || {};
    return [
      { label: '问题分类', value: fmt(r.categoryName) },
      { label: '面上问题', value: fmt(r.surfaceName) },
      { label: '具体问题', value: fmt(r.specificName) },
      { label: '整改措施', value: fmt(r.improveMeasure), fullWidth: true, bold: true },
      { label: '密级', value: dictText(r, 'secretLevel') },
      { label: '完成时限', value: fmtDate(r.deadline) },
      { label: '目标节点', value: fmt(r.targetNode) },
      { label: '巡视建议', value: fmt(r.inspectAdvice) },
      { label: '检查情况', value: fmt(r.inspectionStatus) },
      { label: '监督意见', value: fmt(r.supervisoryOpinion) },
      { label: '整改状态', value: fmt(r.taskStatus) },
      { label: '措施责任部门', value: dictText(r, 'measureResDept'), bold: true },
      { label: '措施责任负责人', value: dictText(r, 'measureResLeader'), bold: true },
      { label: '分管所领导', value: dictText(r, 'chargeLeaderId'), bold: true },
      { label: '整改交付成果', value: fmt(r.rectificationEvidence) },
      { label: '成效评价标准', value: fmt(r.evaluationCriterion) },
      { label: '需党群负责人审批', value: ynText(r.isNeedAppro) },
      { label: '党群负责人', value: dictText(r, 'supDeptleaderid') },
      { label: '督办状态', value: dictText(r, 'bpmStatus') },
      { label: '督办次数', value: fmt(r.superviseCount) },
    ];
  });

  const feedbackColumns: BasicColumn[] = [
    { title: '反馈人', dataIndex: 'feedbackPersonName', align: 'center', width: 100 },
    { title: '反馈部门', dataIndex: 'feedbackDeptName', align: 'center', width: 140 },
    { title: '工作进展', dataIndex: 'workProgress', align: 'left', ellipsis: true },
    { title: '实际完成时间', dataIndex: 'actualTime', align: 'center', width: 120 },
    { title: '进展状态', dataIndex: 'bpmStatus_dictText', align: 'center', width: 100 },
    { title: '附件', dataIndex: 'id', key: 'attachments', align: 'left', width: 280 },
  ];

  const total = computed(() => feedbackList.value.length);
  const done = computed(() => feedbackList.value.filter((item) => item.bpmStatus_dictText === '已完成').length);

  async function loadFeedback(mainId: string | number) {
    feedbackLoading.value = true;
    feedbackList.value = [];
    try {
      const res = await list({ mainId, pageNo: 1, pageSize: 9999, column: 'createTime', order: 'desc' });
      feedbackList.value = Array.isArray(res) ? res : res?.records || [];
    } finally {
      feedbackLoading.value = false;
    }
  }

  function open(currentRecord: Recordable) {
    record.value = currentRecord || {};
    title.value = '详情';
    activeKey.value = 'item';
    visible.value = true;
    if (currentRecord?.id !== undefined && currentRecord?.id !== null && currentRecord?.id !== '') {
      loadFeedback(currentRecord.id);
    }
  }

  defineExpose({ open });
</script>

<style lang="less" scoped>
  .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
    padding: 4px 0;
  }

  .detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
  }

  .detail-row-full {
    grid-column: 1 / -1;
  }

  .detail-label {
    flex: 0 0 150px;
    color: #8c8c8c;
    line-height: 22px;
  }

  .detail-value {
    flex: 1;
    color: #1f2937;
    line-height: 22px;
    word-break: break-all;
  }

  .detail-row-bold .detail-value {
    font-weight: 700;
    font-size: 15px;
  }

  .feedback-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: #f6fbff;
    border: 1px solid #d6e8ff;
    border-left: 4px solid #1677ff;
    border-radius: 6px;
  }

  .feedback-summary-title {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
  }

  .feedback-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    color: #1677ff;
    background: #e6f4ff;
    border-radius: 50%;
  }

  .feedback-summary-tag {
    margin-left: 10px;
  }

  .feedback-summary-desc {
    color: #64748b;
    font-size: 13px;
    line-height: 22px;
    white-space: nowrap;
  }

  .feedback-attachment-list {
    min-width: 300px;

    :deep(.file-list-wrapper) {
      min-height: 0 !important;
      padding: 4px 8px !important;
    }

    :deep(.ant-spin-nested-loading),
    :deep(.ant-spin-container) {
      min-height: 0 !important;
      line-height: 20px;
    }

    :deep(.file-list-header) {
      margin-bottom: 6px;
      padding-bottom: 6px;
    }

    :deep(.file-list .file-item) {
      padding: 8px;
      margin-bottom: 6px;
    }

    :deep(.ant-empty) {
      margin: 0 !important;
      display: flex;
      align-items: center;
      min-height: 20px;
      text-align: left;
    }

    :deep(.ant-empty-image) {
      display: none !important;
    }

    :deep(.ant-empty-description) {
      color: #94a3b8;
      font-size: 12px;
      line-height: 20px;
    }
  }
</style>
