<template>
  <view>
    <view style="height: var(--status-bar-height);background-color: #e54841;"></view>
    <view class="bg">
      <image class="bg_img" mode="widthFix"
        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/tow_price_bg.webp"></image>
      <image @click="back" class="bg_back"
        src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
      <view class="b_body">
        <view class="b_content">
          <view style="padding-bottom: 16rpx;">当前活动区域为 <text style="color: #f84221;margin-left: 5rpx;" @click="changeAddress">[ {{address.townName||'未选择'}} ] , 点击切换</text></view>
          <view v-if="item.product" v-for="(item, index) in goodsList" class="short_item" @click="clickProduct(item)">
            <image class="image" :src="item.product.image"></image>
            <view class="short_item_right">
              <view class="r_name">
                <text v-if="item.mer_labels_name" class="mer-labels">{{item.mer_labels_name}}</text>{{item.product.store_name}}
              </view>
              <view style="display: flex;justify-content: flex-start;margin-top: 5rpx;">
                <view class="r_street" v-if="item.merchant">{{item.merchant.street_name}}</view>
                <view class="r_type" v-if="item.product.store_info||getSkuName(item)||item.unit_name">
                  <view v-if="getSkuName(item)">{{getSkuName(item)}}</view>
                  <view v-else-if="item.unit_name">{{item.unit_name}}</view>
                </view>
              </view>
              <view class="r_btn" v-if="item.product && item.product.price">
                <view>￥<text style="font-size: 33rpx;">{{ item.product.price.split('.')[0] }}.</text>{{item.product.price.split('.')[1]}} 限时特惠</view>
                <view class="qiang" :class="{'no_qiang': !can_buy}">抢</view>
                <!-- <image src="@/static/images/icon/plus.png" style="width: 40rpx;height: 40rpx;border-radius: 40rpx;"></image> -->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <shortPopupActive ref="shortPopupRef" @addCart="loadCart" :source="105" isBuy></shortPopupActive>
    <u-modal :show="show" :closeOnClickOverlay="true" :title="`[${activity.title}]`"
      content="选择活动后只有完成活动任务后才可参加另一个活动, 确定要参与这个活动吗" cancelText="我再想想" confirmText="参加活动" confirmColor="#e54841"
      @cancel="show = false" @confirm="joinA()" showCancelButton></u-modal>
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
      :isGoIndex="false"></authorize>
  </view>
</template>

<script>
  import { getArticleList } from "@/api/api.js"
  import { Toast } from "../../../libs/uniApi";
  import authorize from "@/components/Authorize.vue";
  import { getUserInfo } from '@/api/user.js';
  import shortPopupActive from "@/components/shortPopupActive.vue"
  import { storeActivityProduct } from "@/api/activity.js"
  import {
    cloudWarehouse
  } from '@/api/requesta.js'
  import {
    getCartCounts,
    getCartList,
  } from '@/api/requesta.js';
  export default {
    components: {
      authorize,
      shortPopupActive
    },
    data() {
      return {
        info: {},
        userInfo: {},
        Alist: [],
        activity: {
          title: ''
        },
        address: {
          townName: '',
          street_id: ''
        },
        show: false,
        isAuto: false, //没有授权的不会自动授权
        isShowAuth: false, //是否隐藏授权
        goodsList: [],
        street_id: '',
        goodsNum: 0,
        can_buy: 0, // 是否可以购买, 0不可以, 1可以
      }
    },
    onLoad(options) {
      this.street_id = options.street_id;
    },
    onShow() {
      this.getUserInfo();
      this.loadList();
      this.cartFn();
      this.address = this.$store.state.storage.address;
    },
    methods: {
      changeAddress(){
        
      },
      back() {
        uni.navigateBack()
      },
      getUserInfo() {
        getUserInfo().then(res => {
          this.userInfo = res.data;
        }).catch(err => {
          console.log(err);
        })
      },
      loadList(){
        let location = '';
        if(this.$store.state.storage.location.lat) location = this.$store.state.storage.location.lat + ',' + this.$store.state.storage.location.long;
        storeActivityProduct({
          street_code: this.$store.state.storage.address.street_id,
          activity_id: 2, //默认传2
          location: location,
          source: 105
        }).then(res => {
          this.can_buy = res.data.can_buy;
          this.goodsList = res.data.list;
        }).catch(e=>{
          Toast(e.msg||e.message||e)
        })
      },
      // 获取规格名称
      getSkuName(item){
        return Object.keys(item.sku).join('/')||null;
      },
      // 点击商品
      clickProduct(data){
        if(!this.address.townName) return Toast('请先选择活动区域')
        if(!this.can_buy){
          return Toast('活动限购一件, 您已经买过了哦~')
        }
        this.$refs.shortPopupRef.setDatas(data, this.goodsNum);
        this.$refs.shortPopupRef.open();
      },
      // 刷新购物车
      loadCart(){
        this.cartFn();
      },
      // 购物车信息
      cartFn() {
        getCartCounts({
          source: 105,
          // product_type: 98
        }).then(res => {
          this.goodsNum = res.data[0].count
        })
      },
      // 授权回调
      onLoadFun(data) {
        this.getUserInfo();
        this.isShowAuth = false;
      },
      // 打开授权
      openAuto() {
        // console.log('hajhcdsohjcosvjco')
        this.isAuto = true;
        this.isShowAuth = true
      },
      // 授权关闭
      authColse: function(e) {
        this.isShowAuth = e
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff5dd;
  }

  .bg {
    position: relative;
    padding-bottom: 30rpx;

    .bg_img {
      width: 750rpx;
      height: 652rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .bg_back {
      height: 34rpx;
      width: 20rpx;
      position: absolute;
      top: 30rpx;
      left: 30rpx;
    }

    .b_body {
      width: 710rpx;
      margin-left: 21rpx;
      margin-right: 19rpx;
      height: auto;
      background-color: #fff;
      border-radius: 0 0 60rpx 60rpx;
      padding: 28rpx;
      padding-top: 680rpx;
      margin-bottom: 30rpx;

      .b_content {
        width: 100%;
        // height: 800rpx;
        // background-color: #eee;
        .short_item {
          // padding: 20rpx;
          padding-bottom: 30rpx;
          display: flex;
          justify-content: space-between;
        
          .image {
            height: 200rpx;
            width: 200rpx;
            border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
          }
        
          .short_item_right {
            width: 430rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        
            .r_name {
              width: 100%;
              height: 64rpx;
              line-height: 32rpx;
              text-overflow: ellipsis;
              display: -webkit-box; /* 使用弹性盒子布局 */
              -webkit-box-orient: vertical; /* 设置为垂直方向布局 */
              overflow: hidden; /* 隐藏超出部分 */
              -webkit-line-clamp: 2; /* 限制显示两行文本 */
              .mer-labels{
                background-color: #f84221;
                color: #fff;
                font-size: 16rpx;
                padding: 2rpx 6rpx;
                border-radius: 5rpx;
                margin-right: 8rpx;
              }
            }
        
            .r_type {
              font-size: 22.78rpx;
              color: #737373;
              flex: 1;
              overflow: hidden;
              display: flex;
        
              view {
                height: 39rpx;
                line-height: 39rpx;
                background: #FEF5F3;
                padding: 0 16rpx;
                border-radius: 39rpx;
                text-overflow: ellipsis;
              }
            }
        
            .r_btn {
              display: flex;
              justify-content: space-between;
              font-size: 22.78rpx;
              color: #F84221;
              align-items: center;
              background-color: rgba(#F84221, 0.1);
              padding-left: 15rpx;
              border-radius: 0 60rpx 60rpx 0;
              .qiang{
                width: 100rpx;
                height: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #F84221;
                color: #fff;
                border-radius: 60rpx;
                font-weight: bold;
                font-size: 28rpx;
              }
              .no_qiang{
                background-color: #7f7f7f;
              }
            }
            .r_street{
              font-size: 24rpx;
              height: 39rpx;
              line-height: 39rpx;
              color: #7f7f7f;
              padding-right: 10rpx;
            }
          }
        }
      }

    }

    
  }
</style>