<template>
  <div>
    <img :src="path" class="log-bg"/>
    <div class="fixed">
      <ul class="list-container">
        <li class="list-item">
          <img src="../../assets/img/ic_zhuanfa.png" mode="widthFix"/><text class="text-zhuanfan">发送给朋友</text>
          <button open-type="share" class="btn-share"></button>
        </li>
        <li class="list-item"><img src="../../assets/img/ic_share.png" mode="widthFix"/><text class="text-share">生成分享图</text></li>
        <li class="list-item" @tap="handleRepick"><img src="../../assets/img/re_sel.png" mode="widthFix"/></li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  onShareAppMessage() {
    return {
      title: '我的手机',
      path: '/page/index/main'
    }
  },
  components: {
  },
  onLoad() {
  },
  computed: {
    path() {
      return store.state.logPage.path
    }
  },
  methods: {
    handleRepick() {
      wx.navigateBack({
        delta: 1
      })
    }
  },
  data () {
    return {
    }
  },
  created () {
  }
}
</script>

<style lang="scss">
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180rpx;
  background: rgba(#000, 0.7);
  z-index: 100;
}
.log-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.list-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  .list-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 20rpx 0;
    font-size: 28rpx;

    &:not(:last-child) {
      border-right: 2rpx dashed #ddd1be;
    }
    &:first-child {
      color: #ffde5e;
    }
    &:nth-child(2) {
      color: #38eb95;
    }
    img {
      width: 67rpx;
      margin-bottom: 16rpx;
    }
  }
}
.btn-share {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
