<template>
  <view>
	  <!-- naviageToPage('/modules/kxmall/pages/parity/parity?title=今日特价&id=1') -->
    <view v-if="cheapRecommend.length > 0 && storage&&showBanner"
      @click="naviageToPage(link)"
      :style="{'padding-left': showStyle!=='0px'?'30rpx':0,'padding-right': showStyle!=='0px'?'26rpx':0}">
      <image :src="imgUrl" mode="widthFix" style="width: 100%;">
      </image>
    </view>
    <scroll-view :scroll-x="scroll" :scroll-y="!scroll" style="width: 750rpx;">
      <view v-if="cheapRecommend.length > 0  && storage" class="flex padding-left-sm">
        <view v-for="(item,index) in this.cheapRecommend" :key="index"
          class="margin-lr-xs bg-white flex align-center justify-center flex-direction"
          style="width: 200rpx;height: 340rpx;padding-right: 10rpx;border: 8rpx;" @click="navToDetailPage(item.productId)">
          <image style="width: 186rpx;height: 172rpx" :src="JSON.parse(item.img)[0].url" mode="aspectFit"></image>
          <view style="padding-top: 28rpx;">
            <view class="text-2-cut" style="width: 182rpx;height: 68rpx;font-size: 24rpx;color: #2D4454;">
              {{item.title}}
            </view>
            <view style="padding-top: 6rpx;padding-bottom: 14rpx;" class="flex align-center justify-between">
              <view style="width: 114rpx;height: 42rpx;line-height: 42rpx;font-size: 24rpx;color:#F62929;">
                ￥{{item.activityPrice}}</view>
              <image @click.stop="addCart(item)" style="width: 48rpx;height: 48rpx;"
                src="@/static/kxmall/index/cart.png" mode="aspectFit" class="round"></image>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name: 'Special',
    // props: ['storage', 'cheapRecommend', 'options'],
    props: ['storage', 'options'],
	data() {
		return {
			cheapRecommend:'',
		}
	},
	mounted() {
		console.log('mounted-----',this.options)

		let id = this.options.banner.link.split("id=")[1];
		console.log('this.options----',id)

		this.$kxmall_api.request('get','storage/position/getActivityProductByStorage',{
			storageId: this.$store.state.kxmall.storageId,
			activityId:id,
			activityTitle:this.options.title,
			// #ifdef H5
			storageId: 11,
			// #endif
			// sort: 1
		},failres => {

		}).then(res=>{
			console.log('res----',res.data.rows)
			this.cheapRecommend = res.data.rows
		})

	},
    computed: {
		recommendName(){
			return this.options.recommendName
		},
		showBanner() {
        return this.options.banner.show
		},
		imgUrl() {
			const {
			  imgUrl
			} = this.options.banner
			if (imgUrl) {
			  return JSON.parse(imgUrl)[0].url
			} else {
			  return require('@/static/kxmall/index/bought.png')
			}
		},
		link() {

		  let link = this.options.banner.link
		// // + '&innerImgUrl='+  this.innerImgUrl()[0].url
		// + '&innerLink='+ this.options.banner.inner.link
		// + '&innerImgUrl='+  JSON.parse(this.options.banner.inner.imgUrl)[0].url
		console.log('link()---',link)
	    return link
	  },
	 //  innerImgUrl() {
		//   // let imgUrl = JSON.parse(this.options.banner.inner.imgUrl)
		//   // return JSON.parse(imgUrl)
		// // let imgUrl = JSON.parse(this.options.banner.inner.imgUrl)
		// return 'http//:www.baidu.com'
	 //  },
	 //  innerLink() {
	 //    return this.options.banner.inner.link
	 //  },
      showStyle() {
        return this.options.banner.showStyle
      },
      imgStyle() {
        return this.options.banner.imgStyle
      },
      scroll() {
        return this.options.scroll
      },


    },
    methods: {
		naviageToPage(url, title) {
			this.$emit('naviage-to-page', url, title)
		},
		navToDetailPage(id) {
			this.$emit('nav-to-detail-page', id)
		},
		addCart(item) {
			this.$emit('add-cart', item)
		}
    }
  }
</script>


<style scoped lang="scss">

</style>
