<template>
  <view :class="['roadshow-search', tabsRoadshowSearch == 5 && 'roadshow-search-top']">
    <view class="audio-video-content">
      <view style="width: 49%" v-for="item in roadshowPageList" :key="item.Id">
        <RoadshowItem :list="item" @isCollectionHandeler="isCollectionHandeler" />
      </view>
    </view>
    <view v-if="showAudioBox">
      <audioModule :showAudioPop.sync="showAudioPop" />
    </view>
  </view>
</template>

<script>
import { Home } from "@/config/api";
import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
import audioModule from "@/components/audioModule/index";

export default {
  props: {
    roadshowPageList: {
      type: Array,
      default: [],
      required: true,
    },
    tabsRoadshowSearch: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      showAudioPop: false,
    };
  },
  computed: {
    showAudioBox() {
      return this.$store.state.audioBg.parseIntShow;
    },
  },
  components: { RoadshowItem, audioModule },
  methods: {
    // 微路演收藏
    async isCollectionHandeler(item) {
      await this.$store.dispatch("showLoginModal");
      const res = await Home.microRoadshowCollect({
        SourceId: item.SourceId,
        SourceType: item.Type,
        PageRouter: this.$store.state.pageRouterReport,
      });
      if (res.Ret === 200) {
        let index = this.roadshowPageList.findIndex((key) => key.SourceId == item.SourceId && key.Type == item.Type);

        res.Data.Status == 1 ? (this.$parent.roadshowPageList[index].IsCollect = true) : (this.$parent.roadshowPageList[index].IsCollect = false);
        uni.showToast({
          title: res.Msg,
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.roadshow-search {
  padding: 35rpx 12rpx;
  .audio-video-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.roadshow-search-top {
  padding-top: 90rpx !important;
}
</style>