<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <text class="iconfont">←</text>
      </view>
      <view class="nav-title">批量导入</view>
      <view class="nav-right">
        <text class="iconfont">···</text>
      </view>
    </view>

    <!-- 选项卡切换 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{active: activeTab === 'import'}" @click="activeTab = 'import'">
        批量导入
      </view>
      <view class="tab-item" :class="{active: activeTab === 'record'}" @click="activeTab = 'record'">
        导入记录
      </view>
    </view>

    <!-- 批量导入内容区 -->
    <view v-if="activeTab === 'import'" class="content">
      <!-- 方式1：导入进货单【核心带完整上传功能】 -->
      <view class="card">
        <view class="card-header">
          <view class="method-tag">方式1</view>
          <view class="method-title">导入进货单</view>
        </view>
        <view class="upload-area" @click="pickFile" v-if="!uploadFileName">
          <view class="upload-icon">
            <text class="iconfont">↥</text>
          </view>
          <view class="upload-text">点击上传文件</view>
          <view class="upload-desc">（仅支持10M以下，以xls、xlsx或csv结尾的文件类型）</view>
        </view>
        <!-- 已选择文件展示 -->
        <view class="file-selected" v-else>
          <view class="file-name">{{uploadFileName}}</view>
          <view class="file-opt">
            <text class="reupload" @click="pickFile">重新选择</text>
            <text class="cancel" @click="cancelFile">取消</text>
          </view>
        </view>
        <!-- 导入按钮 -->
        <view class="import-btn-box" v-if="uploadFileName">
          <button class="import-btn" :loading="isUploading" @click="uploadAndImport">开始导入商品</button>
        </view>
        <view class="desc-list">
          <text class="desc-item">1. 可导入：供应商进货单、其他收银系统的商品导出明细</text>
          <text class="desc-item">2. 支持录入条形码、商品名称、零售价、库存、进货价、商品品牌</text>
          <text class="desc-item">3. 导入成功后会在原商品基础上增加库存，不会覆盖原库存</text>
        </view>
      </view>

      <!-- 方式2：通过电脑端录入 -->
      <view class="card">
        <view class="card-header">
          <view class="method-tag">方式2</view>
          <view class="method-title">通过电脑端录入</view>
        </view>
        <view class="card-content">
          <view class="content-text">支持导入更大文件、更多商品数、商品信息</view>
          <view class="link-area" @click="openLink">
            <text class="link-text">请在电脑端访问 http://e.weidian.com/main</text>
            <text class="iconfont">↗</text>
          </view>
        </view>
      </view>

      <!-- 方式3：微店商品快速录入 -->
      <view class="card">
        <view class="card-header">
          <view class="method-tag">方式3</view>
          <view class="method-title">微店商品快速录入</view>
        </view>
        <view class="card-content">
          <view class="content-text">如果您没有电脑，可以试试我们的快捷设置功能</view>
          <view class="link-area" @click="goQuickSetup">
            <text class="link-text">3-20分钟快速设置价格 ></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 导入记录内容区【补充列表骨架+空数据】 -->
    <view v-else class="record-content">
      <view class="empty-state" v-if="recordList.length == 0">
        <text class="empty-icon">📋</text>
        <text class="empty-text">暂无导入记录</text>
        <text class="empty-subtext">导入商品后，记录将展示在这里</text>
      </view>
      <view class="record-list" v-else>
        <view class="record-item" v-for="(item,index) in recordList" :key="index">
          <view class="record-name">{{item.fileName}}</view>
          <view class="record-info">
            <text class="record-time">{{item.createTime}}</text>
            <text class="record-status" :class="item.status">{{item.statusText}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 导入商品相关API
import { importProductData, getImportRecord } from '@/api/product';
// 导入门店ID获取工具
import { getStoreId } from '@/utils/auth';

export default {
  data() {
    return {
      activeTab: 'import', // 默认选中批量导入
      uploadFilePath: '', // 选中的文件临时路径
      uploadFileName: '', // 选中的文件名称
      isUploading: false, // 是否正在上传/导入中
      recordList: [] // 导入记录列表
    }
  },
  onShow() {
    // 每次进入页面刷新导入记录
    if(this.activeTab == 'record'){
      this.getImportRecord();
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({ delta: 1 });
    },

    // ========== 核心：选择文件并校验 ==========
    pickFile() {
      uni.chooseFile({
        count: 1, // 只允许选择1个文件
        type: 'file',
        sizeLimit: 10 * 1024 * 1024, // 限制10M以内，和页面提示一致
        success: (res) => {
          const tempFile = res.tempFiles[0];
          const fileName = tempFile.name;
          const fileSize = tempFile.size;

          // 1. 文件大小校验
          if (fileSize > 10 * 1024 * 1024) {
            return uni.showToast({ title: '文件大小不能超过10M', icon: 'none', duration: 2000 });
          }

          // 2. 文件格式校验 (严格匹配xls/xlsx/csv)
          const suffix = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
          const allowSuffix = ['.xls', '.xlsx', '.csv'];
          if (!allowSuffix.includes(suffix)) {
            return uni.showToast({ title: '仅支持xls、xlsx、csv格式文件', icon: 'none', duration: 2000 });
          }

          // 校验通过，赋值文件信息
          this.uploadFilePath = tempFile.path;
          this.uploadFileName = fileName;
          uni.showToast({ title: '文件选择成功', icon: 'success', duration: 1500 });
        },
        fail: () => {
          uni.showToast({ title: '文件选择失败，请重新选择', icon: 'none' });
        }
      });
    },

    // 取消已选择的文件
    cancelFile() {
      this.uploadFilePath = '';
      this.uploadFileName = '';
    },

    // ========== 核心：文件上传+商品导入 主逻辑 ✅ 已对接你的真实接口 ✅ ==========
    uploadAndImport() {
      if (!this.uploadFilePath) return;
      this.isUploading = true; // 开启加载状态，防止重复点击

      // 准备表单数据
      const formData = {
        storeId: getStoreId()
      };

      // 调用API进行商品导入
      importProductData(this.uploadFilePath, formData)
        .then(res => {
          this.isUploading = false;
          
          // 业务成功：导入成功 匹配接口 code=200
          if (res.code === 200) {
            uni.showToast({
              title: `导入成功！共导入 ${res.data} 个商品`,
              icon: 'success',
              duration: 2500
            });
            // 重置文件选择状态
            this.cancelFile();
          } 
          // 业务失败：导入失败
          else {
            uni.showModal({
              title: '导入失败',
              content: res.msg || '文件内容有误，请检查后重新上传',
              showCancel: false,
              confirmText: '知道了'
            });
          }
        })
        .catch(err => {
          this.isUploading = false;
          console.error('文件上传失败：', err);
          uni.showModal({
            title: '上传异常',
            content: '网络异常或服务器连接失败，请检查接口服务后重试',
            showCancel: false,
            confirmText: '重新上传'
          });
        });
    },

    // 打开电脑端链接
    openLink() {
      uni.showModal({
        title: '温馨提示',
        content: '将在浏览器中打开电脑端录入地址',
        confirmText: '确认打开',
        success: (res) => {
          if (res.confirm) {
            uni.openURL({
              url: 'http://e.weidian.com/main',
              fail: () => uni.showToast({ title: '打开失败，请手动复制链接', icon: 'none' })
            });
          }
        }
      });
    },

    // 跳转快速设置页面
    goQuickSetup() {
      uni.navigateTo({
        url: '/pages/quick-setup/quick-setup'
      });
    },

    // 获取导入记录
    getImportRecord() {
      uni.showLoading({ title: '加载中...', mask: true });
      
      // 调用API获取导入记录
      getImportRecord()
        .then(res => {
          if(res.code == 200){
            this.recordList = res.data || [];
          }
        })
        .catch(err => {
          console.error('获取导入记录失败：', err);
        })
        .finally(() => {
          uni.hideLoading();
        });
    }
  }
}
</script>

<style scoped>
/* 全局样式重置 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #e62318;
	color: white;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
}
.nav-left, .nav-right {
	width: 60rpx;
	font-size: 32rpx;
}
.nav-title {
	font-size: 34rpx;
	font-weight: bold;
}

/* 选项卡 */
.tab-bar {
	display: flex;
	background-color: white;
}
.tab-item {
	flex: 1;
	text-align: center;
	padding: 30rpx 0;
	font-size: 32rpx;
	color: #333;
	border-bottom: 4rpx solid transparent;
}
.tab-item.active {
	color: #e62318;
	border-bottom-color: #e62318;
	font-weight: bold;
}

/* 内容区 */
.content {
	padding: 30rpx;
}

/* 卡片通用样式 */
.card {
	background-color: white;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
}
.card-header {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background-color: white;
}
.method-tag {
	background-color: #e62318;
	color: white;
	font-size: 24rpx;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	margin-right: 20rpx;
}
.method-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 上传区域 */
.upload-area {
	margin: 0 30rpx 30rpx;
	border: 2rpx dashed #ccc;
	border-radius: 12rpx;
	padding: 60rpx 30rpx;
	text-align: center;
}
.upload-icon {
	font-size: 48rpx;
	color: #999;
	margin-bottom: 20rpx;
}
.upload-text {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
}
.upload-desc {
	font-size: 24rpx;
	color: #999;
}

/* 已选择文件样式 */
.file-selected {
	margin: 0 30rpx 30rpx;
	padding: 20rpx;
	background: #f9f9f9;
	border-radius: 12rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.file-name {
	font-size: 28rpx;
	color: #333;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.file-opt {
	display: flex;
	gap: 20rpx;
}
.reupload {
	font-size: 26rpx;
	color: #e62318;
}
.cancel {
	font-size: 26rpx;
	color: #999;
}

/* 导入按钮样式 */
.import-btn-box {
	padding: 0 30rpx 20rpx;
}
.import-btn {
	width: 100%;
	background: #e62318;
	color: white;
	font-size: 30rpx;
	padding: 20rpx 0;
	border-radius: 12rpx;
}

/* 描述列表 */
.desc-list {
	padding: 0 30rpx 30rpx;
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}
.desc-item {
	display: block;
	margin-bottom: 10rpx;
}

/* 卡片内容区 */
.card-content {
	padding: 0 30rpx 30rpx;
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}
.content-text {
	margin-bottom: 20rpx;
	display: block;
}
.link-area {
	display: flex;
	align-items: center;
	color: #e62318;
}
.link-text {
	font-size: 28rpx;
	margin-right: 10rpx;
}

/* 导入记录样式 */
.record-content {
	padding: 30rpx;
}
.empty-state {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
}
.empty-icon {
	font-size: 60rpx;
	display: block;
	margin-bottom: 20rpx;
}
.empty-text {
	font-size: 30rpx;
	margin-bottom: 10rpx;
	display: block;
}
.empty-subtext {
	font-size: 24rpx;
}
.record-list {
	background: white;
	border-radius: 16rpx;
}
.record-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}
.record-name {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
}
.record-info {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999;
}
.record-status.success {
	color: #07c160;
}
.record-status.fail {
	color: #e62318;
}
</style>