<template>
  <div class="unit-container">
    <div class="unit-content-menu">
      <swiper
        class="swiper unit-swiper"
        :options="unitSwiperOption"
        ref="videoSwiper"
      >
        <swiper-slide
          :class="['slide-item', item.euId == curUnit.euId ? 'active' : '']"
          v-for="(item, index) in exhibitionUnits"
          :key="index"
          @click.native="handleClickUnit(item)"
        >
          {{ item.title }}
        </swiper-slide>
      </swiper>
      <div
        class="swiper-button-prev unit-swiper-button-prev"
        slot="button-prev"
      >
        <i class="el-icon-arrow-left"></i>
      </div>
      <div
        class="swiper-button-next unit-swiper-button-next"
        slot="button-next"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>

    <div class="unit-content">
      <div
        class="unit-content-container"
        v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
        :key="unitTitle"
      >
        <div class="unit-content-title">
          {{ unitTitle }}
        </div>
        <div
          class="text-indent unit-content_intro"
          v-if="curUnit.intro"
          v-html="unitValue.intro"
        ></div>
        <div
          class="unit-content_images"
          v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
        >
          <!-- <div class="imgs-title">单元图片</div> -->
          <div class="unit-imgs">
            <SlideImageGroup
              :imgList="unitValue.imagesVo"
              :needEnlarge="true"
              v-if="unitValue.imagesVo.length > 3"
            >
              <template slot-scope="{ item }" slot="img">
                <img
                  :src="$getFullUrl(item.middleUrl)"
                  alt=""
                  style="width: 100%; height: 100%; object-fit: contain"
                />
              </template>
            </SlideImageGroup>
            <el-row
              v-if="
                unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4
              "
              :gutter="10"
            >
              <el-col
                v-for="(item, index) in unitValue.imagesVo"
                :key="index"
                :span="24 / unitValue.imagesVo.length"
                style="height: 300px"
              >
                <img
                  :src="$getFullUrl(item.middleUrl)"
                  alt=""
                  style="
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    cursor: pointer;
                  "
                  @click="handelPreviewImages(unitValue.imagesVo)"
                />
              </el-col>
            </el-row>
          </div>
        </div>

        <div
          class="unit-content_crs"
          v-if="unitValue.culturalRelics && unitValue.culturalRelics.length > 0"
        >
          <div class="imgs-title">单元文物</div>
          <SlideImageGroup :imgList="unitValue.culturalRelics">
            <template slot-scope="{ item }" slot="img">
              <img
                :src="$getFullUrl(item.faceImageMiddleUrl)"
                alt=""
                style="
                  width: 100%;
                  height: 100%;
                  object-fit: fill;
                  cursor: pointer;
                "
                @click="handleToCr(item)"
              />
            </template>
            <template slot-scope="{ item }" slot="info">
              <div class="name">{{ item.name }}</div>
            </template>
          </SlideImageGroup>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import SlideImageGroup from "@/components/SlideImageGroup";
import "swiper/dist/css/swiper.css";
export default {
  name: "NormalStyleUnit",
  components: {
    swiper,
    swiperSlide,
    SlideImageGroup,
  },
  props: {
    curUnit: {
      type: Object,
      default: null,
    },
    exhibitionUnits: {
      type: Array,
      default: null,
    },
  },

  data() {
    return {
      unitSwiperOption: {
        loop: false,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        slidesPerView: 4,
        navigation: {
          nextEl: ".unit-swiper-button-next",
          prevEl: ".unit-swiper-button-prev",
        },
      },
    };
  },
  updated() {
    let p = document.getElementsByTagName("p");
    let arr = [...p];
    arr.map((item) => {
      item.style.color = "#333";
    });
  },
  methods: {
    handleClickUnit(item) {
      this.$emit("handleClickUnit", item);
    },
    handelPreviewImages(images) {
      this.$emit("handelPreviewImages", images);
    },
    handleToCr(item) {
      this.$emit("handleToCr", item);
    },
  },
};
</script>

<style lang="scss">
.unit-content_intro {
  p {
    // color: red !important;
    // font-family: $defaultFontFamily !important;

    // color: #333 !important;
  }
}
</style>
<style lang="scss" scoped>
.unit-container {
  margin-bottom: 40px;
  position: relative;
}

.unit-content-menu {
  margin-right: 40px;
  padding: 0 20px;
  position: relative;

  .swiper-container {
    width: 90%;

    .slide-item {
      padding: 8px;
      border-radius: 4px;
      color: $deepBlue;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
      border: 1px solid $deepBlue;
    }

    .active {
      background: $deepBlue;
      color: #fff;
    }
  }
}

.swiper-button-next,
.swiper-button-prev {
  // background-color: rgba(0,0,0,0.2);
  // border-radius: 50%;
  background-image: none;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: $deepBlue;
  font-weight: bolder;
  font-size: 28px;
  transform: translateY(-6px);
}

.unit-content {
  flex: 1;
  padding: 60px 40px 0;

  .unit-content-container {
    .unit-content-title {
      font-size: 20px;
      line-height: 2;
      display: flex;
      justify-content: center;
      margin-top: 48px;
    }

    .unit-content_intro {
      font-size: 16px;
      font-weight: 400;
      color: #444444;
      line-height: 36px;
      text-indent: 32px;
      margin-bottom: 20px;
    }

    &:nth-child(1) {
      .unit-content-title {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }

  .unit-content_images {
    position: relative;

    .unit-content_images_container {
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: #f5f5f9;

      .images_img {
        flex: 1;
      }

      .desc {
        display: flex;
        justify-content: center;
        height: 40px;
        align-items: center;
      }
    }
  }

  //单元文物和单元图片公共样式
  .imgs-title {
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: SourceHanSerifCN-Bold;

    i {
      margin: 0 10px;
      font-size: 18px;
    }
  }

  .unit-imgs {
    // height: 300px;
  }

  .unit-content_crs {
    position: relative;

    .el-row {
      .el-col {
        margin-bottom: 10px;

        .img-container {
          background-color: #f5f5f9;
          height: 250px;

          .images_img {
            height: 100%;
            width: 100%;
            position: relative;
            cursor: pointer;
          }
        }
      }
    }

    .desc {
      display: flex;
      justify-content: center;
      padding: 10px;
      align-items: center;
      color: #333;
      font-size: 14px;
    }
  }

  .buttons {
    display: flex;
    justify-content: flex-end;

    .btn {
      display: flex;
      align-content: center;
      padding: 8px 10px;
      // border: 1px solid $deepBlue;
      color: #666;
      cursor: pointer;

      &:hover {
        color: $deepBlue;
      }

      .svg-icon {
        font-size: 22px;
        margin: 0 4px;
      }
    }
  }
}
</style>
