<template>
	<view>
		<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
		:style="'background-color: '+theme.bg+';color: '+theme.text">
			<!-- 下拉刷新 -->
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>

			<myNav :title="i18n.orderRecord.title" isRight righturl="/static/imgs/index/shaixuan@2x.png" 
			 @Jump="show=true,cache1=kind1,cache2=kind2"></myNav>
			<!-- 身体 -->
			<view class="width-750 padding-w-30 padding-b-40">
				<!-- 单一列表 -->
				<view @click="router.push('/pages/index/orderDetails?id='+item.id)" v-for="(item,index) in list"
					class="height-184 border-bottom margin-b-15">
					<view class="padding-t-21 flex align-center justify-between">
						<view class="flex align-center">
							<image class="width-48 height-48 radiu-24" :src="item.avatar" mode=""></image>
							<text class="font-26 weight-bold margin-l-16 margin-r-23">{{item.nickname}}</text>
							<image class="width-46 height-42" src="/static/imgs/index/yinhangka.png" mode=""></image>
						</view>
						<!-- <text class="font-26 color-C3C3C3">{{item.status|checkstatus}}</text> -->
						<text class="font-26 color-C3C3C3">{{statusText[item.status]}}</text>
					</view>
					<view class="margin-t-22 flex align-center">
						<view class="flex-1 flex direction-column">
							<view class="font-24 color-C3C3C3 margin-b-10">{{i18n.orderRecord.text1}}</view>
							<view class="font-24 numbold-font">{{item.add_time}}</view>
						</view>
						<view class="flex-1 flex direction-column align-center">
							<view class="font-24 color-C3C3C3 margin-b-10">{{i18n.orderRecord.text2}}({{item.name}})
							</view>
							<view class="font-24 numbold-font">{{item.num}}</view>
						</view>
						<view class="flex-1 flex direction-column align-end">
							<view class="font-24 color-C3C3C3 margin-b-10">{{i18n.orderRecord.text3}}({{item.symbol}})
							</view>
							<view class="font-24 numbold-font">{{item.count_price}}</view>
						</view>
					</view>
				</view>
			</view>



			<!-- 筛选弹窗 -->
			<u-popup :mask-close-able="false" v-model="show" mode="top" border-radius="20">
				<view class="padding-t-30" :style="{paddingTop: statusBar + 'px',background:theme.bg,color:theme.text}">
					<view class="height-110 flex align-center padding-w-30">
						<u-icon @click="closeshow" name="arrow-leftward" size="36"></u-icon>
					</view>
					<view class="padding-w-30">
						<view class="height-66 flex align-center font-30 color-C3C3C3">{{i18n.orderRecord.text4}}</view>
						<view class="margin-t-24 flex align-center flex-wrap">
							<view @click="setkind1(item.id)" v-for="(item,index) in kindlist1"
								:class="item.id==kind1?'onbox':'offbox'">{{item.name}}</view>
						</view>
					</view>
					<view class="padding-w-30">
						<view class="height-66 flex align-center font-30 color-C3C3C3">{{i18n.orderRecord.text5}}</view>
						<view class="margin-t-24 flex align-center flex-wrap">
							<view @click="setkind2(item.id)" v-for="(item,index) in kindlist2"
								:class="item.id==kind2?'onbox':'offbox'">{{item.name}}</view>
						</view>
					</view>
					<view class="height-96 flex">
						<view @click="reset" class="flex-1 height-96 line-height-96 text-center bj-c3c3c3-02">
							<text class="font-28 color-C3C3C3">{{i18n.orderRecord.text6}}</text>
						</view>
						<view @click="confirm" class="flex-1 height-96 line-height-96 text-center bj-0165EE">
							<text class="font-28 color-white">{{i18n.orderRecord.text7}}</text>
						</view>
					</view>
				</view>
			</u-popup>

		</z-paging>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				show: false,
				kindlist1: [{
						id: 1,
						name: 'Buy'
					},
					{
						id: 2,
						name: 'Sell'
					}
				],
				kindlist2: [{
						id: 1,
						name: 'Pending Payment'
					},
					{
						id: 2,
						name: 'Paid'
					},
					{
						id: 3,
						name: 'Appealing'
					},
					{
						id: 4,
						name: 'Completed'
					},
					{
						id: 5,
						name: 'Cancelled'
					}
				],
				kind1: '',
				kind2: '',
				cache1: '',
				cache2: '',
				list: [],
				page: 1,
				state: 'more',
				ischange: false,
				statusText: ['', '', '', '', '', ''],
				theme: '',
			}
		},
		// onReachBottom() {
		// 	this.page++
		// 	this.getlist()
		// },
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.changekind()
		},
		methods: {
			changekind() {
				this.kindlist1[0].name = this.i18n.orderRecord.text8
				this.kindlist1[1].name = this.i18n.orderRecord.text9
				this.kindlist2[0].name = this.i18n.orderRecord.text10
				this.kindlist2[1].name = this.i18n.orderRecord.text11
				this.kindlist2[2].name = this.i18n.orderRecord.text12
				this.kindlist2[3].name = this.i18n.orderRecord.text13
				this.kindlist2[4].name = this.i18n.orderRecord.text14
				this.statusText[1] = this.i18n.orderRecord.text10
				this.statusText[2] = this.i18n.orderRecord.text11
				this.statusText[3] = this.i18n.orderRecord.text12
				this.statusText[4] = this.i18n.orderRecord.text13
				this.statusText[5] = this.i18n.orderRecord.text14
			},
			confirm() {
				this.show = false
				this.list=[]
				this.queryList(1,10)
			},
			reset() {
				this.kind1 = ''
				this.kind2 = ''
				this.cache1 = ''
				this.cache2 = ''
				this.show = false
				this.list=[]
				this.queryList(1,10)
			},
			closeshow() {
				this.kind1 = this.cache1
				this.kind2 = this.cache2
				this.show = false
			},
			setkind2(id) {
				if (this.kind2 != id) {
					// this.cache2 = this.kind2
					this.kind2 = id
				}
			},
			setkind1(id) {
				if (this.kind1 != id) {
					// this.cache1 = this.kind1
					this.kind1 = id
				}
			},
			queryList(pageNo, pageSize) {
					this.post('/marketotc/order_list', {
						page: pageNo,
						page_num: pageSize,
						type: this.kind1,
						status: this.kind2,
					}).then(res => {
						if (res.code == 1) {
							console.log(res)
							this.$refs.paging.complete(res.data.data);
						}
					})
			},
		}
	}
</script>

<style lang="scss">
	.border-bottom {
		border-bottom: 1rpx solid rgba(191, 195, 199, 0.3);
	}

	.offbox {
		width: 180rpx;
		height: 56rpx;
		background: #EDEFF6;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #17181A;
		line-height: 56rpx;
		text-align: center;
		margin-right: 50rpx;
		margin-bottom: 32rpx;
	}

	.onbox {
		width: 180rpx;
		height: 56rpx;
		background: #06C38D;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
		margin-right: 50rpx;
		margin-bottom: 32rpx;
	}

	.bj-c3c3c3-02 {
		background: rgba(195, 195, 195, 0.2);
	}
</style>
