<template>
	<view>
    <global-loading />
    <view v-if="FindMySalesData.total>0">
			<view  class="flex-center clientList-box" v-for="(item, index) in FindMySalesDatalist" :key="index">
				<view class="directAward-box font-color-656 fs26">
					<view class="directAward-icon flex-row-plus flex-items flex-sp-between" @click="arrowTypeChange(index)">
						<view class="flex-column-plus font-color-333 fs30">
							<label class="orderId-box">{{$t('common.orderno')}}：{{item.orderId}}</label>
							<view class="orderId-box mar-top-20">
								{{$t('common.commission')}}：<label class="font-color-C5AA7B">¥{{item.commission}}</label>
							</view>
						</view>
            <view>
              <image v-if="item.ifOpen  == false" class="arrow-down" src="https://ceres.zkthink.com/static/images/arrowDownIcon.png"></image>
              <image v-if="item.ifOpen  == true" class="arrow-down" src="https://ceres.zkthink.com/static/images/arrowUpIcon.png"></image>
            </view>
					</view>
					<view class="upBox" v-if="item.ifOpen == true">
						<view class="flex-row-plus flex-items mar-top-30 flex-sp-between">
							<label class="orderId-box font-color-999 fs26">{{$t('common.productnum')}}：{{item.products}}</label>
							<label class="orderId-box font-color-999 fs26">{{$t('common.actuallypay')}}：¥{{item.price}}</label>
						</view>
						<view class="flex-row-plus flex-items mar-top-30 flex-sp-between">
							<label class="orderId-box font-color-999 fs26">{{$t('common.buyer')}}：{{item.customerName}}</label>
							<label class="commission-box mar-left-70 font-color-999 fs26">{{$t('common.status')}}：<text class="state" :class="{current: item.state==0}">{{item.state==0? $t('common.unsettled'): $t('common.settled')}}</text></label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="emptyCart-box flex-items-plus flex-column">
			<image class="emptyCart-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
			<label class="font-color-999 fs26 mar-top-30">{{$t('client.emptydata')}}</label>
		</view>
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				shopId: 0,
				distributorId: 0,
				page:1,
				pageSize:20,
				FindMySalesData: [],
				FindMySalesDatalist:[]
			}
		},
		onLoad: function(options) {
			this.shopId = options.shopId
			this.distributorId = options.distributorId
			this.getSalesOrderPage()
		},
		onReachBottom(){
			if(this.loadingType == 1){
				uni.stopPullDownRefresh()
			}else{
				this.page = this.page+1
				this.getSalesOrderPage()
			}
		},
		methods: {
			getSalesOrderPage() {
				// uni.showLoading({
        //   mask: true,
				// 	title: '加载中...'
				// })
				NET.request(API.FindMySalesPage, {
					shopId: this.shopId,
					distributorId: this.distributorId,
					page:this.page,
					pageSize:this.pageSize,
				}, 'GET').then(res => {
					// uni.hideLoading()
					if(res.data.list.length == 0){
						this.loadingType = 1
						this.page = this.page
					}
					this.FindMySalesDatalist = this.FindMySalesDatalist.concat(res.data.list)
					this.FindMySalesData = res.data
				}).catch(res => {
					// uni.hideLoading()

				})
			},

			arrowTypeChange(arrowTypeId) {
				this.FindMySalesData.list[arrowTypeId].ifOpen = this.FindMySalesData.list[arrowTypeId].ifOpen == true ? false : true
			}
		}
	}
</script>

<style lang="scss">
page {
  background: #F8F8F8;
}
	.emptyCart-box{
		margin-top: 70upx;
    .emptyCart-img{
      width: 216rpx;
      height: 156rpx;
    }
	}
	.directAward-box {
		width: 95%;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 40upx 20upx;
		margin-top: 30upx;
		.orderId-box {
			width: 320upx;

		}

		.commission-box {
			width: 340upx;
		}
    .state {
      color: #16BB89;
    }
    .current {
      color: #C83732 !important;
    }
		.arrow-down {
			width: 24upx;
			height: 24upx;
		}

		.upBox {
			border-top: 1upx solid #EDEDED;
			margin-top: 30upx;
		}
	}
</style>