<!-- 会话默认对话组件 -->
<script setup lang="ts">
import { ref } from 'vue'
import type { Props } from './index.d'
import DefaultImage from '@/assets/images/conversation/default_img.png'
import TestImg from '@/assets/images/a1.png'
import { SvgIcon } from '@/components/SvgIcon'
import { AppContentDefaultBox } from '@/components/AppContentDefaultBox'
import { AppDefaultLead } from '@/components/AppDefaultLead'
import { AppModelSelect } from '@/components/AppModelSelect'
import { AppTopPicks } from '@/components/AppTopPicks'
import type { TopPickItem } from '@/components/AppTopPicks/index.d'
import { AppPicture } from '@/components/AppPicture'
import type { PictureType } from '@/components/AppPicture/index.d'
import { getAppList, getRole } from '@/api/base/role'

withDefaults(defineProps<Props>(), {
  height: '100%',
})

const leadData = {
  title: '你好，我是青鸟语言大模型-同聪~',
  subTitles: [
    '我可以自由的跟你对话～陪你聊天～帮你想方案～答疑解惑。',
    '你可以试着问我',
  ],
  image: DefaultImage,
}

const topPickList = ref<TopPickItem[]>([
  {
    id: '1',
    label: '写一首赞美祖国的诗',
  },
  {
    id: '2',
    label: '帮我指定一个路旅游计划',
  },
  {
    id: '3',
    label: 'AI会代替人类工作吗？',
  },
  {
    id: '4',
    label: '历史上的今天发生了什么？',
  },
  {
    id: '5',
    label: '红烧牛肉的做法',
  },
])

const roleList = ref<PictureType[]>([])
const applyList = ref<PictureType[]>([])

// 角色
function getRoleData() {
  getRole(1).then((res) => {
    roleList.value = res
  })
}

// 应用
function getAppData() {
  getAppList().then((res) => {
    applyList.value = res[0].roleInfoAppModelList
  })
}

getRoleData()
getAppData()
</script>

<template>
  <AppContentDefaultBox class="content-default-style">
    <AppModelSelect></AppModelSelect>
    <AppDefaultLead
      class="mt-20"
      :title="leadData.title"
      :sub-titles="leadData.subTitles"
      :image="leadData.image"
    ></AppDefaultLead>
    <AppTopPicks class="pl-20 mt-10" :list="topPickList"></AppTopPicks>

    <div class="pl-20 mt-10 flex justify-between items-end">
      <div class="category-box">
        <div class="top flex items-center">
          <p class="title">
            常用角色
          </p>
          <p class="sub-title truncate">
            我会转换为不同的角色跟你对话
          </p>
          <SvgIcon class="icon" name="more"></SvgIcon>
        </div>
        <div class="picture-box flex">
          <AppPicture
            v-for="(item, index) in roleList"
            :key="index"
            class="picture-item-role"
            :name="item.roleName"
            :image="item.roleImg"
          ></AppPicture>
        </div>
      </div>
      <div class="category-box">
        <div class="top flex items-center">
          <p class="title">
            热门应用
          </p>
          <p class="sub-title truncate">
            这里或许有你想要的好东西
          </p>
          <SvgIcon class="icon" name="more"></SvgIcon>
        </div>
        <div class="picture-box flex">
          <AppPicture
            v-for="(item, index) in applyList"
            :key="index"
            class="picture-item"
            :name="item.roleName"
            :image="item.roleImg"
            type="entire"
          ></AppPicture>
        </div>
      </div>
    </div>
  </AppContentDefaultBox>
</template>

<style lang="scss" scoped>
.content-default-style {
  height: v-bind(height);
  overflow-y: auto;
}

.category-box {
  width: calc(50% - 10px);
  padding: 15px 20px;
  background-color: #edf3ff;
  border-radius: 8px;
  .top {
    position: relative;
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 0;
    }
    .sub-title {
      color: #6d7278;
      margin-left: 30px;
      margin-bottom: 0;
    }
    .icon {
      width: 45px;
      height: 18px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 6px;
    }
  }
  .picture-box {
    margin-top: 20px;
    .picture-item-role {
      margin-left: -10px;
    }
    .picture-item + .picture-item {
      margin-left: 15px;
    }
  }
}
</style>
