<template>
  <div>
    <item-info />

    <div class="action-wraper">
      <Button class="free-receive" :primary="true">免费领取</Button>
      <div class="receive-rule" />
    </div>

    <a class="resource-area" href="">
      <img v-lazy="resourceSrc" alt="" />
    </a>

    <recommend-free-goods />
    <RecommendGoods />
  </div>
</template>

<script>
import ItemInfo from "./components/item-info";
import { Button } from "cube-ui";
import RecommendGoods from "./components/recommend-goods";
import RecommendFreeGoods from "./components/recommend-free-goods";
import { createNamespacedHelpers } from "vuex";

const { mapState, mapActions } = createNamespacedHelpers("zeroHelp");

export default {
  components: {
    ItemInfo,
    Button,
    RecommendGoods,
    RecommendFreeGoods
  },
  data() {
    return {
      resourceSrc:
        "http://img10.static.yhbimg.com/yhb-img01/2019/08/20/17/01bb10aa4f373016cc5e7963b1d6c1182f.jpg"
    };
  },
  computed: {},
  mounted() {
    this.fetchPoolGoods();
  },
  methods: {
    ...mapActions(["fetchPoolGoods"])
  }
};
</script>

<style lang="scss" scoped>
.resource-area {
  display: block;
  padding: 0 30px;

  & > img {
    height: 140px;
    width: 100%;
  }
}

.action-wraper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;

  .free-receive {
    background: #d0021b;
    width: 80%;
    font-size: 28px;
    padding: 26px 0;
  }

  .receive-rule {
    height: 28px;
    width: 70%;
    background-image: url("~statics/image/power-free-rule.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 16px;
  }
}
</style>