<view class="feedback-page">
  <custom-nav padding-x="42">
    <view class="feedback-nav">
      <view class="nav-back" bindtap="handleBack">
        <text></text>
      </view>
      <text class="nav-title">意见反馈</text>
      <view class="record-link" bindtap="handleRecord"></view>
    </view>
  </custom-nav>

  <view class="feedback-content">
    <view class="hero-row">
      <image class="hero-illustration" src="/static/images/my/yjfk_top.png" mode="widthFix"></image>
      <!-- <view class="hero-copy">
        <view class="hero-title">
          <text>你的意见对我们很</text>
          <text class="accent">重要</text>
        </view>
        <text class="hero-desc">欢迎提出宝贵的建议</text>
        <text class="hero-desc">帮助我们做得更好</text>
        <view class="hero-line"></view>
      </view> -->
    </view>

    <view class="form-card type-card">
      <view class="card-title">
        <image class="title-icon type-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
        <text>反馈类型</text>
        <text class="optional">（可多选）</text>
      </view>
      <view class="type-grid">
        <view wx:for="{{types}}" wx:key="key" class="type-chip {{item.active ? 'active' : 'gray'}}"
          data-key="{{item.key}}" bindtap="handleTypeTap">
          <image class="type-chip-icon icon-placeholder" src="{{item.icon}}" mode="aspectFit"></image>
          <text>{{item.label}}</text>
        </view>
      </view>
    </view>

    <view class="form-card desc-card">
      <view class="card-title">
        <image class="title-icon pen-icon icon-placeholder" src="/static/images/my/edit.png" mode="aspectFit"></image>
        <text>问题描述</text>
      </view>
      <view class="textarea-shell">
        <textarea class="desc-input" value="{{description}}" maxlength="500" placeholder="请详细描述您遇到的问题或建议…"
          placeholder-class="placeholder" bindinput="handleDescriptionInput"></textarea>
        <text class="counter">{{description.length}}/500</text>
      </view>
    </view>

    <view class="form-card image-card">
      <view class="card-title">
        <image class="title-icon image-title-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit">
        </image>
        <text>添加图片</text>
        <text class="optional">（选填）</text>
      </view>
      <view style="display: flex;flex-direction: row;gap: 20;">
        <view class="upload-box image-full" wx:for="{{datas.images}}" wx:key="index" bindtap="handleUpload">
          <image class="plus-icon icon-placeholder" src="{{item}}"></image>
        </view>
        <view class="upload-box" wx:if="{{datas.images.length < 3}}" bindtap="handleUpload">
          <image class="plus-icon icon-placeholder" src="/static/images/my/Addimages.png"
            style="width: 26rpx;height: 26rpx;"></image>
          <text>上传图片</text>
        </view>
      </view>
      <text class="upload-tip">最多可上传 3 张图片</text>
    </view>

    <view class="form-card contact-card">
      <view class="card-title">
        <image class="title-icon phone-icon icon-placeholder" src="/static/images/my/call.png" mode="aspectFit"></image>
        <text>联系方式</text>
        <text class="optional">（选填）</text>
      </view>
      <input class="contact-input" value="{{contact}}" placeholder="请输入手机号或微信号，方便我们与您联系" placeholder-class="placeholder"
        bindinput="handleContactInput" />
    </view>

    <view class="submit-btn" bindtap="handleSubmit">提交反馈</view>
    <view class="thanks-text">感谢您的反馈，我们会认真对待每一条建议 💜</view>
  </view>
</view>