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

        <!-- tab栏 -->
        <u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" />

        <!-- 订单列表 -->
        <view class="order-list">
          <view class="order-item" v-for="(item, index) in list.data" :key="index">

            <view class="item-top">
              <view class="item-top-left">
                <text class="order-time">订单号：{{ item.batchcode }}</text>
              </view>
              <view class="item-top-right">
                <text class="state-text">{{item.state_text}}</text>
              </view>
            </view>
            <!-- 商品列表 -->
            <view class="goods-list" >
              <view class="goods-item" v-for="(goods, idx) in item.order_detail" :key="idx">
                <!-- 商品图片 -->
                <view class="goods-image">
                  <image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
                </view>
                <!-- 商品信息 -->
                <view class="goods-content">
                  <view class="goods-title">
                    <text class="twoline-hide">{{ goods.goods_name }}</text>
                    <text class="twoline-hide">
                      <text class="twoline-hide-price">
                        单价：
                        <text class="twoline-hide-icon">￥</text>
                        {{ goods.price }}
                      </text>
                    </text>
                    <text class="twoline-hide">
                      <text class="twoline-hide-price">
                        购买年限： {{ goods.transaction_count }}年
                      </text>
                    </text>
                    <text class="twoline-hide">
                      <text class="twoline-hide-price">
                        交易佣金：
                        <text class="twoline-hide-icon">￥</text>
                        {{ goods.service_charge }}
                        <text class="twoline-hide-sum">
                          合计：￥{{goods.money}}
                        </text>
                      </text>
                    </text>
                  </view>
                </view>
                <!-- 委托方等信息 -->
                <view class="goods-props clearfix">
                  <view class="goods-props-item">委托方：{{goods.entrust_name}}</view>
                  <view class="goods-props-item">
                    <text>交易方式：{{goods.goods_entrust=="1"?'转让':'授权'}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </mescroll-body>
    </view>
</template>

<script>
  import * as OrderApi from '@/api/order'
  import { checkLogin } from '@/core/app'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'

  // 每页记录数量
  const pageSize = 10

  // tab栏数据
  const tabs = [
    {name: `全部`,value: 'all',key: ''},
    {name: `待付款`,value: 'payment',key: 1},
    {name: `待交付`,value: 'delivery',key: 2},
    {name: `已终止`,value: 'hasabort',key: '3,4'},
    {name: `已关闭`,value: 'hasclosed',key: 5},
  ]
  export default {
    name: "buyOrder",
    components: {
      MescrollBody
    },
    mixins: [MescrollMixin],
    data() {
      return {
        // 当前页面参数
        options: { dataType: 'all' },
        // tab栏数据
        tabs,
        // 当前标签索引
        curTab: 0,
        // 订单列表数据
        list: getEmptyPaginateObj(),
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于4条才显示无更多数据
          noMoreSize: 4,
          // 空布局
          empty: {
            tip: '暂无订单记录'
          }
        },
        // 控制onShow事件是否刷新订单列表
        canReset: false,
      }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 初始化当前选中的标签
      this.initCurTab(options)
      // 注册全局事件订阅: 是否刷新订单列表
      uni.$on('syncRefresh', canReset => {
        this.canReset = canReset
      })
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      this.canReset && this.onRefreshList()
      this.canReset = false
    },
    /**
     * 生命周期函数--监听页面的卸载
     */
    onUnload() {
      // 卸载全局事件订阅
      uni.$off('syncRefresh')
    },
    methods: {
      // 初始化当前选中的标签
      initCurTab(options) {
        // 判断是否已登录
        this.isLogin = checkLogin()
        if(!this.isLogin){
          uni.navigateTo({
            url:"/pages/login/index"
          })
        }
        // 登录成功后才可以操作
        const app = this
        if (options.dataType) {
          const index = app.tabs.findIndex(item => item.value == options.dataType)
          app.curTab = index > -1 ? index : 0
        }
      },
      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      upCallback(page) {
        const app = this
        // 设置列表数据
        app.getOrderList(page.num)
            .then(list => {
              const curPageLen = list.data.length
              const totalSize = list.data.total
              app.mescroll.endBySize(curPageLen, totalSize)
            })
            .catch(() => app.mescroll.endErr())
      },
      // 获取订单列表
      getOrderList(pageNo = 1) {
        const app = this
        return new Promise((resolve, reject) => {
          let status = app.tabs[app.curTab].key
          let isliCode = uni.getStorageSync("isliCode")
          let data = {
            offset:0,
            limit:pageSize,
            order_status: status,
            user_role: 1,
            user_isli: isliCode,
            page:pageNo,
            pageSize:pageSize,
          }
          OrderApi.ordquery(data)
              .then(result => {
                // 按格式封装
                let nlist = {data:result.data,total:result.count,current_page:pageNo}
                // 合并新数据
                const newList = app.initList(nlist)
                app.list.data = getMoreListData(newList, app.list, pageNo)
                resolve(newList)
              })
        })
      },
      // 初始化订单列表数据
      initList(newList) {
        newList.data.forEach(item => {
          item.total_num = item.order_detail.length
          item.state_text = this.showStateText(item.staus)
        })
        return newList
      },
      // 订单状态
      showStateText(state){
        let state_txt="";
        if(state=="1"){
          state_txt="待付款"
        }else if(state =="2" ){
          state_txt="待付款"
        } else if(state=="3"){
          state_txt="已终止"
        } else if(state == "4"){
          state_txt="已终止"
        }else{
          state_txt="已关闭"
        }
        return state_txt;
      },

      // 获取当前标签项的值
      getTabValue() {
        return this.tabs[this.curTab].value
      },
      // 切换标签项
      onChangeTab(index) {
        const app = this
        // 设置当前选中的标签
        app.curTab = index
        // 刷新订单列表
        app.onRefreshList()
      },

      // 刷新订单列表
      onRefreshList() {
        this.list = getEmptyPaginateObj()

        setTimeout(() => {
          this.mescroll.resetUpScroll()
        }, 120)
      },
    }
  }
</script>

<style lang="scss" scoped>
// 项目内容
.order-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 30rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
}

// 项目顶部
.item-top {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx #9F9F9F solid;

  .order-time {
    color: #777;
  }

  .state-text {
    color: $uni-text-color-active;
  }
}

// 商品列表
.goods-list {

  // 商品项
  .goods-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40rpx;

    // 商品图片
    .goods-image {
      width: 180rpx;
      height: 180rpx;
      flex-basis: calc(33.33% - 10rpx);
      margin-right: 10rpx;

      .image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }

    // 商品内容
    .goods-content {
      padding-left: 16rpx;
      padding-top: 16rpx;
      flex-basis: calc(66.66% - 10rpx);
      margin-right: 10rpx;

      .goods-title {
        font-size: 26rpx;
        max-height: 76rpx;
      }

      .twoline-hide-price{
        font-size: 20rpx;
        color: #979082;

        .twoline-hide-icon{
          color: #0b0b0b;
          font-weight: bold;
        }
        .twoline-hide-sum{
          color: red;
          float: right;
          margin-top: 5rpx;
        }
      }

    }

    // 委托方等信息
    .goods-props {
      float: left;
      height: 30rpx;
      font-size: 20rpx;
      margin-top: 10rpx;
      flex-basis: 100%;
      color: $uni-text-color-grey;

      .goods-props-item {
        margin-top: 10rpx;
      }
    }
  }

}

</style>