<?php
session_start();

// ===================== 改成你自己的服务号信息 =====================
$appid = "wx983408e450669dd6";
$appsecret = "22637a43785de0b2bc09d4a932a7e95c";
// ==================================================================

// 当前页面的完整地址，授权后微信会跳回这里
$redirect_uri = urlencode('https://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']);

// 1. 从微信授权跳转回来，拿到code
if (isset($_GET['code']) && !isset($_SESSION['user_info'])) {
    $code = $_GET['code'];
    // 拿code换用户访问令牌
    $token_url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$appsecret}&code={$code}&grant_type=authorization_code";
    $res = file_get_contents($token_url);
    $token_data = json_decode($res, true);
    
    if (isset($token_data['access_token'])) {
        // 拿令牌换用户昵称、头像
        $user_url = "https://api.weixin.qq.com/sns/userinfo?access_token={$token_data['access_token']}&openid={$token_data['openid']}&lang=zh_CN";
        $user_res = file_get_contents($user_url);
        $user_info = json_decode($user_res, true);
        
        if (isset($user_info['nickname'])) {
            // 把用户信息存到会话里，不用每次打开都授权
            $_SESSION['user_info'] = $user_info;
        }
    }
    // 去掉URL里的code参数，刷新页面
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}

// 2. 没授权过，跳转到微信授权页面
if (!isset($_SESSION['user_info'])) {
    $auth_url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appid}&redirect_uri={$redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
    header('Location: ' . $auth_url);
    exit;
}

// 3. 已经授权，把用户信息传给前端JS
$user_info = $_SESSION['user_info'];
echo "<script>window.userInfo = " . json_encode($user_info, JSON_UNESCAPED_UNICODE) . ";</script>";
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>投诉</title>
<style>
html,body{margin:0;padding:0;background:#f1f1f3;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;}
.container{width:100%;overflow:hidden;}
.page{display:none;background:#fff;}
.page.active{display:block;}
.head-tip{padding:12px 18px;font-size:14px;color:#666;background:#f1f1f3;}
.item{padding:15px 18px;border-bottom:1px solid #e8e8e8;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:#333;}
.item::after{content:">";color:#c0c0c2;font-size:14px;}
.bottom-note{padding:15px;text-align:center;font-size:12px;color:#999;background:#f1f1f3;}

/* 表单通用样式 */
.form-item {
  padding: 15px 18px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}
.form-label {
  font-size: 17px;
  color: #333;
  margin-bottom: 12px;
  display: block;
  font-weight: 500;
}
.form-label::before {
  content: '*';
  color: #ff4d4f;
  margin-right: 4px;
}
.form-label.no-required::before {
  display: none;
}
.form-input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: none;
  font-size: 15px;
  box-sizing: border-box;
  outline: none;
  background: #f8f8f8;
  border-radius: 6px;
}

/* 图片上传样式 */
.upload-box {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  background: #fafafa;
}
.upload-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.upload-item {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.upload-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-item .delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
}

/* 文本域样式 */
.form-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: none;
  font-size: 15px;
  box-sizing: border-box;
  outline: none;
  resize: none;
  background: #f8f8f8;
  border-radius: 6px;
  line-height: 1.5;
  font-family: inherit;
}
.word-count {
  text-align: right;
  font-size: 13px;
  color: #999;
  margin-top: 6px;
}

.submit-btn{margin:20px 18px;padding:13px;background:#06c261;color:#fff;text-align:center;border-radius:8px;font-size:16px;cursor:pointer;user-select:none;}
.submit-btn.disabled{background:#ccc;cursor:not-allowed;}
</style>
</head>
<body>
<div class="container">

<!-- 一级页面 -->
<div class="page active" id="p1">
  <div class="head-tip">请选择投诉该账号的原因</div>
  <div class="item" data-id="m1">发布不适当内容对我造成骚扰</div>
  <div class="item" data-id="m2">存在欺诈骗钱行为</div>
  <div class="item" data-id="m3">此账号可能被盗用了</div>
  <div class="item" data-id="m4">存在侵权行为(侵犯知识产权、人身权)</div>
  <div class="item" data-id="m5">发布仿冒品信息</div>
  <div class="item" data-id="m6">冒充他人</div>
  <div class="item" data-id="m7">侵犯未成年人权益</div>
  <div class="item" data-id="m8">粉丝无底线追星行为</div>
  <div class="bottom-note">投诉须知</div>
</div>

<!-- m1 二级页面 -->
<div class="page" id="p_m1">
  <div class="head-tip">请选择具体原因</div>
  <div class="item data-next">频繁发送广告、营销信息骚扰</div>
  <div class="item data-next">恶意辱骂、人身攻击</div>
  <div class="item data-next">传播色情低俗内容</div>
  <div class="item data-next">传播暴力、恐怖、违法违规内容</div>
  <div class="item data-next">传播谣言、虚假不实信息</div>
  <div class="item data-next">其他骚扰行为</div>
</div>

<!-- m2 二级页面 -->
<div class="page" id="p_m2">
  <div class="head-tip">请选择哪一类诈骗内容</div>
  <div class="item data-id="m2_1">金融诈骗</div>
  <div class="item data-next">网络兼职刷单诈骗</div>
  <div class="item data-next">返利、高回报诱导诈骗</div>
  <div class="item data-next">网络交友诱导投资/赌博诈骗</div>
  <div class="item data-next">虚假投资理财诈骗</div>
  <div class="item data-next">赌博相关诈骗</div>
  <div class="item data-next">收款不发货、售后失联</div>
  <div class="item data-next">仿冒他人身份实施诈骗</div>
  <div class="item data-next">免费送、福利套路诈骗</div>
  <div class="item data-next">游戏相关诈骗</div>
  <div class="item data-next">其他诈骗行为</div>
  <div class="bottom-note">网络诈骗投诉指引</div>
</div>

<!-- m2_1 三级页面 -->
<div class="page" id="p_m2_1">
  <div class="head-tip">请选择金融诈骗类型</div>
  <div class="item data-next">贷款、提额诈骗</div>
  <div class="item data-next">信用卡代办、套现诈骗</div>
  <div class="item data-next">虚假征信修复、洗白诈骗</div>
  <div class="item data-next">私人放贷、套路贷</div>
  <div class="item data-next">其他金融诈骗</div>
</div>

<!-- m3 二级页面 -->
<div class="page" id="p_m3">
  <div class="head-tip">请选择具体原因</div>
  <div class="item data-next">异常群发广告信息</div>
  <div class="item data-next">冒充好友借钱、索要财物</div>
  <div class="item data-next">发布大量违规不良内容</div>
  <div class="item data-next">账号异地异常登录</div>
  <div class="item data-next">其他账号被盗异常</div>
</div>

<!-- m4 二级页面 -->
<div class="page" id="p_m4">
  <div class="head-tip">请选择侵权类型</div>
  <div class="item data-id="m4_1">肖像权/形象侵权</div>
  <div class="item data-next">名誉侵权/造谣诽谤</div>
  <div class="item data-next">商标、版权侵权</div>
  <div class="item data-next">泄露个人隐私信息</div>
  <div class="item data-next">商业诋毁、不正当竞争</div>
  <div class="item data-next">其他侵权行为</div>
</div>

<!-- m4_1 三级页面 -->
<div class="page" id="p_m4_1">
  <div class="head-tip">请选择具体侵权场景</div>
  <div class="item data-next">擅自使用本人肖像商用</div>
  <div class="item data-next">恶意P图丑化形象</div>
  <div class="item data-next">冒充本人形象引流</div>
  <div class="item data-next">其他形象肖像侵权</div>
</div>

<!-- m5 二级页面 -->
<div class="page" id="p_m5">
  <div class="head-tip">请选择具体类型</div>
  <div class="item data-id="m5_1">售卖假冒品牌商品</div>
  <div class="item data-next">虚假夸大产品宣传</div>
  <div class="item data-next">售卖三无、劣质产品</div>
  <div class="item data-next">高仿山寨仿冒售卖</div>
  <div class="item data-next">其他仿冒违规行为</div>
</div>

<!-- m5_1 三级页面 -->
<div class="page" id="p_m5_1">
  <div class="head-tip">请选择假冒品类</div>
  <div class="item data-next">美妆护肤类假冒</div>
  <div class="item data-next">服饰箱包类假冒</div>
  <div class="item data-next">数码电器类假冒</div>
  <div class="item data-next">食品保健类假冒</div>
  <div class="item data-next">其他品类假冒</div>
</div>

<!-- m6 二级页面 -->
<div class="page" id="p_m6">
  <div class="head-tip">请选择冒充类型</div>
  <div class="item data-id="m6_1">冒充亲友熟人</div>
  <div class="item data-next">冒充企业、机构官方</div>
  <div class="item data-next">冒充网红、公众人物</div>
  <div class="item data-next">冒充公职人员、客服</div>
  <div class="item data-next">其他冒充行为</div>
</div>

<!-- m6_1 三级页面 -->
<div class="page" id="p_m6_1">
  <div class="head-tip">请选择冒充目的</div>
  <div class="item data-next">冒充借钱索要财物</div>
  <div class="item data-next">冒充诱导投资消费</div>
  <div class="item data-next">冒充发布不良信息</div>
  <div class="item data-next">其他冒充亲友行为</div>
</div>

<!-- m7 二级页面 -->
<div class="page" id="p_m7">
  <div class="head-tip">请选择具体类型</div>
  <div class="item data-next">诱导未成年人非理性消费</div>
  <div class="item data-next">传播不良价值观诱导</div>
  <div class="item data-next">校园霸凌、言语欺凌</div>
  <div class="item data-next">发布涉未成年低俗不良内容</div>
  <div class="item data-next">其他侵害未成年人权益</div>
</div>

<!-- m8 二级页面 -->
<div class="page" id="p_m8">
  <div class="head-tip">请选择具体类型</div>
  <div class="item data-next">饭圈互撕、引战谩骂</div>
  <div class="item data-next">人肉搜索、泄露隐私</div>
  <div class="item data-next">集资诱导大额消费</div>
  <div class="item data-next">恶意造谣抹黑艺人</div>
  <div class="item data-next">其他饭圈不良行为</div>
</div>

<!-- 最终提交页面 -->
<div class="page" id="formPage">
  <div class="head-tip">请填写投诉信息</div>
  
  <div class="form-item">
    <label class="form-label">联系方式</label>
    <input type="text" id="contact" class="form-input" placeholder="填写联系方式">
  </div>

  <div class="form-item">
    <label class="form-label no-required">图片上传</label>
    <div class="upload-box" onclick="document.getElementById('imageInput').click()">+</div>
    <input type="file" id="imageInput" accept="image/*" multiple style="display: none;" onchange="handleImageSelect(event)">
    <div class="upload-list" id="imageList"></div>
  </div>

  <div class="form-item">
    <label class="form-label">投诉内容</label>
    <textarea id="content" class="form-textarea" maxlength="200" placeholder="请填写投诉内容" oninput="updateWordCount()"></textarea>
    <div class="word-count"><span id="wordNum">0</span>/200</div>
  </div>

  <div class="submit-btn" id="submitBtn" onclick="submitInfo()">提交</div>
</div>

</div>

<script>
// 页面全局变量
let pathArr = [];
let selectedImages = []; // 存储选中的图片

// 切换页面
function goPage(id){
  document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
  document.getElementById(id).classList.add('active');
}

// 一级跳转
document.querySelectorAll('#p1 .item').forEach(el=>{
  el.onclick=function(){
    let id = this.dataset.id;
    pathArr.push(this.innerText.trim());
    goPage('p_'+id);
  }
});

// 二级直接到填写页
document.querySelectorAll('.data-next').forEach(el=>{
  el.onclick=function(){
    pathArr.push(this.innerText.trim());
    goPage('formPage');
  }
});

// 二级进三级
document.querySelectorAll('[data-id="m2_1"],[data-id="m4_1"],[data-id="m5_1"],[data-id="m6_1"]').forEach(el=>{
  el.onclick=function(){
    let id = this.dataset.id;
    pathArr.push(this.innerText.trim());
    goPage('p_'+id);
  }
});

// 更新字数统计
function updateWordCount() {
  const val = document.getElementById('content').value.length;
  document.getElementById('wordNum').innerText = val;
}

// 处理图片选择（已修改：增加保存原始文件对象）
function handleImageSelect(event) {
  const files = event.target.files;
  if (!files.length) return;
  
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    if (!file.type.startsWith('image/')) continue;
    
    // 转base64用于预览
    const reader = new FileReader();
    reader.onload = function(e) {
      selectedImages.push({
        file: file,       // 保存原始文件，提交给后端
        name: file.name,
        size: file.size,
        base64: e.target.result
      });
      renderImageList();
    };
    reader.readAsDataURL(file);
  }
  event.target.value = '';
}

// 渲染图片预览列表
function renderImageList() {
  const listEl = document.getElementById('imageList');
  let html = '';
  selectedImages.forEach((item, index) => {
    html += `
      <div class="upload-item">
        <img src="${item.base64}" alt="上传图片">
        <div class="delete-btn" onclick="deleteImage(${index})">×</div>
      </div>
    `;
  });
  listEl.innerHTML = html;
}

// 删除选中的图片
function deleteImage(index) {
  selectedImages.splice(index, 1);
  renderImageList();
}

// 提交投诉（已完全重写：走后端接口，支持图片上传）
async function submitInfo(){
  const contact = document.getElementById('contact').value.trim();
  const content = document.getElementById('content').value.trim();
  
  // 表单必填校验
  if(!contact){
    alert('请填写联系方式');
    return;
  }
  if(!content){
    alert('请填写投诉内容');
    return;
  }

  const btn = document.getElementById('submitBtn');
  btn.classList.add('disabled');
  btn.innerText = '提交中...';

  try {
    // 构造表单数据
    const formData = new FormData();
    formData.append('contact', contact);
    formData.append('path', pathArr.join(" → "));
    formData.append('content', content);
    
    // 如果有微信授权的用户信息，一起提交
    if(window.userInfo){
      formData.append('nickname', window.userInfo.nickname);
      formData.append('avatar', window.userInfo.headimgurl);
    }

    // 把所有图片加进表单
    selectedImages.forEach((img) => {
      formData.append('images[]', img.file);
    });

    // 提交给我们自己的后端接口
    const res = await fetch('submit.php',{
      method:"POST",
      body: formData
    });
    const result = await res.json();

    if(result.code === 0){
      alert('提交成功，我们会尽快核实处理');
      // 提交成功重置表单
      pathArr = [];
      selectedImages = [];
      document.getElementById('contact').value = '';
      document.getElementById('content').value = '';
      document.getElementById('imageList').innerHTML = '';
      document.getElementById('wordNum').innerText = '0';
      goPage('p1');
    } else {
      alert(result.msg || '提交失败，请稍后重试');
    }

  } catch(err) {
    alert('提交失败，请稍后重试');
    console.error(err);
  } finally {
    btn.classList.remove('disabled');
    btn.innerText = '提交';
  }
}
</script>
</body>
</html>