<template>
  <div class="content mainPage" v-if="showPage">
    <div
      class="list"
      v-for="(item,index) in list"
      :key="index"
      @click="toDetail(item.CustomerCalendarId)"
    >
      <img :src="item.ModelName === '黑色'?cover:cover2">
      <div>
        <div>定制您的2019专属台历</div>
        <div>主办案场: {{item.CaseName}}</div>
        <div>参与时间: {{toolClass.dateFormat(item.CreateDate)}}</div>
      </div>
      <span>{{item.MakeStatus === 'making' ? '制作中' : '制作完成'}}</span>
    </div>
    <noMore v-if="list.length === 0"></noMore>
  </div>
</template>

<script>
import cover from '@/common/icon/heise.png'
import cover2 from '@/common/icon/honhse.png'
import noMore from '@/components/noMore/noMore.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapCustomizationState, mapActions: mapCustomizationActions } = createNamespacedHelpers('customization')
export default {
  data () {
    return {
      showPage: false,
      cover,
      cover2
    }
  },
  components:{
    noMore
  },
  created () {
    this.getList().then(() => {
      this.showPage = true
      console.log(this.list)
    })
  },
  computed: {
    ...mapCustomizationState({
      list: item => item.list
    })
  },
  methods: {
    ...mapCustomizationActions(['getList']),
    toDetail (id) {
      this.$router.push({ name: 'customizationDetail', query: { id: id } })
    }
  },
  // beforeRouteLeave (to, from, next) {
  //   console.log(to)
  //   console.log(from)
  //   if (to.name === 'making') {
  //     next({ name: 'activeList' })
  //   } else {
  //     next()
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0.2rem 0.16rem;
  box-sizing: border-box;
  .list {
    padding: 0.16rem 0.1rem;
    display: flex;
    box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.5);
    border-radius: 10px;
    position: relative;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 0.05rem;
    }
    > div {
      padding: 0.05rem 0.14rem;
      flex: 1;
      div:nth-of-type(1) {
        color: #000;
        padding: 0px;
        font-size: 0.15rem;
      }
      div:nth-of-type(2) {
        padding-top: 0.12rem;
      }
      div {
        font-size: 0.12rem;
        padding-top: 0.08rem;
        color: #999999;
      }
    }
    span {
      position: absolute;
      right: 0;
      top: 0.1rem;
      display: block;
      background: linear-gradient(
        24deg,
        rgba(250, 80, 140, 1) 0%,
        rgba(255, 200, 110, 1) 100%
      );
      border-radius: 100px 0px 0px 100px;
      padding: 2px 0.1rem 4px 0.15rem;
      color: white;
      font-size: 0.12rem;
    }
  }
}
</style>
