<style lang="less">
page {
    height: 100%;
}
.page-container {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    font-family: PingFang SC;
    padding-top: 208rpx;
    background: #EBF5FA;
    .energyHead {
        height: 160rpx;
        display: flex;
        align-items: center;
        padding-left: 48rpx;
        font-family: PingFang SC;
        font-size: 48rpx;
        font-weight: 600;
        line-height: 68rpx;
        color: #1B2129;

    }
    .pointExplain {
        background: #fff;
        padding: 56rpx 48rpx 56rpx 56rpx;
        .item {
            display: flex;
            align-items: baseline;
            font-family: PingFang SC;
            font-size: 30rpx;
            font-weight: 400;
            line-height: 60rpx;
            color: #424C59;
            .order {
                width: 40rpx;
            }
            .cont {
                line-height: 56rpx;
            }
        }
        .carbonItem{
            flex: 1;text-align: justify
        }
    }
    .explain{
        padding-top: 40rpx;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 36rpx;
        color: #C4C4C4;

    }

    .btPostion{
        position: absolute;
        bottom: -600rpx;
    }
}
</style>

<template>
    <div>
        <page-top-bar
            icon="{{h5StaticPath+'/page-top-bar/return-icon.svg'}}"
        ></page-top-bar>
        <div class="page-container">
            <div class="energyHead">
                {{ carbonCreditText }}积分说明
            </div>
            <div
                class="pointExplain"
            >
                <div :class="{'item':true,'carbonItem':true}" 
                style="{{ item.sty }}"
                v-for="(item,idx) in textExplain" :key="idx">
                    <div v-if="item.id" style="line-height: 48rpx;margin-right: 8rpx;">{{item.id}}</div>
                    <div class="cont" style="line-height: 48rpx;">{{item.text}}</div>
                </div>
            </div>

        </div>
    </div>

</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import config from '@/config'
import { mapState } from '@wepy/x'
import { carbonCreditExplain, carbonCredit } from '../common.js'

wepy.page({
  store,
  data: {
    h5StaticPath: config.h5StaticPath,
    textExplain: [],
    carbonCreditText: ''
  },
  computed: {
    ...mapState({ token: state => state.user.token,
      portraitModule: state => state.portrait.portraitModule,
      projectId: state => state.company && state.company.companyConfig && state.company.companyConfig.sagacareProjectId

    })
  },
  onLoad() {
    this.textExplain = carbonCreditExplain()
    this.carbonCreditText = carbonCredit(this.projectId)
  },
  onReady() { },
  methods: {

    showPointExplain() {
      console.log('fsd')
      wx.navigateTo({
        url: './pointExplain'
      })
    }
  }
})
</script>

<config>
{
    'navigationBarBackgroundColor': '#EBF5FA',
    'navigationBarTextStyle':'black',
    'backgroundColor': '#EBF5FA',
    'navigationBarTitleText': '',
    navigationStyle:"custom",
    usingComponents: {
        'page-top-bar': '~@/components/common/page-top-bar',      
    },

}
</config>
