<script setup lang="ts">
import { PropType, ref, toRefs } from 'vue';
import { Resolution, useHome, WebStyleType } from '../../hooks/useHome';

const { getResolution, getWebStyle } = useHome();
const resolution = getResolution;
const webStyle = getWebStyle();
const props = defineProps({
  data: {
    type: Object as PropType<any>,
    required: true,
    default: () => {
      return {};
    },
  },
});
const { data } = toRefs(props);
const productImg = ref('');
let picData: any = data?.value;
let hostName = picData.ProductName;
let otherName = picData.ProductAlias ? ` (${picData.ProductAlias})` : null;
const ptcInfo = localStorage.getItem('ptc');
const ptcInfoJson = JSON.parse(ptcInfo as string);
if (ptcInfoJson && ptcInfoJson.model) {
  productImg.value = ptcInfoJson.model;
} else {
  productImg.value = `/extern/custom/${picData.ProductImage}.png`;
}

function errorImg() {
  productImg.value = `theme/custom/bmcimg/product/${picData.ProductImage}.png`;
}
</script>

<template>
  <template v-if="!webStyle || webStyle === WebStyleType.DEFAULT">
    <div class="mid-picture inline-wrapper">
      <div class="default-style dashboard-overview-pic">
        <div class="server-name">
          <div>
            <!-- 主机名 -->
            <span id="homeProductName">{{ hostName }}</span>
            <!-- 产品有别名时 -->
            <span id="homeProductAlias">{{ otherName }}</span>
          </div>

          <div class="server-pic">
            <img
              id="homeProductImage"
            :src="productImg"
              :title="$t('HOME_PRODUCT_TIP')"
              @error="errorImg()"
            />
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.STANDARD">
    <div class="standard-style dashboard-overview-pic">
      <div class="server-name">
        <div class="server-pic">
          <img
            id="homeProductImage"
            :src="productImg"
            :title="$t('HOME_PRODUCT_TIP')"
            @error="errorImg()"
          />
        </div>
        <div class="product-name">
          <!-- 主机名 -->
          <span id="homeProductName">{{ hostName }}</span>
          <!-- 产品有别名时 -->
          <span id="homeProductAlias">{{ otherName }}</span>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.IBMA">
    <div class="ibma-style dashboard-overview-pic">
      <div class="server-pic">
        <img
          id="homeProductImage"
          :src="productImg"
          :title="$t('HOME_PRODUCT_TIP')"
          @error="errorImg()"
        />
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.SIMPLE">
    <div class="simple-style dashboard-overview-pic">
      <div class="server-pic">
        <img
          id="homeProductImage"
          :src="productImg"
          :title="$t('HOME_PRODUCT_TIP')"
          @error="errorImg()"
        />
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.BEAUTIFUL">
    <div class="beautiful-style dashboard-overview-pic">
      <div class="server-pic">
        <img
          id="homeProductImage"
          :src="productImg"
          :title="$t('HOME_PRODUCT_TIP')"
          @error="errorImg()"
        />
      </div>
    </div>
  </template>
</template>

<style lang="scss" scoped>
.dashboard-overview-pic {
}
.inline-wrapper {
  display: inline-flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.mid-container {
  margin-left: 16px;
  margin-right: 16px;
  z-index: 1;
}
.default-style {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 12px;
  .server-name {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .server-pic {
      flex: 1;
      display: flex;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      img { 
        margin-top: -42.5px !important;
        width: 400px;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

#homeProductImage {
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}

.standard-style {
  width: 100% !important;
  .server-name {
    width: 100%;
    height: 300px;
    .server-pic {
      background: #ebeff6;
      border-radius: 4px;
      margin-left: 0px;
      img {
        width: 100%;
      }
    }
    .product-name {
      font-size: 20px;
      letter-spacing: 0;
      line-height: 30px;
      margin-top: 22px;
      float: left;
      padding-right: 100px;
    }
  }
}

.ibma-style {
  width: 400px;
  display: flex;
  justify-content: center;
  padding: 12px;
  .server-pic {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: -24px;
    overflow: hidden;
    padding: 12px;
    img {
      width: 100%;
    }
  }
}

.simple-style {
  box-sizing: border-box;
  width: 400px;
  display: flex;
  justify-content: center;
  .server-pic {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: -24px;
    overflow: hidden;
    padding: 12px;
    img {
      width: 100%;
    }
  }
}

.beautiful-style {
  width: 400px;
  display: flex;
  justify-content: center;
  .server-pic {    
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: -24px;
    overflow: hidden;
    padding: 12px;
    img {
      width: 100%;
    }
  }
}
</style>
