<script setup>
import { ref, computed, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";

const tableData = ref([
  {
    id: 1,
    title: "A区巡护日报",
    reporter: "张三",
    department: "巡护部",
    type: "巡护报告",
    content: "今日巡护发现...",
    attachments: ["report1.pdf", "image1.jpg"],
    status: "已提交",
    createTime: "2024-03-20 10:30",
  },
  {
    id: 2,
    title: "水质监测日报",
    reporter: "李四",
    department: "监测部",
    type: "监测报告",
    content: "今日水质监测数据显示...",
    attachments: ["report2.pdf"],
    status: "待审核",
    createTime: "2024-03-20 11:20",
  },
]);

// 搜索和筛选
const searchText = ref("");
const typeFilter = ref([]);
const statusFilter = ref([]);
const dateRange = ref(["", ""]);

// 过滤数据
const filteredData = computed(() => {
  return tableData.value.filter(report => {
    const searchLower = searchText.value.toLowerCase();
    const textMatch = !searchText.value ||
      report.title.toLowerCase().includes(searchLower) ||
      report.reporter.toLowerCase().includes(searchLower);

    const typeMatch = typeFilter.value.length === 0 ||
      typeFilter.value.includes(report.type);

    const statusMatch = statusFilter.value.length === 0 ||
      statusFilter.value.includes(report.status);

    return textMatch && typeMatch && statusMatch;
  });
});

// 新建报告
const dialogVisible = ref(false);
const formData = reactive({
  title: "",
  type: "",
  content: "",
  attachments: [],
});

const handleCreate = () => {
  dialogVisible.value = true;
};

const handleSubmit = () => {
  console.log("提交报告:", formData);
  ElMessage.success("提交成功");
  dialogVisible.value = false;
};

// 查看报告
const detailVisible = ref(false);
const currentReport = ref(null);

const handleView = (row) => {
  currentReport.value = row;
  detailVisible.value = true;
};

// 添加导出处理函数
const handleExport = (row) => {
  ElMessageBox.confirm(
    '确认导出该报告？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '导出成功，文件已下载'
      });
    })
    .catch(() => {
      // 取消导出
    });
};
</script>

<template>
  <div class="daily-report-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>日常报告</span>
          <div class="header-right">
            <el-input
              v-model="searchText"
              placeholder="搜索报告标题/提交人"
              style="width: 300px"
              clearable
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-select
              v-model="typeFilter"
              multiple
              collapse-tags
              placeholder="报告类型"
              style="width: 200px; margin-left: 16px"
              clearable
            >
              <el-option label="巡护报告" value="巡护报告" />
              <el-option label="监测报告" value="监测报告" />
            </el-select>
            <el-select
              v-model="statusFilter"
              multiple
              collapse-tags
              placeholder="状态筛选"
              style="width: 200px; margin-left: 16px"
              clearable
            >
              <el-option label="已提交" value="已提交" />
              <el-option label="待审核" value="待审核" />
              <el-option label="已审核" value="已审核" />
            </el-select>
            <el-button type="primary" @click="handleCreate" style="margin-left: 16px">
              新建报告
            </el-button>
          </div>
        </div>
      </template>

      <el-table :data="filteredData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="报告标题" min-width="200" />
        <el-table-column prop="reporter" label="提交人" width="120" />
        <el-table-column prop="department" label="部门" width="120" />
        <el-table-column prop="type" label="类型" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === '已审核' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleView(row)">
              查看
            </el-button>
            <el-button
              type="success"
              size="small"
              :disabled="row.status === '已审核'"
            >
              审核
            </el-button>
            <el-button
              type="warning"
              size="small"
              @click="handleExport(row)"
            >
              导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新建报告弹窗 -->
    <el-dialog v-model="dialogVisible" title="新建报告" width="800px">
      <el-form :model="formData" label-width="100px">
        <el-form-item label="报告标题" required>
          <el-input v-model="formData.title" placeholder="请输入报告标题" />
        </el-form-item>
        <el-form-item label="报告类型" required>
          <el-select v-model="formData.type" placeholder="请选择报告类型">
            <el-option label="巡护报告" value="巡护报告" />
            <el-option label="监测报告" value="监测报告" />
          </el-select>
        </el-form-item>
        <el-form-item label="报告内容" required>
          <el-input
            v-model="formData.content"
            type="textarea"
            rows="10"
            placeholder="请输入报告内容"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            action="#"
            multiple
            :auto-upload="false"
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 报告详情弹窗 -->
    <el-dialog v-model="detailVisible" title="报告详情" width="800px">
      <template v-if="currentReport">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="报告标题" :span="2">
            {{ currentReport.title }}
          </el-descriptions-item>
          <el-descriptions-item label="提交人">
            {{ currentReport.reporter }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            {{ currentReport.department }}
          </el-descriptions-item>
          <el-descriptions-item label="报告类型">
            {{ currentReport.type }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="currentReport.status === '已审核' ? 'success' : 'warning'">
              {{ currentReport.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="报告内容" :span="2">
            {{ currentReport.content }}
          </el-descriptions-item>
          <el-descriptions-item label="附件" :span="2">
            <div class="attachment-list">
              <el-link
                v-for="file in currentReport.attachments"
                :key="file"
                type="primary"
                style="margin-right: 16px"
              >
                {{ file }}
              </el-link>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
          <el-button
            type="warning"
            @click="handleExport(currentReport)"
            :disabled="!currentReport"
          >
            导出
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use "./styles/variables" as v;

.daily-report-container {
  .el-card {
    background: #ffffff;
    border: none;
    border-radius: 4px;
    box-shadow: $box-shadow;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 16px;
    font-weight: 500;
    color: $text-primary;
  }
}

.header-right {
  display: flex;
  align-items: center;
}

:deep(.el-table) {
  th.el-table__cell {
    background-color: #fafafa;
    color: $text-primary;
    font-weight: 500;
  }
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:deep(.el-descriptions) {
  .el-descriptions__label {
    width: 120px;
    justify-content: right;
  }
}
</style>