<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="作物类型" prop="cropType">
        <el-select v-model="queryParams.cropType" placeholder="请选择作物类型" clearable>
          <el-option
            v-for="dict in dict.type.crop_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="作物名称" prop="cropType">
        <el-input v-model="queryParams.cropType" placeholder="请输入作物名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="设备编号" prop="deviceCode">
        <el-input v-model="queryParams.deviceCode" placeholder="请输入设备编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="病害名称" prop="diseaseName">
        <el-input v-model="queryParams.diseaseName" placeholder="请输入病害名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <!-- <el-form-item label="严重程度" prop="severityLevel">
        <el-input
          v-model="queryParams.severityLevel"
          placeholder="请输入严重程度"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="识别时间" prop="collectTime">
        <el-date-picker clearable style="width:200px" v-model="queryParams.collectTime" type="date"
          value-format="yyyy-MM-dd" placeholder="请选择采集/识别时间">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="所在农场" prop="farmName">
        <el-input style="width:200px" v-model="queryParams.farmName" placeholder="请输入所在农场" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item> -->

      <el-form-item label="所属农场" prop="deptIdList">
        <treeselect v-model="queryParams.deptIdList" :options="deptOptions" multiple :flat="true" :limit="1"
          :limitText="count => `+${count}`" style="width:200px" :show-count="true" placeholder="请选所属农场" />
      </el-form-item>

      <el-form-item label="处理状态" prop="handleStatus">
        <el-select v-model="queryParams.handleStatus" placeholder="请选择处理状态" clearable>
          <el-option v-for="dict in dict.type.ai_grape_disease_handle_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计面板 -->
    <div class="statistics-panel">
      <el-row :gutter="12">
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
          <div class="stat-card total-card">
            <div class="stat-content">
              <div class="stat-title">今日识别总数</div>
              <div class="stat-number">{{ statistics.todayCount || 0 }}</div>
              <div class="stat-desc">识别数量</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
          <div class="stat-card tech-card">
            <div class="stat-content">
              <div class="stat-title">待处理建议数</div>
              <div class="stat-number">{{ statistics.pendingCount || 0 }}</div>
              <div class="stat-desc">建议数量</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['base:GrapeDiseaseReport:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="GrapeDiseaseReportList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="所属农场" align="center" key="farmName" prop="farmName" />
      <el-table-column label="作物名称" align="center" prop="cropType" />
      <el-table-column label="设备编号" align="center" prop="deviceCode" />
      <el-table-column label="经度" align="center" prop="lng" />
      <el-table-column label="纬度" align="center" prop="lat" />
      <el-table-column label="病害名称" align="center" prop="diseaseName" />
      <el-table-column label="置信度" align="center" prop="confidence" />
      <!-- <el-table-column label="严重程度" align="center" prop="severityLevel">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ai_grape_disease_report_severity_level" :value="scope.row.severityLevel"/>
        </template>
</el-table-column> -->
      <el-table-column label="识别时间" align="center" prop="collectTime" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理状态" align="center" prop="handleStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ai_grape_disease_handle_status" :value="scope.row.handleStatus" />
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
            v-hasPermi="['base:GrapeDiseaseReport:view']">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />



    <!-- 详情对话框 -->
    <el-dialog :visible.sync="detailOpen" width="60%" append-to-body class="detail-dialog">
      <div v-if="detailData" class="report-detail-content">
        <!-- 基础信息区 -->
        <section class="info-section">
          <h3>基础信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <label>设备编号：</label>
              <span>{{ detailData.deviceCode }}</span>
            </div>
            <div class="info-item">
              <label>采集位置：</label>
              <span>经度: {{ detailData.lng }}，纬度: {{ detailData.lat }}</span>
            </div>
            <div class="info-item">
              <label>识别时间：</label>
              <span>{{ parseTime(detailData.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </div>
            <div class="info-item">
              <label>所在农场：</label>
              <span>{{ detailData.farmName || '未填写' }}</span>
            </div>
          </div>
        </section>

        <!-- 识别结果与图片区 -->
        <section class="result-image-section">
          <h3>识别结果与图片</h3>
          <div class="result-image-container">
            <!-- 左侧图片 -->
            <div class="image-area">
              <!-- <h4>病害图片</h4> -->
              <div class="image-container">
                <el-image v-if="detailData.imgUrl" :src="detailData.imgUrl" :preview-src-list="[detailData.imgUrl]"
                  fit="contain" style="max-width: 300px; max-height: 300px;">
                </el-image>
                <p v-else>暂无图片</p>
              </div>
            </div>

            <!-- 右侧识别结果 -->
            <div class="result-area">
              <h4>识别结果</h4>
              <div class="result-details">
                <div class="result-item">
                  <label>病害名称：</label>
                  <span>{{ detailData.diseaseName }}</span>
                </div>
                <div class="result-item">
                  <label>置信度：</label>
                  <span>{{ detailData.confidence }}%</span>
                </div>
                <!-- <div class="result-item">
              <label>严重程度：</label>
              <span>
                <dict-tag 
                  :options="dict.type.ai_grape_disease_report_severity_level" 
                  :value="detailData.severityLevel"/>
              </span>
            </div> -->
                <!-- <div class="result-item">
              <label>发病原因分析：</label>
              <span>AI智能分析结果</span>
            </div> -->
              </div>
            </div>
          </div>
        </section>

        <!-- 农事建议区 -->
        <section class="advice-section">
          <h3>农事建议</h3>
          <div class="advice-list">
            <div class="advice-item">
              <h4>紧急处理措施</h4>
              <p>{{ detailData.emergencyMeasure || '暂无建议' }}</p>
            </div>
            <div class="advice-item">
              <h4>田间管理建议</h4>
              <p>{{ detailData.manageAdvice || '暂无建议' }}</p>
            </div>
            <div class="advice-item">
              <h4>预防方案</h4>
              <p>{{ detailData.preventPlan || '暂无建议' }}</p>
            </div>
          </div>
        </section>

        <!-- 操作区 -->
        <section class="action-section">
          <div class="action-buttons">
            <el-button type="primary" @click="handleMarkProcessed" :disabled="detailData.handleStatus === 1">
              标记已处理
            </el-button>
            <el-button @click="closeDetailDialog">关闭</el-button>
          </div>
        </section>
      </div>
    </el-dialog>

    <!-- 添加或修改AI农作物病害诊断报告对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="作物类型" prop="cropType">
          <el-select v-model="form.cropType" placeholder="请选择作物类型">
            <el-option v-for="dict in dict.type.crop_type" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceCode">
          <el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <el-input v-model="form.lng" placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input v-model="form.lat" placeholder="请输入纬度" />
        </el-form-item>
        <el-form-item label="病害名称" prop="diseaseName">
          <el-input v-model="form.diseaseName" placeholder="请输入病害名称" />
        </el-form-item>
        <el-form-item label="AI识别置信度" prop="confidence">
          <el-input v-model="form.confidence" placeholder="请输入AI识别置信度" />
        </el-form-item>
        <el-form-item label="严重程度" prop="severityLevel">
          <el-input v-model="form.severityLevel" placeholder="请输入严重程度" />
        </el-form-item>
        <el-form-item label="采集/识别时间" prop="collectTime">
          <el-date-picker clearable v-model="form.collectTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择采集/识别时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所在地块/农场" prop="farmName">
          <el-input v-model="form.farmName" placeholder="请输入所在地块/农场" />
        </el-form-item>
        <el-form-item label="病害图片访问URL" prop="imgUrl">
          <el-input v-model="form.imgUrl" placeholder="请输入病害图片访问URL" />
        </el-form-item>
        <el-form-item label="处理状态" prop="handleStatus">
          <el-radio-group v-model="form.handleStatus">
            <el-radio v-for="dict in dict.type.ai_grape_disease_handle_status" :key="dict.value"
              :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="紧急处理措施" prop="emergencyMeasure">
          <el-input v-model="form.emergencyMeasure" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="田间管理建议" prop="manageAdvice">
          <el-input v-model="form.manageAdvice" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="预防方案" prop="preventPlan">
          <el-input v-model="form.preventPlan" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="处理备注" prop="handleNote">
          <el-input v-model="form.handleNote" placeholder="请输入处理备注" />
        </el-form-item>
        <el-form-item label="处理人" prop="handleUser">
          <el-input v-model="form.handleUser" placeholder="请输入处理人" />
        </el-form-item>
        <el-form-item label="处理时间" prop="handleTime">
          <el-date-picker clearable v-model="form.handleTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择处理时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建时间" prop="createdTime">
          <el-date-picker clearable v-model="form.createdTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="updatedTime">
          <el-date-picker clearable v-model="form.updatedTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择更新时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listGrapeDiseaseReport, getGrapeDiseaseReport, delGrapeDiseaseReport, addGrapeDiseaseReport, updateGrapeDiseaseReport } from "@/api/base/GrapeDiseaseReport"
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "GrapeDiseaseReport",
  components: { Treeselect },
  dicts: ['ai_grape_disease_handle_status', 'crop_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // AI农作物病害诊断报告表格数据
      GrapeDiseaseReportList: [],
      // 部门树选项
      deptOptions: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 详情弹窗相关
      detailOpen: false,
      detailData: {},

      // 统计数据
      statistics: {
        todayCount: 0,
        pendingCount: 0,

      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cropType: null,
        deviceCode: null,
        lng: null,
        lat: null,
        diseaseName: null,
        confidence: null,
        severityLevel: null,
        collectTime: null,
        farmName: null,
        imgUrl: null,
        handleStatus: null,
        emergencyMeasure: null,
        manageAdvice: null,
        preventPlan: null,
        handleNote: null,
        handleUser: null,
        handleTime: null,
        createdTime: null,
        updatedTime: null,
        deptIdList: [],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        cropType: [
          { required: true, message: "作物类型不能为空", trigger: "change" }
        ],
        deviceCode: [
          { required: true, message: "设备编号不能为空", trigger: "blur" }
        ],
        lng: [
          { required: true, message: "经度不能为空", trigger: "blur" }
        ],
        lat: [
          { required: true, message: "纬度不能为空", trigger: "blur" }
        ],
        diseaseName: [
          { required: true, message: "病害名称不能为空", trigger: "blur" }
        ],
        confidence: [
          { required: true, message: "AI识别置信度不能为空", trigger: "blur" }
        ],
        severityLevel: [
          { required: true, message: "严重程度不能为空", trigger: "blur" }
        ],
        collectTime: [
          { required: true, message: "采集/识别时间不能为空", trigger: "blur" }
        ],
        imgUrl: [
          { required: true, message: "病害图片访问URL不能为空", trigger: "blur" }
        ],
        handleStatus: [
          { required: true, message: "处理状态不能为空", trigger: "change" }
        ],
        emergencyMeasure: [
          { required: true, message: "紧急处理措施不能为空", trigger: "blur" }
        ],
        manageAdvice: [
          { required: true, message: "田间管理建议不能为空", trigger: "blur" }
        ],
        preventPlan: [
          { required: true, message: "预防方案不能为空", trigger: "blur" }
        ],
      }
    }
  },
  created() {
    this.getList()
    this.getDeptTree();
    this.getStatistics()
  },
  methods: {

/** 获取统计数据 - 兼容：待处理数=全部历史数据 */
getStatistics() {
  const todayStr = this.parseTime(new Date(), '{y}-{m}-{d}');
  console.log('todayStr', todayStr)
  listGrapeDiseaseReport().then(response => {
    const data = response?.rows || [];
    let todayCount = 0;
    let pendingCount = 0;

    data.forEach(item => {
      // 统计：全部数据的待处理数量
      if (item.handleStatus === 0) {
        pendingCount++;
      }
      // 统计：今日数据数量
      if (item.collectTime) {
        const itemDateStr = this.parseTime(item.collectTime, '{y}-{m}-{d}');
        console.log('itemDateStr', itemDateStr)
        if (itemDateStr === todayStr) {
          todayCount++;
        }
      }
    });

    this.statistics = { todayCount, pendingCount };
  }).catch(() => {
    this.statistics = { todayCount: 0, pendingCount: 0 };
  });
},

    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询AI农作物病害诊断报告列表 */
    getList() {
      this.loading = true
      listGrapeDiseaseReport(this.queryParams).then(response => {
        this.GrapeDiseaseReportList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        cropType: null,
        deviceCode: null,
        lng: null,
        lat: null,
        diseaseName: null,
        confidence: null,
        severityLevel: null,
        collectTime: null,
        farmName: null,
        imgUrl: null,
        handleStatus: null,
        emergencyMeasure: null,
        manageAdvice: null,
        preventPlan: null,
        handleNote: null,
        handleUser: null,
        handleTime: null,
        createdTime: null,
        updatedTime: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加AI农作物病害诊断报告"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getGrapeDiseaseReport(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改AI农作物病害诊断报告"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateGrapeDiseaseReport(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addGrapeDiseaseReport(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除AI农作物病害诊断报告编号为"' + ids + '"的数据项？').then(function () {
        return delGrapeDiseaseReport(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => { })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('base/GrapeDiseaseReport/export', {
        ...this.queryParams
      }, `GrapeDiseaseReport_${new Date().getTime()}.xlsx`)
    },

    /** 查看详情按钮操作 */
    handleView(row) {
      const id = row.id
      getGrapeDiseaseReport(id).then(response => {
        this.detailData = response.data
        this.detailOpen = true
      })
    },

    /** 标记已处理按钮 */
    handleMarkProcessed() {
      this.$prompt('请输入处理备注', '标记已处理', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '处理备注不能为空'
      }).then(({ value }) => {
        const processedData = {
          id: this.detailData.id,
          handleStatus: 1, // 设置为已处理
          handleNote: value,
          handleUser: this.$store.getters.name, // 获取当前登录用户
          handleTime: new Date().toISOString().slice(0, 19).replace('T', ' ') // 当前时间
        }

        updateGrapeDiseaseReport(processedData).then(response => {
          this.$modal.msgSuccess("标记已处理成功")
          this.detailOpen = false
          this.getList() // 刷新列表
        })
      }).catch(() => {
        // 用户取消操作
      })
    },

    // 关闭详情弹窗
    closeDetailDialog() {
      this.detailOpen = false
    }
  }
}
</script>
<style lang="scss">
.report-detail-content {

  .info-section,
  .result-image-section,
  .advice-section,
  .action-section {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fafafa;

    h3 {
      margin-top: 0;
      margin-bottom: 16px;
      font-size: 16px;
      color: #303133;
      border-bottom: 1px solid #dcdfe6;
      padding-bottom: 8px;
    }

    h4 {
      margin: 8px 0;
      color: #606266;
      font-weight: bold;
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;

    .info-item {
      display: flex;
      flex-direction: column;

      label {
        font-weight: bold;
        color: #909399;
        font-size: 14px;
        margin-bottom: 4px;
      }

      span {
        color: #606266;
      }
    }
  }

  .result-image-container {
    display: flex;
    gap: 20px;

    .image-area,
    .result-area {
      flex: 1;
      display: flex;
      flex-direction: column;

      .image-container {
        text-align: center;
        padding: 16px 0;
      }

      .result-details {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .result-item {
          display: flex;
          flex-direction: column;

          label {
            font-weight: bold;
            color: #909399;
            font-size: 14px;
            margin-bottom: 4px;
          }

          span {
            color: #606266;
          }
        }
      }
    }
  }

  .advice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;

    .advice-item {
      background-color: white;
      padding: 16px;
      border-radius: 4px;

      p {
        margin: 0;
        line-height: 1.6;
        color: #606266;
      }
    }
  }

  .action-section {
    text-align: right;
    background: none;
    border: none;
    padding: 0;
  }

  .advice-list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .advice-item {
      background-color: white;
      padding: 16px;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      h4 {
        margin: 0 0 12px 0;
        color: #606266;
        font-weight: bold;
        font-size: 14px;
        border-bottom: 1px solid #ebeef5;
        padding-bottom: 8px;
      }

      p {
        margin: 0;
        line-height: 1.6;
        color: #606266;
        word-wrap: break-word;
        white-space: pre-wrap;
        /* 保留换行符 */
      }
    }
  }
}

.detail-dialog {
  .el-dialog__body {
    padding: 20px;
  }
}

/* 统计面板样式 */
.statistics-panel {
  margin-bottom: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.statistics-panel .el-row {
  display: flex;
  justify-content: space-between;
}

.statistics-panel .el-col {
  flex: 1;
  max-width: none !important;
}

.stat-card {
  border-radius: 12px;
  padding: 16px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  color: #fff;
  margin-bottom: 10px;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
}


.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.stat-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
  line-height: 1.2;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.0;
  margin: 6px 0;
  color: #fff;
}

.stat-desc {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
  margin: 0;
}

/* 不同卡片的主题色 */
.total-card {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.tech-card {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.policy-card {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.published-card {
  background: linear-gradient(135deg, #e60575 0%, #e61581 100%);
}

.draft-card {
  background: linear-gradient(135deg, #06b6d4 0%, #38bdf8 100%);
}

.formatted-content {
  line-height: 1.6;
  color: #606266;

  /* 为可能生成的标题设置样式 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 12px 0 8px 0;
    font-weight: bold;
    color: #303133;
  }

  /* 为可能生成的段落设置样式 */
  p {
    margin: 8px 0;
  }

  /* 为可能生成的列表设置样式 */
  ul,
  ol {
    margin: 8px 0;
    padding-left: 20px;
  }

  li {
    margin: 4px 0;
  }

  /* 为可能生成的粗体和斜体设置样式 */
  strong,
  b {
    font-weight: bold;
  }

  em,
  i {
    font-style: italic;
  }

  /* 为可能生成的代码块设置样式 */
  code {
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
  }

  pre {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
  }
}
</style>