<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts">
defineOptions({ name: 'QuestionSuggest' })
const props = withDefaults(
  defineProps<{
    modelValue?: boolean
  }>(),
  {
    modelValue: false,
  },
)

const emits = defineEmits(['update:modelValue'])

const show = computed({
  get() {
    return props.modelValue
  },
  async set(newVal) {
    emits('update:modelValue', newVal)
  },
})
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title: '题目格式建议',
      width: '80%',
      height: '80%',
    }"
  >
    <div class="question-suggest">
      <el-tabs type="border-card">
        <el-tab-pane label="序号和选项">
          <div class="section">
            <div class="header">
              <div class="main">
                题目序号和选项ABCD等后面的小圆点，请用（<span class="right"
                  >．</span
                >），不要使用英文的（<span class="wrong">.</span>）
              </div>
              <div class="desc">
                <div class="desc-item">
                  避免跟英文句子中的<span class="wrong">.</span>混淆，比如I'm
                  fine<span class="wrong">.</span>
                </div>
                <div class="desc-item">
                  避免跟数学中的小数点<span class="wrong">.</span
                  >混淆，比如2<span class="wrong">.</span>45
                </div>
              </div>
            </div>
            <div class="example right-example">
              <div class="title">建议示范</div>
              <div class="text">
                46<span class="right">．</span>Who are you?
              </div>
              <div class="text">
                11<span class="right">．</span>请选择正确的答案。
              </div>
              <div class="text">A<span class="right">．</span>你是最帅的。</div>
              <div class="text">
                B<span class="right">．</span>你是最漂亮的。
              </div>
            </div>
            <div class="example wrong-example">
              <div class="title">不建议示范</div>
              <div class="text">46<span class="wrong">.</span>Who are you?</div>
              <div class="text">
                11<span class="wrong">.</span>请选择正确的答案。
              </div>
              <div class="text">A<span class="wrong">.</span>你是最帅的。</div>
              <div class="text">
                B<span class="wrong">.</span>你是最漂亮的。
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="答案的分割">
          <div class="section">
            <div class="header">
              <div class="main">
                用分号<span class="right">；</span>或<span class="right"
                  >数字序号</span
                >将不同空的答案隔开
              </div>
            </div>
            <div class="example right-example">
              <div class="title">建议示范</div>
              <div class="text">
                <div>7．已知xxxx，请问a = ____，b = ____，c = ____。</div>
                <div>
                  【答案】11<span class="right">；</span>56<span class="right"
                    >；</span
                  >100
                </div>
                <div>
                  【答案】<span class="right">1．</span>11
                  <span class="right ml-3">2．</span>56
                  <span class="right ml-3">3．</span>100
                </div>
                <div>
                  【答案】<span class="right">（1）</span>11
                  <span class="right ml-3">（2）</span>56
                  <span class="right ml-3">（3）</span>100
                </div>
              </div>
            </div>
            <div class="example right-example">
              <div class="title">建议示范</div>
              <div class="text">
                <div>7．已知xxxx</div>
                <div>（1）请问a = ____，b = ____</div>
                <div>（2）请问c = ____，d = ____</div>
                <div>
                  【答案】<span class="right">（1）</span>23<span class="right"
                    >；</span
                  >19 <span class="right ml-3">（2）</span>7<span class="right"
                    >；</span
                  >56
                </div>
              </div>
            </div>
            <div class="example wrong-example">
              <div class="title">不建议示范</div>
              <div class="text">
                <div>7．已知xxxx，请问a = ____，b = ____，c = ____。</div>
                <div>
                  【答案】11<span class="wrong">,</span>56<span class="wrong"
                    >,</span
                  >100
                </div>
                <div>
                  【答案】11<span class="wrong">和</span>56<span class="wrong"
                    >和</span
                  >100
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="填空题的答案数量">
          <div class="section">
            <div class="header">
              <div class="main">
                <div>
                  系统默认会根据题干中下划线<span class="right">___</span
                  >的数量推测出答案的期望数量，如果下划线隐藏在图片中，可能会推测失败。
                </div>
                <div>这时可以增加【答案数量】说明答案的期望数量。</div>
              </div>
            </div>
            <div class="example right-example">
              <div class="title">建议示范</div>
              <div class="text">
                <img
                  src="https://english-1313840333.cos.ap-guangzhou.myqcloud.com/admin/20250821122316089.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="常见问题解决">
          <el-tabs>
            <el-tab-pane label="英语的任务型阅读">
              <img
                src="https://english-1313840333.cos.ap-guangzhou.myqcloud.com/admin/Snipaste_2025-08-21_17-06-23.png"
                alt=""
              />
            </el-tab-pane>
            <el-tab-pane label="未加[结束]">
              <img
                src="https://english-1313840333.cos.ap-guangzhou.myqcloud.com/admin/Snipaste_2025-08-21_19-07-27.png"
                alt=""
              />
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </mj-modal>
</template>

<style lang="scss" scoped>
@mixin column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.question-suggest {
  @include column;
  font-size: 18px;
  .right,
  .wrong {
    font-size: 20px;
    background-color: #ff0;
  }
  .right {
    color: $success-color;
  }
  .wrong {
    color: $error-color;
  }

  .desc-item::before {
    content: '•'; /* 使用圆点字符 */
    margin-right: 8px; /* 调整间距 */
  }
  .section,
  .header,
  .example {
    @include column;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 20px;
    border: 1px solid #333;
  }
  .right-example {
    .title {
      color: $success-color;
    }
  }
  .wrong-example {
    .title {
      color: $error-color;
    }
  }

  img {
    max-width: 100%;
    height: auto;
    border: 1px solid #333;
  }
}
</style>
