<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>WPS365 在线表格管理</span>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text" 
          @click="handleRefresh"
          :loading="loading">
          刷新
        </el-button>
      </div>

      <!-- 授权状态 -->
      <el-alert
        v-if="!isAuthorized"
        title="未授权"
        type="warning"
        :closable="false"
        show-icon>
        <template slot="default">
          <span>请先完成WPS365授权，才能使用文档编辑功能</span>
          <el-button 
            type="primary" 
            size="small" 
            style="margin-left: 10px"
            @click="handleAuthorize">
            立即授权
          </el-button>
        </template>
      </el-alert>

      <el-alert
        v-else
        title="已授权"
        type="success"
        :closable="false"
        show-icon>
        <template slot="default">
          <span>授权状态：正常</span>
          <el-button 
            type="danger" 
            size="small" 
            style="margin-left: 10px"
            @click="handleRefreshToken">
            刷新Token
          </el-button>
        </template>
      </el-alert>

      <!-- 用户信息 -->
      <el-card v-if="isAuthorized && userInfo" style="margin-top: 20px">
        <div slot="header">用户信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户ID">{{ userInfo.user_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{ userInfo.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ userInfo.email || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 文件列表 -->
      <el-card v-if="isAuthorized" style="margin-top: 20px">
        <div slot="header">
          <span>文件列表</span>
          <el-button 
            type="primary" 
            size="small" 
            style="float: right"
            @click="handleLoadFiles">
            加载文件
          </el-button>
        </div>
        <el-table 
          v-loading="fileListLoading"
          :data="fileList" 
          border 
          style="width: 100%">
          <el-table-column prop="file_name" label="文件名" width="200" />
          <el-table-column prop="file_token" label="文件Token" width="250" />
          <el-table-column prop="file_type" label="类型" width="100" />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button 
                type="primary" 
                size="mini" 
                @click="handleViewFile(scope.row)">
                查看
              </el-button>
              <el-button 
                type="success" 
                size="mini" 
                @click="handleEditFile(scope.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="fileTotal > 0"
          :total="fileTotal"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="handleLoadFiles"
        />
      </el-card>

      <!-- 编辑对话框 -->
      <el-dialog 
        title="编辑表格" 
        :visible.sync="editDialogVisible" 
        width="80%"
        :close-on-click-modal="false">
        <div v-if="currentFile">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="工作表">
              <el-select v-model="currentSheetIdx" placeholder="请选择工作表" @change="handleLoadSheetData">
                <el-option
                  v-for="(sheet, index) in sheetList"
                  :key="index"
                  :label="sheet.name"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单元格范围">
              <el-input 
                v-model="cellRange" 
                placeholder="例如：A1:B10"
                style="width: 200px">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLoadSheetData">读取数据</el-button>
              <el-button type="success" @click="handleUpdateCells">保存数据</el-button>
            </el-form-item>
          </el-form>

          <el-table 
            v-loading="sheetDataLoading"
            :data="sheetData" 
            border 
            style="width: 100%; margin-top: 20px">
            <el-table-column 
              v-for="(col, index) in sheetColumns" 
              :key="index"
              :prop="'col' + index"
              :label="getColumnLabel(index)"
              min-width="120">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row['col' + index]"
                  size="small">
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { 
  getWPS365AuthUrl, 
  getWPS365TokenStatus, 
  getWPS365UserInfo,
  getWPS365FileList,
  getWPS365SheetList,
  readWPS365Cells,
  updateWPS365Cells,
  refreshWPS365Token
} from '@/api/jarvis/wps365'

export default {
  name: 'WPS365',
  data() {
    return {
      loading: false,
      isAuthorized: false,
      userInfo: null,
      userId: '', // 这里应该从登录用户获取，暂时使用配置
      
      // 文件列表
      fileList: [],
      fileListLoading: false,
      fileTotal: 0,
      queryParams: {
        page: 1,
        pageSize: 20
      },
      
      // 编辑对话框
      editDialogVisible: false,
      currentFile: null,
      currentSheetIdx: 0,
      sheetList: [],
      sheetData: [],
      sheetDataLoading: false,
      cellRange: 'A1:Z100',
      sheetColumns: []
    }
  },
  created() {
    // 初始化时检查授权状态
    // TODO: 从当前登录用户获取userId
    this.userId = 'default_user' // 临时值，需要替换为实际用户ID
    this.checkAuthStatus()
  },
  methods: {
    /**
     * 检查授权状态
     */
    async checkAuthStatus() {
      try {
        const response = await getWPS365TokenStatus(this.userId)
        if (response.code === 200) {
          this.isAuthorized = response.data.hasToken && response.data.isValid
          if (this.isAuthorized) {
            this.loadUserInfo()
          }
        }
      } catch (error) {
        console.error('检查授权状态失败', error)
      }
    },
    
    /**
     * 加载用户信息
     */
    async loadUserInfo() {
      try {
        const response = await getWPS365UserInfo(this.userId)
        if (response.code === 200) {
          this.userInfo = response.data
        }
      } catch (error) {
        console.error('加载用户信息失败', error)
      }
    },
    
    /**
     * 处理授权
     */
    async handleAuthorize() {
      try {
        const response = await getWPS365AuthUrl()
        if (response.code === 200) {
          // 在新窗口打开授权页面
          window.open(response.data, '_blank')
          this.$message.success('请在新窗口中完成授权，授权完成后刷新此页面')
        }
      } catch (error) {
        this.$message.error('获取授权URL失败：' + (error.msg || error.message))
      }
    },
    
    /**
     * 刷新Token
     */
    async handleRefreshToken() {
      try {
        // TODO: 从存储中获取refreshToken
        const response = await refreshWPS365Token({
          refreshToken: '' // 需要从存储中获取
        })
        if (response.code === 200) {
          this.$message.success('Token刷新成功')
          this.checkAuthStatus()
        }
      } catch (error) {
        this.$message.error('刷新Token失败：' + (error.msg || error.message))
      }
    },
    
    /**
     * 刷新
     */
    handleRefresh() {
      this.checkAuthStatus()
      if (this.isAuthorized) {
        this.handleLoadFiles()
      }
    },
    
    /**
     * 加载文件列表
     */
    async handleLoadFiles() {
      if (!this.isAuthorized) {
        this.$message.warning('请先完成授权')
        return
      }
      
      this.fileListLoading = true
      try {
        const response = await getWPS365FileList({
          userId: this.userId,
          page: this.queryParams.page,
          pageSize: this.queryParams.pageSize
        })
        if (response.code === 200) {
          this.fileList = response.data.files || []
          this.fileTotal = response.data.total || 0
        }
      } catch (error) {
        this.$message.error('加载文件列表失败：' + (error.msg || error.message))
      } finally {
        this.fileListLoading = false
      }
    },
    
    /**
     * 查看文件
     */
    handleViewFile(file) {
      this.$message.info('查看文件功能开发中')
    },
    
    /**
     * 编辑文件
     */
    async handleEditFile(file) {
      this.currentFile = file
      this.editDialogVisible = true
      
      // 加载工作表列表
      try {
        const response = await getWPS365SheetList(this.userId, file.file_token)
        if (response.code === 200) {
          this.sheetList = response.data.sheets || []
          if (this.sheetList.length > 0) {
            this.currentSheetIdx = 0
            this.handleLoadSheetData()
          }
        }
      } catch (error) {
        this.$message.error('加载工作表列表失败：' + (error.msg || error.message))
      }
    },
    
    /**
     * 加载工作表数据
     */
    async handleLoadSheetData() {
      if (!this.currentFile) {
        return
      }
      
      this.sheetDataLoading = true
      try {
        const response = await readWPS365Cells({
          userId: this.userId,
          fileToken: this.currentFile.file_token,
          sheetIdx: this.currentSheetIdx,
          range: this.cellRange
        })
        
        if (response.code === 200) {
          const values = response.data.values || []
          this.processSheetData(values)
        }
      } catch (error) {
        this.$message.error('加载工作表数据失败：' + (error.msg || error.message))
      } finally {
        this.sheetDataLoading = false
      }
    },
    
    /**
     * 处理工作表数据
     */
    processSheetData(values) {
      if (!values || values.length === 0) {
        this.sheetData = []
        this.sheetColumns = []
        return
      }
      
      // 确定最大列数
      const maxCols = Math.max(...values.map(row => row.length))
      this.sheetColumns = Array.from({ length: maxCols }, (_, i) => i)
      
      // 转换为表格数据格式
      this.sheetData = values.map(row => {
        const rowData = {}
        row.forEach((cell, index) => {
          rowData['col' + index] = cell !== null && cell !== undefined ? String(cell) : ''
        })
        // 填充空列
        for (let i = row.length; i < maxCols; i++) {
          rowData['col' + i] = ''
        }
        return rowData
      })
    },
    
    /**
     * 获取列标签
     */
    getColumnLabel(index) {
      let label = ''
      let num = index
      while (num >= 0) {
        label = String.fromCharCode(65 + (num % 26)) + label
        num = Math.floor(num / 26) - 1
      }
      return label
    },
    
    /**
     * 更新单元格数据
     */
    async handleUpdateCells() {
      if (!this.currentFile) {
        return
      }
      
      // 转换表格数据为二维数组
      const values = this.sheetData.map(row => {
        return this.sheetColumns.map(colIndex => {
          const value = row['col' + colIndex]
          return value !== undefined ? value : ''
        })
      })
      
      try {
        const response = await updateWPS365Cells({
          userId: this.userId,
          fileToken: this.currentFile.file_token,
          sheetIdx: this.currentSheetIdx,
          range: this.cellRange,
          values: values
        })
        
        if (response.code === 200) {
          this.$message.success('更新成功')
        }
      } catch (error) {
        this.$message.error('更新失败：' + (error.msg || error.message))
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>

