<template>
  <div class="import-data-container app-container">
    <!-- 步骤指示器 -->
    <el-steps
      :active="currentStep"
      finish-status="success"
      align-center
      class="steps-container"
    >
      <el-step title="选择来源" description="选择导入数据类型"></el-step>
      <el-step title="选择配置" description="选择分类或店铺"></el-step>
      <el-step title="上传文件" description="上传Excel数据文件"></el-step>
      <el-step title="预览数据" description="查看处理结果"></el-step>
      <el-step title="保存入库" description="确认并保存数据"></el-step>
    </el-steps>

    <!-- 第一步：选择数据来源 -->
    <div v-if="currentStep === 0" class="step-wrapper">
      <div class="step-header">
        <h2>选择数据来源</h2>
        <p>不同的数据来源有不同的处理方式和字段要求。</p>
      </div>
      <div class="source-options">
        <div
          class="source-option"
          :class="{ active: selectedDataSource === 'logistics' }"
          @click="selectDataSource('logistics')"
        >
          <i class="el-icon-truck source-icon"></i>
          <div class="source-info">
            <h3>物流数据来源</h3>
            <p>导入物流出库数据</p>
          </div>
        </div>
        <div
          class="source-option"
          :class="{ active: selectedDataSource === 'fba' }"
          @click="selectDataSource('fba')"
        >
          <i class="el-icon-box source-icon"></i>
          <div class="source-info">
            <h3>FBA数据来源</h3>
            <p>导入Amazon FBA出库数据</p>
          </div>
        </div>
      </div>
      <div class="step-actions">
        <el-button
          type="primary"
          :disabled="!selectedDataSource"
          @click="nextStep"
        >
          下一步
        </el-button>
      </div>
    </div>

    <!-- 第二步：选择配置 -->
    <div v-if="currentStep === 1" class="step-wrapper">
      <div class="step-header">
        <h2 v-if="selectedDataSource === 'logistics'">选择分类</h2>
        <h2 v-if="selectedDataSource === 'fba'">选择店铺</h2>
      </div>

      <!-- 物流数据来源：选择分类 -->
      <div v-if="selectedDataSource === 'logistics'" class="category-selection">
        <el-alert
          title="请选择数据分类"
          description="选择分类后，系统会根据分类的字段配置来匹配和处理导入的基准数据。"
          type="info"
          show-icon
          :closable="false"
        />

        <div class="category-list" v-loading="categoriesLoading">
          <div
            v-for="category in categoriesList"
            :key="category.id"
            class="category-item"
            :class="{ active: selectedCategoryId === category.id }"
            @click="selectCategory(category)"
          >
            <div class="category-name">{{ category.name }}</div>
            <div class="category-desc">
              {{ category.description || "暂无描述" }}
            </div>
            <div class="category-fields" v-if="category.fieldConfig">
              <el-tag
                v-for="field in parseFieldConfig(category.fieldConfig)"
                :key="field.fieldName"
                size="mini"
                type="info"
              >
                {{ field.displayLabel }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- FBA数据来源：选择店铺 -->
      <div v-if="selectedDataSource === 'fba'" class="shop-selection">
        <el-alert
          title="请选择店铺"
          description="选择店铺后，系统会根据店铺客户关联关系来匹配客户信息。"
          type="info"
          show-icon
          :closable="false"
        />

        <div class="shop-list" v-loading="shopsLoading">
          <div
            v-for="shop in fbaShopsList"
            :key="shop.shopName"
            class="shop-item"
            :class="{ active: selectedShopName === shop.shopName }"
            @click="selectShop(shop.shopName)"
          >
            <div class="shop-name">{{ shop.shopName }}</div>
            <div class="shop-customer">
              客户：{{ shop.customerName || "未关联" }}
            </div>
          </div>
        </div>
      </div>

      <div class="step-actions">
        <el-button @click="prevStep">上一步</el-button>
        <el-button
          type="primary"
          :disabled="
            (selectedDataSource === 'logistics' && !selectedCategoryId) ||
            (selectedDataSource === 'fba' && !selectedShopName)
          "
          @click="nextStep"
        >
          下一步
        </el-button>
      </div>
    </div>

    <!-- 第三步：上传文件 -->
    <div v-if="currentStep === 2" class="step-wrapper">
      <div class="step-header">
        <h2>上传Excel文件</h2>
      </div>

      <div class="file-upload">
        <!-- 物流数据文件格式要求 -->
        <el-alert
          v-if="selectedDataSource === 'logistics'"
          title="物流数据文件格式要求"
          type="warning"
          show-icon
          :closable="false"
        >
          <p style="color: #303030;">当前选择分类是：<u>{{ selectedCategory.name }}</u>，请确保Excel文件包含以下列：</p>
          <p style="color: #303030;">
            <strong
              >出库日期、目的地、店铺名称、出库类型、发送方式、发送番号、注文番号、商品编号、商品名称、数量、单价、送料、代引、客户名称、备注</strong
            >
          </p>
        </el-alert>

        <!-- FBA数据文件格式要求 -->
        <el-alert
          v-if="selectedDataSource === 'fba'"
          title="FBA数据文件格式要求"
          type="warning"
          show-icon
          :closable="false"
        >
          <p style="color: #303030;">当前选择的店铺是：<u>{{ selectedShopName }}</u>，请确保Excel文件包含以下列：</p>
          <p style="color: #303030;">
            <strong
              >出荷日、出品者SKU、FNSKU、ASIN、FC、数量、Amazon注文番号、通貨、商品金額（商品1点ごと）、配送料、ギフト包装手数料、配送先（市区町村）、都道府県名、配送先（郵便番号）、付与されたAmazon
              ポイント</strong
            >
          </p>
        </el-alert>

        <el-upload
          ref="upload"
          :action="uploadUrl"
          :data="uploadData"
          :before-upload="beforeUpload"
          :on-success="onUploadSuccess"
          :on-error="onUploadError"
          :show-file-list="true"
          :file-list="fileList"
          :on-remove="onFileRemove"
          accept=".xlsx,.xls"
          multiple
          drag
          class="upload-area"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            支持多选Excel文件(.xlsx/.xls)，单文件不超过10MB，文件数量不超过40个
            <el-button @click="clearAllFiles" type="text"
              >清空文件列表</el-button
            >
          </div>
        </el-upload>

        <div class="step-actions">
          <el-button @click="prevStep">上一步</el-button>
          <el-button
            type="primary"
            @click="processBatchFiles"
            :loading="processingFiles"
            :disabled="!fileList.length"
          >
            下一步，处理所有文件 ({{ fileList.length }})
          </el-button>
        </div>
      </div>
    </div>

    <!-- 第四步：预览数据 -->
    <div v-if="currentStep === 3" class="step-wrapper">
      <div class="step-header">
        <h2>预览处理结果</h2>
      </div>

      <div class="data-preview">
        <!-- 处理结果统计 -->
        <div class="statistics">
          <div class="stat-card">
            <div class="stat-number">{{ processResult.total || 0 }}</div>
            <div class="stat-label">总计行数</div>
          </div>
          <div class="stat-card success">
            <div class="stat-number">{{ processResult.processed || 0 }}</div>
            <div class="stat-label">可处理</div>
          </div>
          <div class="stat-card warning">
            <div class="stat-number">{{ processResult.filtered || 0 }}</div>
            <div class="stat-label">已过滤</div>
          </div>
          <div class="stat-card danger">
            <div class="stat-number">{{ processResult.errors || 0 }}</div>
            <div class="stat-label">
              错误数据<small
                v-if="processResult.errors > 0"
                @click="showErrorData"
                >查看错误数据</small
              >
            </div>
          </div>
        </div>

        <!-- 数据预览表格 -->
        <div
          class="data-table"
          v-if="processResult.data && processResult.data.length > 0"
        >
          <h4>数据预览（前50条）</h4>
          <el-table
            :data="processResult.data.slice(0, 50)"
            stripe
            border
            size="mini"
            height="calc(100vh - 490px)"
          >
            <el-table-column
              prop="rowNumber"
              label="行号"
              width="55"
              align="center"
            />
            <el-table-column
              prop="date"
              label="日期"
              width="100"
            ></el-table-column>
            <el-table-column prop="shopName" label="店铺"></el-table-column>
            <el-table-column
              prop="productCode"
              label="商品编号"
            ></el-table-column>
            <el-table-column
              prop="productName"
              label="商品名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="customerName"
              label="客户"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="category"
              label="分类"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="totalAmount"
              label="合计"
              width="100"
            ></el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag
                  :type="
                    scope.row.status === 1
                      ? 'success'
                      : scope.row.status === 2
                      ? 'warning'
                      : 'danger'
                  "
                  size="mini"
                >
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="deliveryType"
              label="出库类型"
              width="120"
            ></el-table-column>
          </el-table>
        </div>

        <div class="step-actions">
          <el-button @click="prevStep">上一步</el-button>
          <el-button
            type="primary"
            :disabled="!processResult.data || processResult.data.length === 0"
            @click="nextStep"
          >
            确认保存
          </el-button>
        </div>
      </div>
    </div>

    <!-- 第五步：保存数据 -->
    <div v-if="currentStep === 4" class="step-wrapper">
      <div class="step-header">
        <h2>保存数据</h2>
      </div>

      <div class="save-data">
        <div v-if="saveLoading" class="saving">
          <i class="el-icon-loading"></i>
          <p>正在保存数据，请稍候...</p>
        </div>

        <div v-else-if="saveResult" class="save-success">
          <i
            class="el-icon-success"
            style="color: #67c23a; font-size: 48px"
          ></i>
          <h3>数据保存成功！</h3>

          <div class="save-statistics">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="stat-item">
                  <div class="stat-value">{{ saveResult.saved || 0 }}</div>
                  <div class="stat-label">总计保存</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-item success">
                  <div class="stat-value">{{ saveResult.inserted || 0 }}</div>
                  <div class="stat-label">新增记录</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-item warning">
                  <div class="stat-value">{{ saveResult.updated || 0 }}</div>
                  <div class="stat-label">更新记录</div>
                </div>
              </el-col>
            </el-row>

            <div v-if="saveResult.failed > 0" class="failed-info">
              <el-alert
                :title="`${saveResult.failed}条数据保存失败`"
                type="error"
                show-icon
                :closable="false"
              >
                <div v-if="saveResult.errors && saveResult.errors.length > 0">
                  <p>错误详情：</p>
                  <ul>
                    <li v-for="error in saveResult.errors" :key="error">
                      {{ error }}
                    </li>
                  </ul>
                </div>
              </el-alert>
            </div>
          </div>

          <div class="step-actions">
            <el-button type="primary" @click="goToDataList"
              >查看数据列表</el-button
            >
            <el-button @click="startOver">重新导入</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="错误数据" :visible.sync="errorDataVisible" width="50%">
      <ul class="error-list">
        <li v-for="error in errorData" :key="error">
          {{ error }}
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategoriesSimple,
  getShopCustomerList,
  importAnalysisDataBatch,
  importFBADataBatch,
  saveImportedData,
} from "@/api/sales-analysis";

export default {
  name: "ImportData",
  data() {
    return {
      currentStep: 0,
      selectedDataSource: null, // 'logistics' 或 'fba'
      selectedCategoryId: null,
      selectedCategory: null,
      selectedShopName: null,
      categoriesList: [],
      categoriesLoading: false,
      shopsList: [],
      shopsLoading: false,
      processResult: {},
      saveLoading: false,
      saveResult: null,
      fileList: [],
      processingFiles: false,
      errorData: [],
      errorDataVisible: false,
    };
  },
  computed: {
    uploadUrl() {
      if (this.selectedDataSource === "fba") {
        return process.env.VUE_APP_BASE_API + "/analysis-data/import/fba";
      }
      return process.env.VUE_APP_BASE_API + "/analysis-data/import";
    },
    uploadData() {
      if (this.selectedDataSource === "fba") {
        return {
          shopName: this.selectedShopName,
        };
      }
      return {
        categoryId: this.selectedCategoryId,
      };
    },
    fbaShopsList() {
      return this.shopsList.filter((item) => {
        return item.shopName.includes("FBA");
      });
    },
  },
  mounted() {
    this.fetchCategoriesList();
    this.fetchShopsList();
  },
  methods: {
    // 解析字段配置字符串为 JSON 对象
    parseFieldConfig(fieldConfig) {
      try {
        if (!fieldConfig || typeof fieldConfig === "object") {
          return fieldConfig || [];
        }
        return JSON.parse(fieldConfig);
      } catch (error) {
        console.warn("解析字段配置失败:", error);
        return [];
      }
    },

    showErrorData() {
      this.errorDataVisible = true;
      this.errorData = this.processResult.errorDetails;
    },
    // 选择数据来源
    selectDataSource(source) {
      this.selectedDataSource = source;
      // 清空之前的选择
      this.selectedCategoryId = null;
      this.selectedCategory = null;
      this.selectedShopName = null;
    },

    // 获取分类列表
    async fetchCategoriesList() {
      try {
        this.categoriesLoading = true;
        const response = await getCategoriesSimple();

        if (response.code === 200) {
          this.categoriesList = response.data || [];
        } else {
          this.$message.error(response.message || "获取分类列表失败");
        }
      } catch (error) {
        console.error("获取分类列表失败:", error);
        this.$message.error("获取分类列表失败");
      } finally {
        this.categoriesLoading = false;
      }
    },

    // 获取店铺列表
    async fetchShopsList() {
      try {
        this.shopsLoading = true;
        const response = await getShopCustomerList({
          page: 1,
          pageSize: 1000,
        });

        if (response.code === 200) {
          this.shopsList = response.data.list || [];
        } else {
          this.$message.error(response.message || "获取店铺列表失败");
        }
      } catch (error) {
        console.error("获取店铺列表失败:", error);
        this.$message.error("获取店铺列表失败");
      } finally {
        this.shopsLoading = false;
      }
    },

    // 选择店铺
    selectShop(shopName) {
      this.selectedShopName = shopName;
    },

    // 选择分类
    selectCategory(category) {
      this.selectedCategoryId = category.id;
      this.selectedCategory = category;
    },

    // 下一步
    nextStep() {
      if (this.currentStep === 3) {
        // 保存数据
        this.saveData();
      } else {
        this.currentStep++;
      }
    },

    // 上一步
    prevStep() {
      this.currentStep--;
    },

    // 上传前验证
    beforeUpload(file) {
      console.log("上传前验证:", {
        name: file.name,
        type: file.type,
        size: file.size,
        lastModified: file.lastModified,
      });

      const isExcel = /\.(xlsx|xls)$/.test(file.name.toLowerCase());
      if (!isExcel) {
        console.log("文件类型验证失败:", file.name);
        this.$message.error("只能上传Excel文件！");
        return false;
      }

      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        console.log("文件大小验证失败:", file.size / 1024 / 1024 + "MB");
        this.$message.error("上传文件大小不能超过10MB！");
        return false;
      }

      console.log("前端验证通过，准备上传");

      // 对于多文件上传，我们先不让它自动上传，而是添加到文件列表
      this.addToFileList(file);
      return false; // 阻止自动上传
    },

    // 添加文件到列表
    addToFileList(file) {
      const fileItem = {
        name: file.name,
        size: file.size,
        status: "ready",
        file: file,
        uid: Date.now() + Math.random(),
      };
      this.fileList.push(fileItem);
    },

    // 移除文件
    onFileRemove(file) {
      const index = this.fileList.findIndex((item) => item.uid === file.uid);
      if (index > -1) {
        this.fileList.splice(index, 1);
      }
    },

    // 清空文件列表
    clearAllFiles() {
      this.fileList = [];
    },

    // 批量处理文件
    async processBatchFiles() {
      if (this.fileList.length === 0) {
        this.$message.warning("请先选择文件");
        return;
      }

      try {
        this.processingFiles = true;

        const formData = new FormData();

        // 根据数据来源添加不同的参数
        if (this.selectedDataSource === "fba") {
          formData.append("shopName", this.selectedShopName);
        } else {
          formData.append("categoryId", this.selectedCategoryId);
        }

        this.fileList.forEach((fileItem, index) => {
          formData.append("files", fileItem.file);
        });

        // 根据数据来源调用不同的API
        const response =
          this.selectedDataSource === "fba"
            ? await importFBADataBatch(formData)
            : await importAnalysisDataBatch(formData);

        if (response.code === 200) {
          this.processResult = response.data || {};
          this.$message.success(`成功处理${this.fileList.length}个文件`);
          this.currentStep = 3;
        } else {
          this.$message.error(response.message || "批量处理失败");
        }
      } catch (error) {
        console.error("批量处理失败:", error);
        this.$message.error("批量处理失败");
      } finally {
        this.processingFiles = false;
      }
    },

    // 上传成功
    onUploadSuccess(response) {
      console.log("上传成功回调:", response);

      if (response.code === 200) {
        this.processResult = response.data || {};
        this.$message.success(response.message || "文件处理完成");
        this.currentStep = 3;
      } else {
        console.error("处理失败:", response);
        this.$message.error(response.message || "文件处理失败");
      }
    },

    // 上传失败
    onUploadError(error) {
      console.error("上传失败:", error);
      let errorMessage = "文件上传失败";

      // 尝试从错误中提取详细信息
      if (error && error.message) {
        errorMessage = error.message;
      } else if (typeof error === "string") {
        errorMessage = error;
      }

      this.$message.error(errorMessage);
    },

    // 保存数据
    async saveData() {
      try {
        this.currentStep = 4;
        this.saveLoading = true;
        const response = await saveImportedData(this.processResult.data);

        if (response.code === 200) {
          this.saveResult = response.data;
          this.$message.success(response.message || "数据保存成功");
        } else {
          this.$message.error(response.message || "数据保存失败");
        }
      } catch (error) {
        console.error("保存数据失败:", error);
        this.$message.error("数据保存失败");
      } finally {
        this.saveLoading = false;
      }
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: "正常",
        2: "客户未匹配",
        3: "规格未匹配",
      };
      return statusMap[status] || "未知";
    },

    // 跳转到数据列表
    goToDataList() {
      this.$router.push("/sales-analysis/analysis-data/list");
    },

    // 重新开始
    startOver() {
      this.currentStep = 0;
      this.selectedDataSource = null;
      this.selectedCategoryId = null;
      this.selectedCategory = null;
      this.selectedShopName = null;
      this.processResult = {};
      this.saveResult = null;
      this.fileList = [];
    },
  },
};
</script>

<style scoped>
.import-data-container {
  padding: 0;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.import-data-container > .card {
  flex: 1;
  margin: 0;
}

.step-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.step-actions .el-button {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 16px;
}
.steps-container {
  padding: 20px;
  background-color: #fff;
}
.step-wrapper {
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  width: 100%;
  flex-grow: 1;
  height: 0;
}
.step-header {
  text-align: center;
  margin-bottom: 30px;
}
.step-header h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}
.step-header p {
  color: #909399;
}
.source-options {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 40px 0;
}
.source-option {
  width: 320px;
  padding: 25px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.source-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.source-option.active {
  border-color: #409eff;
  background-color: #f7faff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}
.source-icon {
  font-size: 36px;
  color: #409eff;
  margin-right: 20px;
}
.source-info h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 8px;
}
.source-info p {
  font-size: 13px;
  color: #606266;
  margin: 0;
  line-height: 1.5;
}
/* 分类选择样式 */
.category-selection {
  padding: 20px;
}

/* 店铺选择样式 */
.shop-selection {
  padding: 20px;
}

.shop-list {
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.shop-item {
  padding: 10px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.shop-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.shop-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.shop-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.shop-customer {
  color: #666;
  font-size: 14px;
}

.category-list {
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px;
}

.category-item {
  padding: 20px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.category-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.category-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.category-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.category-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

.category-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 文件上传样式 */
.file-upload {
  padding: 20px;
}

.upload-area {
  margin: 30px 0;
}
.upload-area /deep/.el-upload-list {
  max-height: 180px;
  overflow-y: auto;
}

.batch-actions {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  text-align: center;
}

.batch-actions .el-button {
  margin: 0 10px;
}

/* 数据预览样式 */
.data-preview {
}

.statistics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 6px;
  border: 2px solid #e8e8e8;
}

.stat-card.success {
  border-color: #67c23a;
}

.stat-card.warning {
  border-color: #e6a23c;
}

.stat-card.danger {
  border-color: #f56c6c;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  color: #666;
  font-size: 12px;
}

.stat-label small {
  font-size: 14px;
  color: #409eff;
  cursor: pointer;
}

.error-section {
  margin-bottom: 30px;
}

.error-list {
  margin: 0;
  padding-left: 20px;
  color: #e6a23c;
}

.data-table h4 {
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-top: 20px;
}

/* 保存数据样式 */
.save-data {
  padding: 40px;
  text-align: center;
}

.saving {
  color: #409eff;
}

.saving i {
  font-size: 48px;
  margin-bottom: 20px;
}

.save-success {
  padding: 20px;
}

.saving p {
  font-size: 16px;
  margin: 0;
}

.save-success h3 {
  margin: 20px 0;
  color: #333;
}

.save-success p {
  color: #666;
  margin-bottom: 30px;
}

.save-statistics {
  margin: 30px 0;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.stat-item.success {
  background: #f0f9ff;
  border: 1px solid #e1f5fe;
}

.stat-item.warning {
  background: #fffbf0;
  border: 1px solid #ffeaa7;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-item.success .stat-value {
  color: #67c23a;
}

.stat-item.warning .stat-value {
  color: #e6a23c;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.failed-info {
  margin-top: 20px;
}

.failed-info ul {
  margin: 10px 0;
  padding-left: 20px;
}

.failed-info li {
  margin: 5px 0;
  color: #f56c6c;
}

.final-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}
</style>
