<template>
  <div class="bg-secondaryBlue">
    <div class="w-bodySet mx-auto px-28">
      <div class="disadvantages py-16">
        <div :class="myStyle.mainHeader">场景痛点</div>
        <div class="flex flex-row justify-between pt-12">
          <div
            v-for="dis in props.disadvantages"
            :key="dis.id"
            class="px-12"
            :class="getWidth(disadvantages.length)"
          >
            <svg-icon :iconClass="dis.icon" class="h-12 w-12 mx-auto" />
            <div class="text-lg font-semibold text-headerMain pt-4 py-3 text-center">{{ dis.title }}</div>
            <div class="text-sm text-contentMain text-justify leading-6">{{ dis.detail }}</div>
          </div>
        </div>
      </div>
      <div class="framework">
        <div :class="myStyle.mainHeader" class=" pb-8">方案架构</div>
        <svg-icon :iconClass="props.url" width="1124" height="589" class=" mx-auto" />
      </div>
      <div class="advantages bg-secondaryBlue pb-20 pt-11">
        <div :class="myStyle.mainHeader">方案价值</div>
        <div class="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-5 pt-10">
          <div class v-for="i in plans" :key="i.id">
            <div
              class="bg-white border-l-4 border-blue-600 px-12 h-44 hover:shadow-homeCardShadow"
            >
              <div class="pt-12 text-headerMain text-lg font-semibold">{{ i.title }}</div>
              <div class="text-sm text-contentMain text-justify pt-2">{{ i.detail }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Disadvantage, Plan } from "@/context/solution"
import { computed, defineProps, PropType } from "vue";
import myStyle from '@/assets/style/style.module.css'

const props = defineProps({
  disadvantages: {
    type: Array as PropType<Disadvantage[]>,
    required: true
  },
  plans: {
    type: Array as PropType<Plan[]>,
    required: true
  },
  url: {
    type: String,
    required: true
  }
}
)

const getWidth = computed(() => {
  return (w: number) => {
    return 'w-1/' + w
  }
})

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})

</script>