<template>
  <div class="mobile-detail-page">
    <!-- 头部导航 -->
    <div class="page-header">
      <div class="header-left">
        <button class="back-btn" @click="handleBack">
          <span>←</span>
        </button>
      </div>
      <div class="header-title">
        {{ readonlyMode ? '申报详情' : '编辑申报' }}
      </div>
      <div class="header-right">
        <!-- 占位 -->
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="form-content">
      <!-- 基础信息 -->
      <div class="form-section">
        <div class="section-title">一、基础信息</div>
        
        <!-- 姓名 -->
        <div class="form-item">
          <label class="form-label">姓名</label>
          <input 
            v-model="form.actualName" 
            class="form-input" 
            placeholder="员工姓名" 
            readonly
          />
        </div>

        <!-- 执业证号 -->
        <div class="form-item">
          <label class="form-label">执业证号</label>
          <input 
            v-model="form.certificateNumber" 
            class="form-input" 
            placeholder="执业证号" 
            readonly
          />
        </div>

        <!-- 执业机构 -->
        <div class="form-item">
          <label class="form-label">执业机构</label>
          <input 
            v-model="form.firmName" 
            class="form-input" 
            placeholder="执业机构名称" 
            readonly
          />
        </div>

        <!-- 职务 -->
        <div class="form-item">
          <label class="form-label">职务</label>
          <template v-if="readonlyMode">
            <input 
              v-model="form.positionName" 
              class="form-input" 
              placeholder="职务" 
              readonly
            />
          </template>
          <template v-else>
            <select 
              v-model="form.positionId" 
              class="form-select"
              :disabled="readonlyMode"
            >
              <option value="">请选择职务</option>
              <option 
                v-for="position in positionList" 
                :key="position.positionId" 
                :value="position.positionId"
              >
                {{ position.positionName }}
              </option>
            </select>
          </template>
        </div>
      </div>

      <!-- 服务信息 -->
      <div class="form-section">
        <div class="section-title">二、服务信息</div>
        
        <!-- 服务开始时间 -->
        <div class="form-item">
          <label class="form-label">服务开始时间</label>
          <input 
            v-model="form.serviceStart" 
            class="form-input" 
            placeholder="服务开始时间"
            :readonly="readonlyMode"
          />
        </div>

        <!-- 服务结束时间 -->
        <div class="form-item">
          <label class="form-label">服务结束时间</label>
          <input 
            v-model="form.serviceEnd" 
            class="form-input" 
            placeholder="服务结束时间"
            :readonly="readonlyMode"
          />
        </div>

        <!-- 服务时长 -->
        <div class="form-item">
          <label class="form-label">服务时长（小时）</label>
          <input 
            v-model="form.serviceDuration" 
            class="form-input" 
            placeholder="服务时长（小时）"
            :readonly="readonlyMode"
          />
        </div>
      </div>

      <!-- 活动信息 -->
      <div class="form-section">
        <div class="section-title">三、活动信息</div>
        
        <!-- 活动类型 -->
        <div class="form-item">
          <label class="form-label">活动类型</label>
          <template v-if="readonlyMode">
            <input 
              v-model="form.activityCategoryName" 
              class="form-input" 
              placeholder="活动类型"
              readonly
            />
          </template>
          <template v-else>
            <select 
              v-model="form.activityCategoryId" 
              class="form-select"
              @change="onActivityCategoryChange"
            >
              <option value="">请选择活动类型</option>
              <option 
                v-for="category in activityCategoryList" 
                :key="category.categoryId" 
                :value="category.categoryId"
              >
                {{ category.categoryName }}
              </option>
            </select>
          </template>
        </div>

        <!-- 活动名称 -->
        <div class="form-item">
          <label class="form-label">活动名称</label>
          <template v-if="readonlyMode">
            <input 
              v-model="form.activityName" 
              class="form-input" 
              placeholder="活动名称"
              readonly
            />
          </template>
          <template v-else>
            <select 
              v-model="form.activityNameId" 
              class="form-select"
              :disabled="!form.activityCategoryId"
            >
              <option value="">请选择活动名称</option>
              <option 
                v-for="activity in activityList" 
                :key="activity.goodsId" 
                :value="activity.goodsId"
              >
                {{ activity.goodsName }}
              </option>
            </select>
          </template>
        </div>

        <!-- 参加人数（受益人数） -->
        <div class="form-item">
          <label class="form-label">参加人数（受益人数）</label>
          <input 
            v-model="form.beneficiaryCount" 
            class="form-input" 
            placeholder="参加人数（受益人数）"
            :readonly="readonlyMode"
          />
        </div>

        <!-- 组织单位名称 -->
        <div class="form-item">
          <label class="form-label">组织单位名称</label>
          <input 
            v-model="form.organizerName" 
            class="form-input" 
            placeholder="组织单位名称"
            :readonly="readonlyMode"
          />
        </div>

        <!-- 服务对象负责人/联系人姓名 -->
        <div class="form-item">
          <label class="form-label">服务对象负责人/联系人姓名</label>
          <input 
            v-model="form.organizerContact" 
            class="form-input" 
            placeholder="服务对象负责人/联系人姓名"
            :readonly="readonlyMode"
          />
        </div>

        <!-- 联系方式 -->
        <div class="form-item">
          <label class="form-label">联系方式</label>
          <input 
            v-model="form.organizerPhone" 
            class="form-input" 
            placeholder="联系方式"
            :readonly="readonlyMode"
          />
        </div>

        <!-- 服务内容 -->
        <div class="form-item">
          <label class="form-label">服务内容描述</label>
          <template v-if="readonlyMode">
            <div class="service-content-display">
              {{ stripHtmlTags(form.serviceContent) || '无' }}
            </div>
          </template>
          <template v-else>
            <textarea 
              v-model="form.serviceContent" 
              class="form-textarea" 
              placeholder="服务内容描述"
              rows="3"
            ></textarea>
          </template>
        </div>
      </div>

      <!-- 证明材料 -->
      <div class="form-section">
        <div class="section-title">四、证明材料</div>
        
        <!-- 文件列表 -->
        <div class="form-item">
          <label class="form-label">证明材料</label>
          <div class="file-list" v-if="uploadedFiles.length > 0">
            <div 
              v-for="file in uploadedFiles" 
              :key="file.id" 
              class="file-item"
            >
              <span class="file-name">{{ file.name || file.fileName || '未命名文件' }}</span>
            </div>
          </div>
          <div v-else-if="form.attachmentIds && form.attachmentIds.trim()">
            <div class="form-tip">证明材料已上传，但文件列表为空</div>
          </div>
          <div v-else>
            <div class="form-tip">暂无证明材料</div>
          </div>
        </div>
      </div>

      <!-- 审核信息 -->
      <div class="form-section">
        <div class="section-title">五、审核信息</div>
        
        <!-- 审核状态 -->
        <div class="form-item">
          <div class="status-display" :class="getStatusClass(form.firmAuditStatus)">
            {{ getStatusText(form.firmAuditStatus) }}
          </div>
        </div>

        <!-- 审核意见 -->
        <div class="form-item" v-if="form.auditRemark">
          <label class="form-label">审核意见</label>
          <textarea 
            v-model="form.auditRemark" 
            class="form-textarea" 
            placeholder="审核意见"
            rows="3"
            readonly
          ></textarea>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <button class="btn btn-secondary" @click="handleBack">
          返回
        </button>
        <template v-if="!readonlyMode">
          <button class="btn btn-secondary" @click="handleSave" :disabled="loading">
            保存草稿
          </button>
          <button class="btn btn-primary" @click="handleSubmit" :disabled="loading">
            提交申报
          </button>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api'
import { message } from 'ant-design-vue'
import { loginApi } from '/@/api/system/login-api'
import { positionApi } from '/@/api/system/position-api'
import { categoryApi } from '/@/api/business/category/category-api'
import { goodsApi } from '/@/api/business/goods/goods-api'
import { fileApi } from '/@/api/support/file-api'
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const readonlyMode = ref(true) // 默认只读模式

// 表单数据
const form = reactive({
  applicationId: undefined, //申报ID
  userId: undefined, //申报律师ID
  actualName: '', //员工姓名
  certificateNumber: '', //执业证号
  firmId: undefined, //执业机构ID
  firmName: '', //部门名称
  positionId: '', //职务ID
  positionName: '', //职务名称
  serviceStart: '', //服务开始时间
  serviceEnd: '', //服务结束时间
  serviceDuration: null, //服务时长（小时）
  activityCategoryId: '', //活动类型ID
  activityNameId: '', //活动名称ID
  activityName: '', //活动名称
  beneficiaryCount: null, //参加人数（受益人数）
  organizerName: '', //组织单位名称
  organizerContact: '', //负责人姓名
  organizerPhone: '', //联系方式
  serviceContent: '', //服务内容描述
  proofMaterials: [], //证明材料
  attachmentIds: undefined, //附件ID列表
  status: undefined, //申报状态
  firmAuditStatus: null, //执业机构审核状态
  auditRemark: '' //审核备注
})

// 下拉选项数据
const positionList = ref([])
const activityCategoryList = ref([])
const activityList = ref([])
const uploadedFiles = ref([])

// 获取申报详情
async function getDetail() {
  const applicationId = route.query.applicationId
  if (!applicationId) {
    message.error('申报ID不存在')
    router.back()
    return
  }

  loading.value = true
  try {
    const res = await serviceApplicationsApi.queryDetail(applicationId)
    if (res.code === 0) {
      Object.assign(form, res.data)
      
      // 根据申报状态设置编辑模式
      // status=0：草稿状态，可以编辑
      // status>=1：已提交状态，只能查看
      readonlyMode.value = form.status !== 0
      
      // 如果是草稿状态，获取下拉选项数据
      if (!readonlyMode.value) {
        await getSelectOptions()
      }

      // 5. 如果有附件ID，则加载文件列表（与PC端逻辑一致）
      if (form.attachmentIds && form.attachmentIds.trim()) {
        await getFileListByAttachmentIds(form.attachmentIds)
      }
      
      console.log('详情数据加载完成:', form)
      console.log('附件ID:', form.attachmentIds)
      console.log('文件列表:', uploadedFiles.value)
    } else {
      message.error(res.msg || '获取详情失败')
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    message.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 根据attachmentIds获取文件列表
async function getFileListByAttachmentIds(attachmentIds) {
  try {
    if (!attachmentIds || !attachmentIds.trim()) {
      uploadedFiles.value = []
      console.log('attachmentIds为空，清空文件列表')
      return
    }
    
    console.log('开始获取文件列表，attachmentIds:', attachmentIds)
    
    // 直接传递attachmentIds字符串，后端接口接收字符串参数
    const result = await fileApi.getFileList(attachmentIds)
    console.log('文件列表API返回结果:', result)
    
    if (result && result.code === 0 && result.data && result.data.length > 0) {
      // 将文件信息转换为移动端需要的格式
      uploadedFiles.value = result.data.map(file => ({
        id: file.id,
        name: file.fileName || file.name || '未命名文件',
        fileName: file.fileName || file.name || '未命名文件',
        fileUrl: file.fileUrl,
        fileSize: file.fileSize,
        uploadTime: file.uploadTime
      }))
      
      console.log('文件列表加载成功，文件数量:', uploadedFiles.value.length)
      console.log('文件详情:', uploadedFiles.value)
    } else {
      uploadedFiles.value = []
      console.log('文件列表为空或获取失败，result:', result)
    }
  } catch (error) {
    console.error('获取文件列表失败:', error)
    uploadedFiles.value = []
    message.error('获取文件列表失败')
  }
}

// 获取下拉选项数据
async function getSelectOptions() {
  try {
    // 获取职务列表
    const positionRes = await positionApi.queryList()
    positionList.value = positionRes.data || []
    
    // 获取活动类型列表
    const categoryRes = await categoryApi.queryCategoryTree({
      categoryType: 1 // 商品分类
    })
    activityCategoryList.value = categoryRes.data || []
  } catch (error) {
    console.error('获取选项数据失败:', error)
  }
}

// 活动类型改变事件
async function onActivityCategoryChange() {
  if (form.activityCategoryId) {
    try {
      const activityRes = await goodsApi.queryGoodsList({
        categoryId: form.activityCategoryId,
        shelvesFlag: true,
        pageNum: 1,
        pageSize: 100
      })
      activityList.value = activityRes.data?.list || []
    } catch (error) {
      console.error('获取活动列表失败:', error)
      activityList.value = []
    }
  } else {
    activityList.value = []
  }
  form.activityNameId = ''
}

// 返回
function handleBack() {
  router.back()
}

// 保存草稿
async function handleSave() {
  if (readonlyMode.value) return
  
  loading.value = true
  try {
    const submitData = {
      ...form,
      status: 0 // 草稿状态
    }
    
    const res = await serviceApplicationsApi.update(submitData)
    
    if (res.code === 0) {
      message.success('保存成功')
      router.push('/mobile/service')
    } else {
      message.error(res.msg || '保存失败')
    }
  } catch (error) {
    console.error('保存失败:', error)
    message.error('保存失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 提交申报
async function handleSubmit() {
  if (readonlyMode.value) return
  
  // 表单验证
  if (!form.positionId) {
    message.error('请选择职务')
    return
  }
  
  if (!form.serviceStart) {
    message.error('请选择服务开始时间')
    return
  }
  
  if (!form.serviceEnd) {
    message.error('请选择服务结束时间')
    return
  }
  
  if (!form.activityCategoryId) {
    message.error('请选择活动类型')
    return
  }
  
  if (!form.activityNameId) {
    message.error('请选择活动名称')
    return
  }
  
  if (!form.serviceContent) {
    message.error('请输入服务内容描述')
    return
  }
  
  loading.value = true
  
  try {
    const submitData = {
      ...form,
      status: 1 // 提交状态
    }
    
    const res = await serviceApplicationsApi.submit(form.applicationId)
    
    if (res.code === 0) {
      message.success('申报提交成功')
      setTimeout(() => {
        router.push('/mobile/service')
      }, 1000)
    } else {
      message.error(res.msg || '提交失败')
    }
  } catch (error) {
    console.error('提交失败:', error)
    message.error(error.message || '提交失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 状态文本映射
function getStatusText(status) {
  const statusMap = {
    0: '未提交',
    1: '待审核', 
    2: '审核中',
    3: '已通过',
    4: '驳回'
  }
  return statusMap[status] || '未知状态'
}

// 状态样式类
function getStatusClass(status) {
  const classMap = {
    0: 'status-pending',
    1: 'status-approved',
    2: 'status-rejected',
    3: 'status-completed',
    4: 'status-draft'
  }
  return classMap[status] || 'status-unknown'
}

// HTML标签过滤函数
function stripHtmlTags(html) {
  if (!html) return ''
  // 移除HTML标签，保留纯文本
  return html.replace(/<[^>]*>/g, '').trim()
}

onMounted(() => {
  getDetail()
})
</script>

<style scoped>
.mobile-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 头部导航 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.back-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.back-btn:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

/* 表单内容 */
.form-content {
  padding: 16px;
  padding-bottom: 80px;
}

.form-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8f4ff;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background: #1890ff;
  border-radius: 1px;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.4;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  background: #f5f5f5;
  color: #666;
  transition: all 0.3s;
  box-sizing: border-box;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* 状态显示 */
.status-display {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.status-pending {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.status-approved {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-rejected {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.status-completed {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.status-draft {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 12px 16px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

/* 响应式调整 */
@media (max-width: 375px) {
  .form-content {
    padding: 12px;
    padding-bottom: 80px;
  }
  
  .form-section {
    padding: 12px;
  }
}
</style>