<Drawer
  id="questionnaire-drawer"
  custom-drawer="questionnaire-drawer"
  needCancel="{{false}}"
  mask="{{effectiveClosable}}"
  bind:myCancel="onDrawerCancel"
>
  <view
    class="questionnaire-drawer-wrap {{useDarkTheme ? 'questionnaire-drawer-wrap-dark' : ''}}"
  >
    <view class="questionnaire-header" wx:if="{{currentQuestionnaire}}">
      <view class="questionnaire-title-row">
        <view class="questionnaire-title">
          {{currentQuestionnaire.title}}
        </view>
        <mp-icon
          wx:if="{{effectiveClosable}}"
          class="questionnaire-close-icon drawer-close-shadow"
          bindtap="onDrawerCancel"
          icon="close"
          color="{{useDarkTheme ? '#A6A6A7' : '#939aa3'}}"
          size="{{20}}"
        />
      </view>
      <view class="questionnaire-desc" wx:if="{{currentQuestionnaire.description}}">
        {{currentQuestionnaire.description}}
      </view>
      <view
        class="questionnaire-count"
        wx:if="{{currentQuestionnaire.questions && currentQuestionnaire.questions.length}}"
      >
        共{{currentQuestionnaire.questions.length}}题
      </view>
    </view>

    <view class="questionnaire-body">
      <view wx:if="{{!currentQuestionnaire}}">
        <view class="questionnaire-empty">暂无法获取问卷内容</view>
      </view>

      <view wx:elif="{{isFilled}}">
        <view class="filled-status-container">
          <image
            class="filled-status-icon"
            mode="aspectFit"
            src="https://p1-live.byteimg.com/tos-cn-i-gjr78lqtd0/f3590f83cc9d49fc963b8763319752e5~tplv-gjr78lqtd0-image.image"
          />
          <view class="filled-status-text">您已填写过该问卷，感谢您的参与</view>
        </view>
      </view>

      <scroll-view
        wx:else
        scroll-y="true"
        class="questionnaire-scroll"
      >
        <block wx:for="{{currentQuestionnaire.questions}}" wx:key="key">
          <view class="question-item">
            <view class="question-title">
              <text class="question-required" wx:if="{{item.isRequired}}">*</text>
              <text class="question-index">{{index + 1}}.</text>
              <text class="question-text">{{item.title}}</text>
              <text class="question-type-tag" wx:if="{{item.typeTag}}">{{item.typeTag}}</text>
            </view>

            <!-- 文本题 -->
            <view wx:if="{{item.isInput}}" class="question-input {{item.disabled ? 'question-input-disabled' : ''}}">
              <input
                class="question-textarea {{item.disabled ? 'question-textarea-disabled' : ''}}"
                placeholder="{{item.placeholder}}"
                maxlength="{{item.maxlength}}"
                type="{{item.inputType}}"
                value="{{item.value}}"
                disabled="{{item.disabled}}"
                data-index="{{index}}"
                bindinput="handleInputChange"
                bindblur="handleInputBlur"
              />
            </view>

            <!-- 单选题 -->
            <view wx:elif="{{item.isSingle}}" class="question-select">
              <radio-group
                data-index="{{index}}"
                bindchange="handleRadioChange"
              >
                <label
                  wx:for="{{item.options}}"
                  wx:for-item="option"
                  wx:key="id"
                  class="question-option"
                >
                  <radio
                    class="question-radio"
                    value="{{option.id}}"
                    checked="{{option.checked}}"
                    color="#3370ff"
                  />
                  <view class="question-option-text">{{option.label}}</view>
                </label>
              </radio-group>
            </view>

            <!-- 多选题 -->
            <view wx:elif="{{item.isMulti}}" class="question-select">
              <checkbox-group
                data-index="{{index}}"
                bindchange="handleCheckboxChange"
              >
                <label
                  wx:for="{{item.options}}"
                  wx:for-item="option"
                  wx:key="id"
                  class="question-option"
                >
                  <checkbox
                    class="question-checkbox"
                    value="{{option.id}}"
                    checked="{{option.checked}}"
                    color="#3370ff"
                  />
                  <view class="question-option-text">{{option.label}}</view>
                </label>
              </checkbox-group>
            </view>

            <view wx:if="{{item.errorMessage}}" class="error-msg">{{item.errorMessage}}</view>
          </view>
        </block>
      </scroll-view>
    </view>

    <view class="questionnaire-footer" wx:if="{{!isFilled}}">
      <button
        class="questionnaire-submit-btn {{isFilled || isSubmitting ? 'questionnaire-submit-btn-disabled' : ''}}"
        type="primary"
        loading="{{isSubmitting}}"
        disabled="{{isFilled || isSubmitting}}"
        bindtap="onSubmit"
      >
        {{isFilled ? '已提交' : '提交'}}
      </button>
    </view>
  </view>
</Drawer>
