<template>
  <div class="pcPages" :style="warpCss" :class="['position' + componentData.position, 'styleType' + componentData.styleType]">
    <el-carousel arrow="always" :interval="componentData.interval" :height="componentData.imageHeight + 'px'" class="carousel-bos" :style="boxCss">
      <el-carousel-item v-for="(item, index) in componentData.imagelList" :key="index" class="carousel-item">
        <el-image
          class="img"
          :src="item.imageUrl ? item.imageUrl : figure"
          :fit="item.imageUrl ? (item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover') : 'cover'"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  row?: any;
}
const props = defineProps<Props>();
const componentData = props.row || {};
document.documentElement.style.setProperty('--carousel-color2', componentData.carouselStyleColor ? componentData.carouselStyleColor : '#ffffff');
import figure from '@/assets/images/figure.png';

const warpCss = computed(() => {
  let style = '';
  style += 'position:relative;';
  //背景颜色
  if (componentData.pageStartBgColor) {
    if (componentData.pageStartBgColor && componentData.pageEndBgColor)
      style += `background:linear-gradient(${componentData.pageGradientAngle},${componentData.pageStartBgColor},${componentData.pageEndBgColor});`;
    else if (componentData.pageStartBgColor) style += `background: ${componentData.pageStartBgColor};`;
    else if (componentData.pageEndBgColor) style += `background: ${componentData.pageEndBgColor};`;
  }
  //边距
  if (componentData.padding) {
    if (componentData.padding.top > 0) {
      style += 'padding-top:' + componentData.padding.top + 'px' + ';';
    }
    if (componentData.padding.bottom > 0) {
      style += 'padding-bottom:' + componentData.padding.bottom + 'px' + ';';
    }
    style += 'padding-right:' + componentData.padding.both + 'px' + ';';
    style += 'padding-left:' + componentData.padding.both + 'px' + ';';
  }
  //间距
  if (componentData.margin) {
    if (componentData.margin.top > 0) {
      style += 'margin-top:' + componentData.margin.top + 'px' + ';';
    }
    if (componentData.margin.bottom > 0) {
      style += 'margin-bottom:' + componentData.margin.bottom + 'px' + ';';
    }
  }

  return style;
});

//组件样式
const boxCss = computed(() => {
  let style = '';
  //圆角
  if (componentData.imageRadius) style += 'border-radius:' + componentData.imageRadius + 'px;';
  return style;
});

watch(
  () => componentData.carouselStyleColor,
  () => {
    document.documentElement.style.setProperty('--carousel-color2', componentData.carouselStyleColor ? componentData.carouselStyleColor : '#ffffff');
  }
);
</script>

<style lang="scss" scoped>
.pcPages {
  width: 1200px;
  margin: 0 auto;

  .carousel-bos {
    width: 100%;
    overflow: hidden;

    .carousel-item {
      width: 100%;
      height: 100%;

      .img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
  }

  &.position1 {
    :deep(.el-carousel__indicators--horizontal) {
      left: 5%;
    }
  }
  &.position2 {
    :deep(.el-carousel__indicators--horizontal) {
      left: 50%;
    }
  }
  &.position3 {
    :deep(.el-carousel__indicators--horizontal) {
      left: 95%;
    }
  }
  &.styleType2 {
    :deep(.el-carousel__button) {
      height: 10px;
      width: 10px;
      border-radius: 10px;
    }
  }
  :deep(.el-carousel__button) {
    background-color: var(--carousel-color2);
  }
}
</style>
