<script setup>
import {  onMounted,  ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast, Field, CellGroup } from "vant";
import { RaiApi } from "@/api/htgj/api.js";
import topbar from "./topbar.vue";

const quizMessage = ref("");
const articleId = ref(null)
const route = useRoute()
const router = useRouter()
const submitQuiz =async () => {
    if(!quizMessage.value) return Toast("请输入内容")
    const res = await RaiApi.askAdd({
        ArticleId:Number(articleId.value),
        Content:quizMessage.value
    })
    if(res.Ret === 200) {
        Toast("提交成功")
        setTimeout(() => {
            router.back()
        })
    }else {
       Toast(res.Msg)
    }
}
onMounted(()=>{
    articleId.value =route.query.id
})
</script>

<template>
  <div class="container-quiz">
    <topbar class="top-box-bar" showText="弘则研究" />
    <CellGroup inset>
      <Field v-model="quizMessage" type="textarea" maxlength="100" placeholder="请描述您的问题，销售会跟进问题，后期在线下为您解答" show-word-limit />
    </CellGroup>
    <div class="submit" @click="submitQuiz">提交</div>
  </div>
</template>

<style lang="scss" scoped>
.container-quiz {
  .van-cell-group {
    margin-top: 40px;
    height: 420px;
    border: 1px solid #d0cfd5;
  }
  :deep(.van-field__control--min-height) {
    height: 350px !important;
  }
  .submit {
    margin: 0 auto;
    width: 368px;
    height: 80px;
    background: linear-gradient(268deg, #2ddbff 0%, #1599ff 49%, #005eff 100%);
    border-radius: 4px;
    line-height: 80px;
    font-size: 34px;
    color: #fff;
    text-align: center;
    margin-top: 300px;
  }
}
</style>
