<template>
	<view class="orderindexStyle" :style="{height: contentHeight,}">
		<!-- <view style="padding: 10px 0; background: #fff;"> -->
			<!-- <u-tabs :list="headList" :current="current" name="Name" @change="change" :active-color="mainColor" bg-color="#FFF"
			 height="80"></u-tabs> -->
            <!-- <view class="myValation-header">
                <view class="myValation-title" v-for="(item,index) in headList"
                :class="{'active':headID==item.Id}" @click="choose(item)">
                    <text>{{item.name}}</text>
                    <view></view>
                </view>
            </view> -->
             
		<!-- </view> -->

        
        <view style="height: calc(100vh - 50px); background: #fff;" v-if="list.length == 0">
            <u-empty text="快去上传估价商品吧" mode="order"></u-empty>
        </view>

        <view style="height: calc(100vh - 0px);width: calc(100vw);overflow: hidden;padding-bottom: 20px;">
            <scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
                <view class="orderList">
                    <view class="listBox" v-for="(item,index) in list" :key="index" 
					@click="goDetails(item)">
                        <view class="listBox_t" @click="redirectToDetail()">
                            <text>{{item.BrandName}}</text>
                            <text style="color: #a8a8a8;font-weight: 0;font-size: 26rpx;">{{item.CreateDate}}</text>
                        </view>
                        <view class="listBox_c">
                             <view v-for="(i,indexs) in item.GoodsImgList" :key="indexs"
							 class="title-box">
								<view class="imgbox" style="margin-bottom: 20rpx;">
									<!-- aspectFill scaleToFill-->
									<image style="width: 200rpx;height: 200rpx;border-radius: 20rpx;" :src="i.Path" mode="aspectFill"></image>	
								</view>
								<text>{{i.Name}}</text>
							 </view>
                        </view>
						<view v-if="item.ReplyDate" class="listBox_Reply">
							<view class="ReplyContent">
								<text>回复:</text>
								<text>{{item.ReplyContent}}</text>
							</view>
							<view class="ReplyDate">{{item.ReplyDate}}</view>
						</view>
                    </view>
                </view>
                <u-loadmore v-if="pageCount>1&&list.length>0" :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
            </scroll-view>
        </view>
		<auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
	</view>
</template>

<script>
	import payCom from '@/components/pay/pay';
	import goodList from "@/components/goods/order-good-list2";
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			goodList,
			auth,
			payCom
		},
		data() {
			return {
                headID:1,
                headList:[
                    {name:'等待估价',Id:1},
                    // {name:'等待上价',Id:2},
                    // {name:'帮卖中',Id:3},
                    // {name:'已完成',Id:4},
                ],
				pageTitle: "估价列表",
				current: 0,
				list: [],
				mainColor: "",
				contentHeight: 0,
				payBtn: false,
				payExit: false,
				page_count: 1,
				g: [],
				submitId: 0,
				showModal: false,
				item: "",
				index: 0,
				goodData: [],
				showGoodList: false,
				showReviceModal: false,
				showAuth: false,
				u: {},
				customStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
				},
				themCustomStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
				},
				msg: {
					pageIndex: 1,
					pageSize: 15,
					CategoryId: 0,
					BrandId: 0,
				},
				Cancelmsg: {
					OrderId: 0,
					Type: 1,
					Remark: '',
				},
				payInfo: {
					OpenId: '',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: ''
				},
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				u:{}
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
			this.themCustomStyle.color = '#D0A86C';
			this.themCustomStyle.borderColor = '#D0A86C';
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			
		},
		onShow(){
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.list = []
				this.init();
			}
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.init()
			},
			//关闭登录窗口
			gbAuth() {
				uni.navigateBack();
			},
			goDetails(item){
				item.BrandName = item.BrandName.replace(/&/,"8")
				uni.navigateTo({
					url: '/pages/Luxury/ValuationDetails?Obj='+JSON.stringify(item)
				});
			},
			init() {
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletAssess/GetMyGoodsPageList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.list = this.list.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
							uni.hideLoading();
						}
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
		},
	};
</script>
<style>
    .myValation-title.active{
        color: black;
        font-weight: 600;
    }
    .myValation-title.active view{
        background: #D0A86C;
    }
    .myValation-title view{
        width: 40rpx;
        height: 10rpx;
        
        border-radius: 5rpx;
        margin-top: 20rpx;
    }
    .myValation-title text{
        text-align: center;
    }
    .myValation-title{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .myValation-header{
        display: flex;
        justify-content: space-between;
        padding: 0 60rpx;
    }
	.orderindexStyle {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
	}

	.orderindexStyle .orderList {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.orderList .listBox {
		background: #fff;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		width: 100%;
		margin-top: 30rpx;
	}

	.orderList .listBox .listBox_t {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		margin-bottom: 20px;
		color: #000;
	}
	.listBox_t text:first-child{
		width: 450rpx;
		margin-left: 20rpx;
		word-wrap: break-word;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
		overflow: hidden;
		margin-right: 20rpx;
	}
	.listBox_t text:last-child{
		flex-shrink: 0;
	}

	.orderList .listBox .listBox_c {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.title-box{
		width: 33.33%;
		text-align: center;
	}
	.title-box image{
		width: 100%;
		height: 100rpx;
	}
	.title-box text{
		display: block;
		margin-bottom: 10rpx;
	}
	.listBox_Reply{
		width: 100%;
		margin-top: 20rpx;
		background: #F6F6F6;
		display: flex;
		flex-direction: column;
		padding: 20rpx 30rpx;
	}
	.ReplyContent{
		display: flex;
	}
	.ReplyContent text:first-child{
		width: 70rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
		font-weight: 500;
		color: black;
	}
	.ReplyContent text:last-child{
		width: 600rpx;
		word-wrap: break-word;
		color: #191919;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2; /** 显示的行数 **/
		overflow: hidden;
	}
	.ReplyDate{
		text-align: right;
		color: #a8a8a8;
		font-weight: 400;
		font-size: 26rpx;
	}
</style>