<template>
  <div>
    <template v-if="activeList.length>0">
      <div class="campList" v-for="(item,index) in activeList" :key="index">
        <div @click="toSignUp(item.identity)">
          <el-card>
            <div class="flex list_item">
              <div class="item_img">
                <el-image :src="item.activityCover" fit="cover"/>
              </div>
              <div class="right">
                <div>
                  <div class="item_title">{{item.schoolName}}</div>
                  <div class="item_tag">{{item.activityLabel}}</div>
                  <div class="item_time">活动时间：{{formatYMD(item.activityStartTime)}} 至
                    {{formatYMD(item.activityEndTime)}}
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>

      </div>
    </template>
    <div class="noCamp" v-else>暂无营地</div>
  </div>
</template>

<script>
  import {activity} from "r/base/myInfo";

  export default {
    name: "campList",
    props: {
      typeFu: [String, Number]
    },
    data() {
      return {
        activeList: [],
        type: this.typeFu,
      }
    },

    created() {
      this.getCampList();
    },
    methods: {
      getCampList() {
        activity({
          phone: window.localStorage.getItem('index-phone-all'),
          type: this.type
        }).then((res) => {
          if (res.data.code != 200) {
            return this.$message.error(res.data.message);
          }
          this.activeList = res.data.data;
          console.log(typeof (this.activeList))
        })
      },
      toSignUp(code) {
        console.log(code)
        this.$store.commit('setIndexIdentity', code)
        this.$router.push('/signUp/examInfo?code=' + code)
      }
    },
    watch: {
      typeFu() {
        this.type = this.typeFu;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
  }

  .campList {
    margin: 20px 0;

    ::v-deep .el-card {
      cursor: pointer;

      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        transition: all .5s;
        -webkit-transition: all .5s;

        .el-image__error {
          background-color: #D8D8D8;
        }
      }

      &:hover {
        box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.1);

        .el-image {
          transform: scale(1.1);
          -ms-transform: scale(1.1); /* IE 9 */
          -moz-transform: scale(1.1); /* Firefox */
          -webkit-transform: scale(1.1); /* Safari 和 Chrome */
          -o-transform: scale(1.1);
        }
      }
    }

    .list_item {
      display: flex;
      flex-flow: row;

      .item_img {
        width: 30%;
        margin-right: 10%;
        overflow: hidden;
      }

      .right {
        flex: 1;
        display: flex;
        align-items: center;

        .item_title {
          font-size: 15px;
        }

        .item_tag {
          font-size: 10px;
          background-color: #F2F2F2;
          width: fit-content;
          padding: 3px;
          border-radius: 7px;
          margin: 20px 0;
        }

        .item_time {
          font-size: 13px;
          color: gray;
        }
      }
    }
  }

  .noCamp {
    text-align: center;
    margin-top: 100px;
  }
</style>
