<script lang="ts" setup>
import { fetchMessageConfig, fetchRecommendQuestionList } from '@/api/config'
import { ref, onMounted } from 'vue'

const emits = defineEmits(['onClickRQuestion'])

// 欢迎语
const welcomeMessage = ref({
  messageTitle: '',
  messageContent: ''
})

async function getWelcomeMessage() {
  const res = await fetchMessageConfig('01')
  if (res.data) {
    welcomeMessage.value = res.data
  }
}

// 推荐问题
const rQuestionListAll = ref<RQuestionItem[]>([]) // 全部问题
const rQuestionList = ref<RQuestionItem[]>([]) // 随机问题

interface RQuestionItem {
  questionTitle: string
  questionContent: string
  questionIcon: string
}

async function getRecommendQuestionList() {
  const res = await fetchRecommendQuestionList()
  if (res.data) {
    rQuestionListAll.value = res.data
    refresh()
  }
}

// 随机3个推荐问题
function randomRecQuestion(arr: RQuestionItem[], num: number) {
  return arr.sort(function() {
    return Math.random() - 0.5
  }).slice(0, num)
}

// 推荐问题提问
function rQuestionSelect(question: string) {
  emits('onClickRQuestion', question)
}

function refresh() {
  rQuestionList.value = randomRecQuestion(rQuestionListAll.value, 3)
}

onMounted(() => {
  getWelcomeMessage()
  getRecommendQuestionList()
})

</script>

<template>
  <div class="cps-chat-init-container">
    <div class="welcome">
      <div class="title">
        <!-- <div>您好，我是得宝～</div> -->
        {{ welcomeMessage.messageTitle }}
      </div>
      <div class="desc">
        <!-- <div>做为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</div> -->
        {{ welcomeMessage.messageContent }}
      </div>
      <img class="robot" src="../../../assets/images/sdream/robot.png" alt="">
    </div>
    <div class="example-box">
      <div class="op">
        <div class="l-i">您可以试着问我：</div>
        <div class="r-i" @click="getRecommendQuestionList">
          <img src="./images/refresh.png" alt="">
          <span>换一换</span>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in rQuestionList" :key="index">
          <div @click="rQuestionSelect(item.questionContent)" class="item" >
            <div class="title">
              <img :src="item.questionIcon" alt="">
            </div>
            <div>
              <div class="s-title">
                {{ item.questionTitle }}
              </div>
              <div class="content">{{ item.questionContent }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cps-chat-init-container {
  padding: 36px 23px 0;
  .welcome {
    // width: 343px;
    background: linear-gradient( 180deg, #F4FAFF 0%, #FFFFFF 100%), radial-gradient( 226% 103% at 104% -15%, rgba(182,255,247,0.8) 0%, rgba(187,243,251,0.45) 49%, rgba(193,227,255,0) 100%);
    box-shadow: 0px 2px 4px 0px rgba(236,242,248,0.3);
    border-radius: 0px 16px 16px 16px;
    border: 1px solid #FFFFFF;
    padding: 24px 14px 14px;
    margin-bottom: 12px;
    position: relative;
    .title {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 12px;
      color: white;
      background: linear-gradient(180deg, #2BB9FF 0%, #0A79D5 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      font-weight: bolder;
      font-weight: 500;
    }
    .desc {
      font-size: 14px;
      line-height: 22px;
      color: #27353C;
      z-index: 2;
      position: relative;
    }
    .robot {
      top: -24px;
      right: 12px;
      position: absolute;
      width: 140px;
      height: 100px;
      display: block;
      z-index: 1;
    }
  }
  .example-box {
    background: #FFFFFF;
    border-radius: 0px 16px 16px 16px;
    padding: 12px;
    .op {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      .l-i {
        font-size: 15px;
        color: #888E93;
        line-height: 21px;
      }
      .r-i {
        padding: 2px 8px;
        // background: rgba(21,189,165,0.06);
        border-radius: 12px;
        display: flex;
        margin-top: 2px;
        img {
          width: 12px;
          height: 12px;
          display: block;
          margin: 1px 4px 0 0;
        }
        span {
          font-size: 12px;
          color: #29B6FD;
          line-height: 16px;
          display: block;
        }
      }
    }
    .list {
      .item {
        background: linear-gradient( 117deg, #FBFDFF 0%, #F6FCFF 100%);
        border-radius: 12px;
        padding: 11px 12px;
        margin-bottom: 8px;
        display: flex;
        .title {
          display: flex;
          margin-bottom: 4px;
          img {
            width: 44px;
            height: 44px;
            display: block;
            margin-right: 12px;
          }
        }
        .s-title {
          font-weight: 500;
          font-size: 14px;
          line-height: 20px;
          color: #27353C;
          margin-bottom: 4px;
        }
        .content {
          font-size: 12px;
          color: #ABB1B8;
          line-height: 18px;
        }
      }
    }
  }
}
</style>
