<!-- 产品列表 -->
<script lang="ts" setup>
import { AiAnswerProvideKey } from '../../../../type'

interface Props {
  data: any
}
const props = defineProps<Props>()
const emits = defineEmits(['onClickBoxProductItem'])
const animated = inject(AiAnswerProvideKey)?.animated
const productCode = inject(AiAnswerProvideKey)?.productCode

const productList = computed(() => props.data?.content?.productList || [])
const activeCode = ref('')

function onClickItem(item: any) {
  if (activeCode.value)
    return
  activeCode.value = item.productCode
  emits('onClickBoxProductItem', item)
}

watch(() => productCode?.value, (val) => {
  activeCode.value = val as string
}, {
  immediate: true,
  deep: true,
})
</script>

<template>
  <div class="attachment-box-wrap" :class="{ 'animate__animated animate__fadeIn': animated }">
    <div v-for="(item, index) in productList" :key="index" class="attachment-box-item" :class="{ active: activeCode === item.productCode }" @click="onClickItem(item)">
      <span>{{ item.productName }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.attachment-box-wrap {
  // margin-top: 12px;
  .attachment-box-item {
    width: 305px;
    // height: 32px;
    background: #f6fcff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 16px;
    margin-bottom: 8px;
    border: 1px solid #f6fcff;

    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #393d46;
    line-height: 20px;
    text-align: justify;
    font-style: normal;
    > span {
      display: flex;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    &:last-child {
      margin-bottom: 0;
    }
    &.active {
      border: 1px solid rgba(41, 182, 253, 0.3);
      background: #f6fcff;
      color: #29b6fd;
    }
  }
}
</style>
