<template>
  <div :class="$style.wrapper">
    <div :class="$style.list">
      <div v-for="(item, index) in items" :key="index" :class="[$style.item,'item-link']" @click="() => { if(type == 'propose'){ $router.push(`/mypage/propose/detail/${item.id}`) }else if(type == 'proposed'){ $router.push(`/mypage/proposed/${item.id}` ) } }">
        <ProposeProject :type="type" :item="item" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'propose'
    },
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style module lang="scss">

.item:nth-child(even) {
  /* background-color: #f8f7fe; */
}

.item {
  position: relative;
}
.item:before,
.item:after {
  width: 2.4rem;
  height: 2.4rem;
  content: "";
  background-position: center 0.55em;
  background-repeat: no-repeat;
  background-size: 1rem auto;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3rem;
  border: 1px #969698 solid;
  border-radius: 50%;
  cursor: pointer;
}
.item:before {
  background-image: url("~assets/images/shared/arrow-next-short.svg");
}
.item:after {
  background-image: url("~assets/images/shared/arrow-next-short-white.svg");
  display: none;
}
.item.-arrownone:before,
.item.-arrownone:after {
  display: none;
}

@include mq-pc {
  .list {
    margin: -3rem;
  }
  .item {
    padding: 2.5rem 7.5rem 3rem 3rem;
  }
  .item.-arrownone {
    padding: 2.5rem 3rem 3rem 3rem;
  }
  .item:hover:before {
    display: none;
  }
  .item:hover:after {
    background-color: #2f2f33;
    border: 1px #2f2f33 solid;
    display: block;
  }
}

@include mq-sp {
    .item {
    border-bottom: unset;
    &:last-child{
      .texts{
        border-bottom: unset;
        margin-bottom: 0;
      }
    }
  }
  .item:before {
    display: none;
  }
  .item:after {
    display: none;
  }
}

  /* @include mq-pc {
  }
  @include mq-sp {

  } */

</style>
