<template>
  <view class="container" :style="appThemeStyle">
    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback">

      <!-- 砍价会场 -->
      <view v-if="curTab == 0" class="bargain-hall">
        <!-- 商品列表 -->
        <view class="goods-item" v-for="(item, index) in activeList.data" :key="index">
          <view class="goods-item--container dis-flex" @click="onTargetActive(item)">
            <!-- 商品图片 -->
            <view class="goods-image">
              <image class="image" :src="item.goods.goods_image"></image>
            </view>
            <view class="goods-info">
              <!-- 商品名称 -->
              <view class="goods-name">
                <text class="twoline-hide">{{ item.goods.goods_name }}</text>
              </view>
              <!-- 参与的用户头像 -->
              <view v-if="item.helpsCount > 0" class="peoples dis-flex">
                <view class="user-list dis-flex">
                  <view class="user-item-avatar" v-for="(help, hIdx) in item.helpList" :key="hIdx">
                    <avatar-image :url="help.user.avatar_url" :width="36" />
                  </view>
                </view>
                <view class="people__text">
                  <text>{{ item.helpsCount }}人正在砍价</text>
                </view>
              </view>
              <!-- 商品原价 -->
              <view class="goods-price">
                <text>￥{{ item.goods.goods_price_min }}</text>
              </view>
              <!-- 砍价低价 -->
              <view class="floor-price">
                <text class="small">最低￥</text>
                <text class="big">{{ item.floor_price }}</text>
              </view>
              <!-- 操作按钮 -->
              <view class="opt-touch">
                <view class="touch-btn">
                  <text>立即参加</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 我的砍价 -->
      <view v-if="curTab == 1" class="bargain-hall">
        <!-- 商品列表 -->
        <view class="goods-item" v-for="(item, index) in myList.data" :key="index">
          <view class="goods-item--container dis-flex" @click="onTargetTask(item.task_id)">
            <!-- 商品图片 -->
            <view class="goods-image">
              <image class="image" :src="item.goods.goods_image"></image>
            </view>
            <view class="goods-info">
              <!-- 商品名称 -->
              <view class="goods-name">
                <text class="twoline-hide">{{ item.goods.goods_name }}</text>
              </view>
              <!-- 砍价进度 -->
              <view class="task-rate">
                <block v-if="item.status == true">
                  <text>已砍</text>
                  <text class="col-m">{{ item.cut_money }}</text>
                  <text>元，</text>
                  <text>只差</text>
                  <text class="col-m">{{ item.surplus_money }}</text>
                  <text>元</text>
                </block>
                <block v-if="item.is_floor">
                  <text>已砍至最低</text>
                  <text class="col-m">{{ item.floor_price }}</text>
                  <text>元</text>
                </block>
              </view>
              <!-- 任务状态 -->
              <view class="task-status dis-flex flex-y-center">
                <!-- 倒计时 -->
                <view v-if="item.status == true" class="count-down dis-flex flex-y-center">
                  <text class="m-r-6">剩余</text>
                  <count-down :date="item.end_time" separator="colon" theme="custom" />
                </view>
                <view v-if="item.status == false" class="task-status__text">
                  <text class="col-m">{{ item.is_buy ? '砍价成功' : '已结束' }}</text>
                </view>
              </view>
              <!-- 操作按钮 -->
              <view v-if="item.status == true" class="opt-touch">
                <view class="touch-btn">
                  <text>继续砍价</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部选项卡 -->
      <view class="footer-fixed">
        <view class="footer-container">
          <!-- 砍价会场 -->
          <view class="tabbar-item flex-box" :class="{ active: curTab == 0 }">
            <view class="tabbar-item-content dis-flex flex-x-center flex-y-center" @click="onChangeTab(0)">
              <view class="tabbar-item-icon">
                <text class="iconfont icon-shangcheng"></text>
              </view>
              <view class="tabbar-item-name">
                <text>砍价会场</text>
              </view>
            </view>
          </view>
          <!-- 分割线 -->
          <view class="tabbar-item__divider">
            <view class="divider-line"></view>
          </view>
          <!-- 我的砍价 -->
          <view class="tabbar-item flex-box" :class="{ active: curTab == 1 }">
            <view class="tabbar-item-content dis-flex flex-x-center flex-y-center" @click="onChangeTab(1)">
              <view class="tabbar-item-icon">
                <text class="iconfont icon-sy-yh"></text>
              </view>
              <view class="tabbar-item-name">
                <text>我的砍价</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import WxofficialMixin from '@/core/mixins/wxofficial'
  import AvatarImage from '@/components/avatar-image'
  import CountDown from '@/components/countdown'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  import * as ActiveApi from '@/api/bargain/active'
  import * as TaskApi from '@/api/bargain/task'

  const pageSize = 15

  export default {
    components: {
      AvatarImage,
      CountDown
    },
    mixins: [MescrollMixin, WxofficialMixin],
    data() {
      return {
        // 是否正在加载中
        isLoading: true,
        // 当前tab索引
        curTab: 0,
        // 砍价会场商品列表
        activeList: getEmptyPaginateObj(),
        // 我的砍价列表
        myList: getEmptyPaginateObj(),
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于3条才显示无更多数据
          noMoreSize: 3,
        }
      }
    },
    watch: {
      curTab(val) {
        // 设置页面标题
        uni.setNavigationBarTitle({ title: val == 0 ? '砍价会场' : '我的砍价' })
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 设置当前tab索引
      if (options.tab) {
        this.curTab = options.tab
      }
      // 设置微信公众号链接分享卡片内容
      this.setWxofficialShareData()
    },

    methods: {

      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      upCallback(page) {
        const app = this
        // 设置列表数据
        app.getListData(page.num)
          .then(list => {
            const curPageLen = list.data.length
            const totalSize = list.data.total
            app.mescroll.endBySize(curPageLen, totalSize)
          })
          .catch(() => app.mescroll.endErr())
      },

      // 获取列表数据(根据当前选项卡判断调用的方法)
      getListData(pageNo) {
        const apiFuc = {
          0: this.getActiveList,
          1: this.getMyList
        }
        return apiFuc[this.curTab](pageNo)
      },

      // 获取砍价活动列表
      getActiveList(pageNo) {
        const app = this
        return new Promise((resolve, reject) => {
          ActiveApi.list({ page: pageNo }, { load: false })
            .then(result => {
              // 合并新数据
              const newList = result.data.list
              app.activeList.data = getMoreListData(newList, app.activeList, pageNo)
              resolve(newList)
            })
            .catch(reject)
        })
      },

      // 获取我的砍价列表
      getMyList(pageNo) {
        const app = this
        return new Promise((resolve, reject) => {
          TaskApi.list({ page: pageNo }, { load: false })
            .then(result => {
              // 合并新数据
              const newList = result.data.list
              app.myList.data = getMoreListData(newList, app.myList, pageNo)
              resolve(newList)
            })
            .catch(reject)
        })
      },

      // 切换当前选项卡
      onChangeTab(key = 0) {
        const app = this
        // 记录选项卡索引
        app.curTab = key
        // 刷新列表数据
        app.activeList = getEmptyPaginateObj()
        app.myList = getEmptyPaginateObj()
        app.mescroll.resetUpScroll()
      },

      // 跳转到砍价商品详情页
      onTargetActive(item) {
        this.$navTo('pages/bargain/goods/index', { activeId: item.active_id, goodsId: item.goods_id })
      },

      // 跳转到砍价任务详情
      onTargetTask(taskId) {
        this.$navTo('pages/bargain/task', { taskId })
      },

      // 设置微信公众号链接分享卡片内容
      setWxofficialShareData() {
        this.updateShareCardData({ title: '砍价专区' })
      },

    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      // 构建页面参数
      const params = this.$getShareUrlParams()
      return {
        title: '砍价专区',
        path: `/pages/bargain/index?${params}`
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      // 构建页面参数
      const params = this.$getShareUrlParams()
      return {
        title: '砍价专区',
        path: `/pages/bargain/index?${params}`
      }
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    // 设置ios刘海屏底部横线安全区域
    // 110 - 18 + 4
    padding-bottom: calc(constant(safe-area-inset-bottom) + 96rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);
  }

  .bargain-hall {
    padding-top: 20rpx;
  }

  // 砍价商品
  .goods-item {
    margin-bottom: 20rpx;
    background: #fff;
    padding: 20rpx 16rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .goods-image {
      .image {
        display: block;
        width: 220rpx;
        height: 220rpx;
      }
    }

    .goods-info {
      width: 498rpx;
      padding-top: 8rpx;
      margin-left: 15rpx;
      position: relative;

      .goods-name {
        font-size: 28rpx;
        min-height: 60rpx;
      }

      // 正在参与的用户
      .peoples {
        margin-top: 15rpx;

        .user-list {
          margin-right: 10rpx;

          .user-item-avatar {
            margin-left: -8rpx;

            &:first-child {
              margin-left: 0;
            }
          }
        }

        .people__text {
          font-size: 24rpx;
          color: #818181;
        }
      }

      // 商品原价
      .goods-price {
        margin-top: 15rpx;
        color: #818181;
        font-size: 25rpx;
        text-decoration: line-through;
      }

      // 砍价底价
      .floor-price {
        color: $main-bg;

        .small {
          font-size: 24rpx;
        }

        .big {
          font-size: 32rpx;
        }
      }
    }

    // 砍价进度
    .task-rate {
      font-size: 25rpx;
      color: #a4a4a4;
      margin-top: 15rpx;
    }
  }

  /* 我的砍价 */
  // 砍价状态
  .task-status {
    margin-top: 32rpx;
    height: 58rpx;
  }

  .task-status__text {
    font-size: 26rpx;
  }

  // 倒计时
  .count-down {
    font-size: 25rpx;
  }

  // 立即参加按钮
  .opt-touch {
    position: absolute;
    bottom: 0;
    right: 10rpx;
  }

  .touch-btn {
    color: #fff;
    font-size: 28rpx;
    background: #d3a975;
    border-radius: 30rpx;
    padding: 10rpx 28rpx;
  }

  // 底部选项卡
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
    background: #fff;

    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .footer-container {
    display: flex;
    align-items: center;
    height: 96rpx;
  }

  .tabbar-item {
    font-size: 30rpx;
    // height: 42rpx;

    &.active {
      .tabbar-item-content {
        color: $main-bg;
      }
    }

    .tabbar-item-icon {
      margin-right: 15rpx;
    }
  }

  // 分割线
  .tabbar-item__divider {
    padding: 22rpx 0;
  }

  .divider-line {
    width: 1rpx;
    height: 62rpx;
    background: #ddd;
  }
</style>