<template>
  <div class="pcPages" :style="warpCss">
    <div class="goods-bos" :style="boxCss">
      <div v-for="(item, index) in dataList" :key="index" class="goods-list flex-column-between" :style="goodsCss">
        <img
          class="goods-img"
          :src="item.productImage ? item.productImage : figure"
          alt=""
          :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
        />
        <div v-if="componentData.goodsShow.includes(1)" :style="titleCss" class="itemName">{{ item.itemName || '' }}</div>
        <div class="flex-row-between">
          <div>
            <span v-if="componentData.goodsShow.includes(2)" class="memberPrice" :style="{ color: componentData.priceColor }"
              >¥{{ item.memberPrice }}</span
            >
            <span v-if="componentData.goodsShow.includes(3)" class="marketPrice">¥{{ item.marketPrice }}</span>
          </div>
          <template v-if="componentData.btnShow">
            <div v-if="componentData.btnStyle == 1" :style="btnCss1" class="btn1">{{ componentData.btnText }}</div>
            <div v-if="componentData.btnStyle == 2" :style="btnCss2" class="btn2 flex-row-center">
              <el-icon size="14"><Plus /></el-icon>
            </div>
            <div v-if="componentData.btnStyle == 3" :style="btnCss2" class="btn2 flex-row-center">
              <icon name="iconfont icongouwuche" size="14px" />
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import figure from '@/assets/images/figure.png';
import usePcdiyStore from '@/store/modules/pcdiy';
import { listBase } from '@/api/pmsProduct/base';
const diyStore = usePcdiyStore();

const props = defineProps<{
   index: number; // 确保声明 index 为可选属性
  row?: any;
}>();
const componentData = props.row ? props.row : diyStore.componentList[props.index];
const dataList = ref<any>([{}, {}, {}, {}, {}]);

onMounted(() => {
  getDataList();
});

const getDataList = () => {
  dataList.value = [{}, {}, {}, {}, {}];
  //手动选择
  if (componentData.goodsType == 1) {
    if (componentData.goodsIds.length > 0) {
      listBase({ pageNum: 1, pageSize: 20, ids: componentData.goodsIds.join(',') }).then((res) => {
        if (res.code == 200) {
          dataList.value = res.rows;
        }
      });
    }
  } else if (componentData.goodsType == 2) {
    //分类查询
    if (componentData.goodsClassify) {
      listBase({
        pageNum: 1,
        pageSize: componentData.goodsNumber == 0 ? 50 : componentData.goodsNumber,
        topCategoryId: componentData.topCategoryId,
        mediumCategoryId: componentData.mediumCategoryId,
        bottomCategoryId: componentData.bottomCategoryId
      }).then((res) => {
        if (res.code == 200) {
          dataList.value = res.rows;
        }
      });
    }
  } else if (componentData.goodsType == 3) {
    //品牌查询
    if (componentData.goodsBrand) {
      listBase({
        pageNum: 1,
        pageSize: componentData.goodsNumber == 0 ? 50 : componentData.goodsNumber,
        brandId: componentData.goodsBrand
      }).then((res) => {
        if (res.code == 200) {
          dataList.value = res.rows;
        }
      });
    }
  }
};

watch(
  () => componentData.goodsType,
  () => {
    getDataList();
  }
);

watch(
  () => componentData.goodsClassify,
  () => {
    getDataList();
  }
);

watch(
  () => componentData.goodsNumber,
  () => {
    getDataList();
  }
);

watch(
  () => componentData.goodsBrand,
  () => {
    getDataList();
  }
);

watch(
  () => componentData.goodsIds,
  () => {
    getDataList();
  },
  { deep: true } // 5. 数组变化需要 deep 监听
);

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.componentBgUrl) {
    style += `background-image:url('${componentData.componentBgUrl}');`;
    style += 'background-size: cover;background-repeat: no-repeat;';
  }
  //边距
  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.topRounded) style += 'border-top-left-radius:' + componentData.topRounded + 'px;';
  if (componentData.topRounded) style += 'border-top-right-radius:' + componentData.topRounded + 'px;';
  if (componentData.bottomRounded) style += 'border-bottom-left-radius:' + componentData.bottomRounded + 'px;';
  if (componentData.bottomRounded) style += 'border-bottom-right-radius:' + componentData.bottomRounded + 'px;';

  return style;
});

//组件样式
const boxCss = computed(() => {
  let style = '';
  if (componentData.componentStartBgColor && componentData.componentEndBgColor)
    style += `background:linear-gradient(${componentData.componentGradientAngle},${componentData.componentStartBgColor},${componentData.componentEndBgColor});`;
  else if (componentData.componentStartBgColor) style += 'background-color:' + componentData.componentStartBgColor + ';';
  else if (componentData.componentEndBgColor) style += 'background-color:' + componentData.componentEndBgColor + ';';

  if (componentData.styleType == 1) style += 'flex-wrap:wrap' + ';';
  return style;
});

const goodsCss = computed(() => {
  let style = '';
  if (componentData.goodsbackgroundColor) style += 'background-color:' + componentData.goodsbackgroundColor + ';';
  //圆角
  if (componentData.goodstopRounded) style += 'border-top-left-radius:' + componentData.goodstopRounded + 'px;';
  if (componentData.goodstopRounded) style += 'border-top-right-radius:' + componentData.goodstopRounded + 'px;';
  if (componentData.goodsbottomRounded) style += 'border-bottom-left-radius:' + componentData.goodsbottomRounded + 'px;';
  if (componentData.goodsbottomRounded) style += 'border-bottom-right-radius:' + componentData.goodsbottomRounded + 'px;';
  return style;
});

const titleCss = computed(() => {
  let style = '';
  if (componentData.goodsTitleColor) style += 'color:' + componentData.goodsTitleColor + ';';
  if (componentData.goodsTitleType == 1) style += 'font-weight:bold' + ';';
  if (componentData.goodsTitleType == 3) {
    style += 'display: -webkit-box' + ';';
    style += '-webkit-line-clamp: 2' + ';';
    style += 'line-clamp: 2' + ';';
    style += '-webkit-box-orient: vertical' + ';';
  } else {
    style += 'white-space:nowrap' + ';';
  }
  return style;
});

const btnCss1 = computed(() => {
  let style = '';
  if (componentData.btnbackgroundColor) style += 'background-color:' + componentData.btnbackgroundColor + ';';
  if (componentData.btnColor) style += 'color:' + componentData.btnColor + ';';
  return style;
});

const btnCss2 = computed(() => {
  let style = '';
  if (componentData.btnbackgroundColor) style += 'color:' + componentData.btnbackgroundColor + ';';
  if (componentData.btnbackgroundColor) style += 'border-color:' + componentData.btnbackgroundColor + ';';
  return style;
});
</script>

<style lang="scss" scoped>
.pcPages {
  width: 1200px;
  margin: 0 auto;
  .goods-bos {
    display: flex;
    gap: 10px;
    overflow: auto;
    .goods-list {
      padding: 20px 15px;
      height: 300px;
      width: 0;
      flex: 0 0 calc((100% - 40px) / 5);
      overflow: hidden;
      .goods-img {
        width: 100%;
        height: 180px;
      }
      .itemName {
        font-size: 14px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .memberPrice {
        font-size: 16px;
        font-weight: bold;
      }
      .marketPrice {
        font-size: 12px;
        color: #99a1af;
        line-height: 20px;
        text-decoration-line: line-through;
        text-transform: none;
        margin-left: 6px;
      }

      .btn1 {
        padding: 5px 15px;
        font-size: 12px;
        border-radius: 15px;
      }
      .btn2 {
        color: var(--el-color-primary);
        border: 1px solid var(--el-color-primary);
        height: 26px;
        width: 26px;
        border-radius: 50%;
      }
    }
  }
}
</style>
