<template>
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <BasicTable
      class="feedback-table"
      size="small"
      rowKey="id"
      :canResize="false"
      :showIndexColumn="false"
      :showActionColumn="false"
      :showTableSetting="false"
      :clickToRowSelect="false"
      :columns="columns"
      :dataSource="feedbackTableData"
      :loading="loading"
      :pagination="false"
      :rowClassName="feedbackStatusRowClassName"
      :bordered="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'attachments'">
          <SUploadFile
            v-if="record.id"
            class="feedback-view-attachment-list"
            :bussiness-id="record.id"
            :disabled="true"
            :multiple="true"
          />
          <span v-else>-</span>
        </template>
      </template>
    </BasicTable>
  </j-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, defineExpose } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import type { BasicColumn } from '/@/components/Table';
  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
  import SUploadFile from '/@/components/semri/fileComponent/SUploadFile.vue';
  import { list } from '../DqInspectProgress.api';
  import { feedbackStatusRowClassName } from '/@/views/bg/utils/feedbackStatusRender';

  const visible = ref(false);
  const loading = ref(false);
  const feedbackTableData = ref<Recordable[]>([]);

  const completedCount = computed(() =>
    feedbackTableData.value.filter((item) => item.bpmStatus_dictText === '已完成').length
  );

  const title = computed(() => {
    if (loading.value) return '反馈信息（加载中）';
    const total = feedbackTableData.value.length;
    const done = completedCount.value;
    return `反馈信息（共 ${total} 条，已完成 ${done} 条）`;
  });

  const columns: 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,
    },
  ];

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

  function handleCancel() {
    visible.value = false;
  }

  defineExpose({ open });
</script>

<style lang="less" scoped>
  .feedback-view-attachment-list {
    min-width: 240px;

    :deep(.file-list-wrapper) {
      min-height: 40px;
      max-height: 120px;
      padding: 4px 8px;
    }

    :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;
      padding: 4px 0;

      .ant-empty-image {
        display: none;
      }

      .ant-empty-description {
        font-size: 12px;
        color: #999;
        padding: 0;
        margin: 0;
      }
    }
  }
</style>
