<template>
  <view class="volume-box" v-if="itemList.length">
    <swiper
      class="swiper"
      circular
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      previous-margin="45rpx"
      next-margin="45rpx"
      @change="changeCard"
    >
      <swiper-item v-for="(item, index) in itemList" :key="item.id" @click="openProject(item)">
        <view
          class="swiper-item flex items-center justify-center"
          :class="['card-item', currentCardIndex === index ? 'card-item-current' : 'card-item-default']"
          style="transition: all 0.3s"
        >
          {{ item.name }}
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
  data() {
    return {
      autoplay: false,
      interval: 2000,
      duration: 500,
      itemList: [],
      currentCardIndex: 0,
    };
  },
  watch: {
    projects(val) {
      this.itemList = val;
      this.itemList.forEach(item => {
        item.showBorder = false;
        item.showSubBorder = false;
        item.showTopBorder = false;
      });
      console.log('this.itemList: ', this.itemList);
    },
  },
  computed: {
    ...mapState('user', ['user']),
    ...mapState('project', ['projects']),
    ...mapGetters('user', ['userId']),
  },
  mounted() {
    this.$nextTick(function () {
      this.itemList = this.projects;
      this.itemList.forEach(item => {
        item.showBorder = false;
        item.showSubBorder = false;
        item.showTopBorder = false;
      });
    });
  },
  methods: {
    ...mapMutations('carbasics', ['setGlobalData']),
    ...mapMutations('task', ['setPermanents', 'setDailyTasks']),
    changeCard(e) {
      this.currentCardIndex = e.detail.current;
    },
    // 打开项目详情
    openProject(project) {
      const { name, id, url, templateCode } = project;
      url && (uni.$t.domain = url);
      if (templateCode === 'carbasics') {
        // 跳转项目时,清空当前的插件缓存
        this.setGlobalData({});
        this.setPermanents(null);
        this.setDailyTasks(null);
        uni.navigateTo({ url: `/pages/task-page/task-page?u=${this.userId}&p=${id}&pname=${name}&url=${encodeURIComponent(url)}` });
      } else {
        this.$u.route('pages/project-webview/project-webview', {
          u: this.userId,
          p: id,
          pname: name,
          url: encodeURIComponent(url),
        });
      }
    },
  },
};
</script>
<style scoped>
.card-item-default {
  transform: scale(0.96, 0.96) translateY(8.5rpx);
}
.swiper {
  height: 240rpx;
  /* background: rgba(255, 255, 255, 0); */
}
.swiper-item {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  border-radius: 8rpx;
  height: 100%;
  width: 100%;
  background: url('https://www.tall.wiki/gateway/carbasics/v4.0/uploads/project.png');
  background-size: 100% 100%;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */
}
.volume-box {
  width: 700rpx;
  height: 120px;
  margin: 25rpx;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  border-radius: 8rpx;
  /* overflow: hidden; */
  /* background: #f9fafb; */
  /* padding: 32rpx; */
}
</style>
