<template>
	<view class="div ui-detail"  ref="mbBody">
		<view class="title" id="mbBody"><text class="border"></text><text class="titleinfo">宝贝详情</text><text class="border"></text></view>
		<view class="div">
			<desc-item
				:mbBody="mbBody"
				:detailInfo="detailInfo"
				v-if="detailInfo"
			></desc-item>
		</view>
		<v-back-top v-if="isshowBacktop" :target="target"></v-back-top>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import DescItem from './DescItem'
import BackTop from './DetailBackTop'
export default {
  data () {
    return {
      isshowBacktop: false
    }
  },

  mounted () {
    setTimeout(() => {
    const mbBodyinfo = uni.createSelectorQuery().in(this)
    mbBodyinfo.select('#mbBody').boundingClientRect(res =>{
        this.$emit('mbBodyposition',res.top - res.height);
    }).exec();
    }, 500);  
  },

  components: {
    'desc-item': DescItem,
    'v-back-top': BackTop
  },

  computed: mapState({
    detailInfo: state => state.goodsdetail.detailInfo,
    mbBody: state => state.goodsdetail.mbBody
  }),

  methods: {
  }
}
</script>

<style lang="scss" scoped>
.ui-detail {
	margin: .5rem 0;
	min-height: 10rem;
	position: relative;
	.title{
		font-size: .8rem;
		text-align: center;
		padding: 0.3rem 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.border{
			width: 3rem;
			height: 1px;
			background-color: #eee;
			margin: 0 .5rem;
		}
	}
}
</style>
