<!-- 外部情报 -->
<script setup lang="tsx">
import AppBlock from '@/components/AppBlock.vue'
import Layout from './components/Layout.vue'
import OverviewBlock from './OverviewBlock.vue'
import { getImg } from './images'
import { useData } from './OverviewData'
import { getBannerList, report } from '@/api/daikin/base'
const { data1, data2, data3, data4, data5, data6, data7 } = useData()

// console.log(data.value)
const swipeActiveIndex = ref(0)
function handleIndex(x: any) {
  swipeActiveIndex.value = x.realIndex
}

async function getBanner() {
  // 类型 1-社外 2-社内
  const { data } = await getBannerList({ type: 1 })
  const { data: da } = await getBannerList({ type: 2 })
  if (data && data != 'null' && data.length > 0) {
    imageList1.value = data
  }
  if (da && da != 'null' && da.length > 0) {
    imageList2.value = da
  }
}
getBanner()
report({ moduleCode: 'App_Article' })
const imageList1 = ref([
  { title: '三菱电机FY22年度方针说明会', bannerImg: getImg('swipe-1.svg'), id: 0 },
  { title: '23年度供应商大会热烈筹备中', bannerImg: getImg('swipe-2.svg'), id: 0 }
])
const imageList2 = ref([
  { title: '三菱电机FY22年度方针说明会', bannerImg: getImg('swipe-1.svg'), id: 0 },
  { title: '23年度供应商大会热烈筹备中', bannerImg: getImg('swipe-2.svg'), id: 0 }
])

const swipeImages = [
  { title: '三菱电机FY22年度方针说明会', bannerImg: getImg('swipe-1.svg') },
  { title: '23年度供应商大会热烈筹备中', bannerImg: getImg('swipe-2.svg') }
]
const items1 = computed(() => [
  {
    key: '1',
    name: '外部环境',
    color: '#63BFB2',
    title: '全年原材料供应状况紧张',
    icon: getImg('icon-1.svg'),
    news: unref(data1), //.splice(0, 3),
    list: unref(data7)[1] ?? []
  },
  {
    key: '2',
    name: '竞争对手',
    color: '#F57E6E',
    title: '三菱召开年度方针说明会',
    icon: getImg('icon-2.svg'),
    news: unref(data2), //.splice(0, 3),
    list: unref(data7)[2] ?? []
  },
  {
    key: '3',
    name: '供方动向',
    color: '#537DEB',
    title: '全年原材料供应状况紧张',
    icon: getImg('icon-3.svg'),
    news: unref(data3), //.splice(0, 3),
    list: unref(data7)[3] ?? []
  }
])
const items2 = computed(() => [
  {
    key: '4',
    name: '大金集团',
    color: '#5DCCFA',
    title: '23年度集团方针正式发行',
    icon: getImg('icon-4.svg'),
    news: unref(data4), //.splice(0, 3),
    list: unref(data7)[4] ?? []
  },
  {
    key: '5',
    name: '中国据点',
    color: '#E8A743',
    title: '惠州工厂稼动正式开始',
    icon: getImg('icon-6.svg'),
    news: unref(data5), //.splice(0, 3),
    list: unref(data7)[5] ?? []
  },
  {
    key: '6',
    name: '调达本部',
    color: '#926CE1',
    title: '23年度供应商大会热烈筹备中',
    icon: getImg('icon-5.svg'),
    news: unref(data6), //.splice(0, 3),
    list: unref(data7)[6] ?? []
  }
])
</script>

<template>
  <Layout>
    <div class="flex w-full h-full gap-30px">
      <AppBlock class="flex-1 box">
        <div class="box-title">社外</div>
        <OverviewBlock
          route="IntelligenceOutside"
          :swipImgs="imageList1"
          :items="items1"
          routets="outside"
        />
      </AppBlock>
      <AppBlock class="flex-1 box">
        <div class="box-title">社内</div>
        <OverviewBlock
          route="IntelligenceWithin"
          routets="within"
          :swipImgs="imageList2"
          :items="items2"
        />
      </AppBlock>
    </div>
  </Layout>
</template>

<style scoped lang="less">
.box {
  padding: 23px 45px 0 45px;
  .box-title {
    font-size: 28px;
    font-weight: 600;
    position: relative;
    padding-left: 24px;
    &::before {
      content: ' ';
      display: block;
      width: 8px;
      height: 30px;
      background-color: #003ab5;

      position: absolute;
      left: 0;
    }
  }
}
</style>
