<template>
  <div class="bg-secondaryBlue">
    <div class=" w-8/12 mx-auto">
      <div class="disadvantages py-16">
        <div :class="myStyle.mainHeader">场景痛点</div>
        <div class="flex flex-row justify-around pt-12">
          <div
            v-for="dis in props.disadvantages"
            :key="dis.id"
            :class="getWidth(disadvantages.length)"
            class="px-12"
          >
            <svg-icon :iconClass="dis.icon" class="h-14 w-1/4 mx-auto" />
            <div class="text-lg font-semibold text-gray-800 pt-4 py-3 text-center">{{ dis.title }}</div>
            <div class="text-sm text-gray-500 text-justify">{{ dis.detail }}</div>
          </div>
        </div>
      </div>
      <div class="framework">
        <div :class="myStyle.mainHeader">方案架构</div>
        <img :src="getImgUrl(url)" class=" pt-12" />
      </div>
      <div class="plans pb-20 pt-10">
        <div :class="myStyle.mainHeader">方案价值</div>
        <div class=" grid gap-y-10 gap-x-16 grid-cols-2 pt-8">
          <div class="" v-for="i in plans" :key="i.id">
            <div class="bg-white border-l-4 border-mainBlue px-6 h-36 shadow-lg">
              <div class="pt-8 text-gray-800 text-lg font-semibold">{{ i.title }}</div>
              <div class="text-sm text-gray-400 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>