<template>
	<view class="content">

		<view class="content_top">
			<!--选项卡滑动切换-->
			<cxNavTitle :tabs="tabs" :activeItem="activeItem" @tabClick="tabClick" :show='false'></cxNavTitle>
		</view>

		<view class="content-content" v-for="(item,i) in orderList" :key="i" @click="nav(item)">
			<view class="content-one">
				<view class="content-one-img">
					<image :src="item.mer_info&&item.mer_info.mer_avatar" mode="aspectFit"></image>
				</view>
				<view class="content-text">
					<view class="flex" style="justify-content: space-between;">
            <view class="one-txt-a">
            	{{item.title}}
            </view>
            <block>
              <view class="content-two_one" v-if="item.mer_status==0">
              	<view class="content-two-edita" style="font-weight: bold;">
              		待处理
              	</view>
              </view>
              <view class="content-two_oneq" v-if="item.mer_status==1">
              	<view class="content-two-editb" @click="accepted" style="font-weight: bold;">
              		已接受
              	</view>
              </view>
              <view class="content-two_one" v-if="item.mer_status==2">
              	<view class="content-two-editc" @click="declined" style="font-weight: bold;">
              		已拒绝
              	</view>
              </view>
              <view class="content-two_one" v-if="item.type==4" style="font-weight: bold;">
              	<view class="content-two-editd" @click="soldEdit">
              		已完成
              	</view>
              </view>
            </block>
          </view>
          
          <view class="text-bottom">
             <view class="one-txt-b">
             	委托周期:{{item.entrust_day}}天
             </view>
             <block>
               <view class="content-two_one" v-if="item.mer_status==0">
               	<view class="contentgn">
               		<view class="contentgn_a" @click="soldEdit(item)">
               			处理
               		</view>
               		<span></span>
               		<view class="contentgn_b" @click="detail(item)">
               			详情
               		</view>
               	</view>
               </view>
               <view class="content-two_oneq" v-if="item.mer_status==1">
               	<view class="contentgn">
                   <block v-if="item.entrust_order_id>0&&item.mer_status==1">
                     <view class="contentgn_a" v-if="item.entrust_finish==0" style="margin-left: 10rpx;" @click="closingorder(item)">
                       申请结束
                     </view>
                   	<view class="contentgn_a" v-else-if="item.entrust_finish==1" style="margin-left: 10rpx; color: #20A162;">
                   		已结束
                   	</view>
                     <view class="contentgn_a" v-else-if="item.entrust_finish==2" @click="closingorder(item)" style="margin-left: 10rpx;">
                     	被拒绝
                     </view>
                     <view class="contentgn_a" v-else-if="item.entrust_finish==3" style="margin-left: 10rpx; color: #FE9A10;">
                     	申请中
                     </view>
                     <span></span>
                   </block>
               		<view class="contentgn_a" v-if="item.entrust_order_id==0" style="margin-left: 10rpx;"
               			@click="order(item)">
               			去下单
               		</view>
               		<span v-if="item.entrust_order_id==0"></span>
               
               		<view class="contentgn_b" @click="detail(item)">
               			详情
               		</view>
               	</view>
               </view>
               <view class="content-two_one" v-if="item.mer_status==2">
               	<view class="contentgn">
               		<view class="contentgn_b" @click="detail(item)">
               			详情
               		</view>
               	</view>
               </view>
               <view class="content-two_one" v-if="item.type==4">
               	<view class="contentgn">
               
               		<view class="contentgn_b" @click="detail(item)">
               			详情
               		</view>
               	</view>
               </view>
             </block>
           </view>
				</view>
			</view>
		</view>

		<view v-if="orderList.length == 0">
			<emptyPage title="暂无订单~"></emptyPage>
		</view>
		<u-loadmore :status="status" v-else />
		<uni-popup ref="bindmobile" type="center" @click="close">
			<view class="" style="position: relative;">
				<view class="entrust">
					<view class="entrust_close" @click="close">
						<image src="@/static/images/wt_close.png" mode=""></image>
					</view>
					<view class="entrust_bg">
						<view class="entrust_bg-content" v-if="obj.mer_info">
							<view class="bg-content-a">
								委托申请处理
							</view>
							<view class="bg-content-b" >
								结算周期: <span>{{obj.mer_info.settle_cycle}}天</span>
							</view>
							<view class="bg-content-c" >
								利息比例: <span>{{obj.mer_info.interest_rate}}%</span>
							</view>
							<view class="entrust_bga_btn">
								<view class="cancellation" @click="passDelete(obj)">
									拒绝
								</view>
								<view class="determine" @click="passagree(obj)">
									接受
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="bindmobile1" type="center" @click="close">
			<view class="" style="position: relative;">
				<view class="entrust">
					<view class="entrust_close" @click="close">
						<image src="@/static/images/wt_close.png" mode=""></image>
					</view>
					<view class="entrust_bga">
						<view class="entrust_bg-content">
							<view class="bg-content-a">
								<!-- 确定结束委托? -->
								申请委托结束处理
							</view>
							<view class="entrust_bga_btn">
								<view class="cancellation" @click="close">
									取消
								</view>
								<view class="determine" @click="deteragrss(obj)">
									确定
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="bindmobile2" type="center" @click="close">
			<view class="" style="position: relative;">
				<view class="entrust">
					<view class="entrust_close" @click="close">
						<image src="@/static/images/wt_close.png" mode=""></image>
					</view>
					<view class="entrust_bg">
						<view class="entrust_bg-content">
							<view class="bg-content-a" style="margin-left: 207rpx;">
								结束委托申请处理
							</view>
							<view class="bg-content-b">
								结算周期: <span>30天</span>
							</view>
							<view class="bg-content-c">
								利息比例: <span>0.05%</span>
							</view>
							<view class="entrust_bga_btn">
								<view class="cancellation">
									拒绝
								</view>
								<view class="determine">
									接受
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="bindmobile3" type="center" @click="close">

			<view class="" style="position: relative;">
				<view class="entrust">
					<view class="entrust_close" @click="close">
						<image src="@/static/images/wt_close.png" mode=""></image>
					</view>
					<view class="entrust_bgb">
						<view class="entrust_bg-content">
							<view class="bg-content-a" style="margin-left: 207rpx;">
								结束委托申请处理
							</view>
							<view class="bg-content-b">
								结算周期: <span>30天</span>
							</view>
							<view class="bg-content-c">
								利息比例: <span>0.05%</span>
							</view>
							<view class="bg-content-c">
								拒绝原因：
								<view class="" style="margin-top: 21rpx;">
									<textarea value="" placeholder="输入拒绝原因" class="bg-content_textarea" />
								</view>
							</view>
							<view class="entrust_bga_btn">
								<view class="determine">
									接受
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import cxNavTitle from '@/components/cx-navTitle.vue'
	import emptyPage from '@/components/emptyPage.vue';
	import {
		entrustlist,
		finishchain,
		checkchain,
    addEntrustCart
	} from '@/api/sale.js'
	export default {
		components: {
			cxNavTitle,
			emptyPage
		},
		data() {
			return {
				obj: {},
				activeItem: "tabOne",
				status: 'loadmore',
				activeItem: "tabOne",
				tabTitle: "",
				orderList: [],
				where: {
					page: 1,
					type: 2,
					limit: 10,
					status: 0
				},
				tabs: [{
						name: "tabOne",
						label: '待处理',
						type: '0'
					},
					{
						name: "tabTwo",
						label: '已接受',
						type: '1'
					},
					{
						name: "tabThree",
						label: '已拒绝',
						type: '2'
					},

				],
				list: [{
						content: '张三生产资料供销供应链',
						day: 10,
						type: 1

					},
					{
						content: '张三生产资料供销供应链',
						day: 10,
						type: 2

					},
					{
						content: '张三生产资料供销供应链',
						day: 10,
						type: 3

					},
					{
						content: '张三生产资料供销供应链',
						day: 10,
						type: 4

					}
				]
			}
		},
		onLoad() {
			this.tabTitle = this.tabs[0].name
			//有时进入页面需要获取默认的第一个标签做逻辑判断 -- 如下:
			console.log(this.tabs[0])

		},
		mounted() {
			this.commislist()
		},
		methods: {
			onReachBottom() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.where.page = ++this.where.page;
				this.commislist()
			},
			nav(item) {
				// uni.navigateTo({
				// 	url: '/pages/commissionedSales/delegation_details/index'
				// })
			},
			//获取分类数据
			commislist() {
				entrustlist(this.where).then((res) => {
					this.orderList.push(...res.data.list)
					if (res.data.list.length < this.where.limit) this.status = 'nomore'

					if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true

				})
			},

			//选择
			tabClick(e) { //点击获取当前标签数据 
				this.activeItem = e.name; //当前class类名 
				this.tabTitle = e.name; //当前选的标签名
				this.where.page = 1
				this.orderList = []
				this.where.status = e.type
				this.commislist()
			},
			//管理弹窗
			close() {
				this.$refs.bindmobile.close()
				this.$refs.bindmobile1.close()
				this.$refs.bindmobile2.close()
				this.$refs.bindmobile3.close()
			},
			//详情
			detail(item) {
				uni.navigateTo({
					url: '/pages/commissionedSales/delegation_details/index?id=' + item.community_id
				})
			},
			// 待处理
			soldEdit(item) {
				this.obj = item

				this.$refs.bindmobile.open()
			},
			//已接受
			accepted() {

			},
			//结束委托
			closingorder(item) {
				this.obj = item
				this.$refs.bindmobile1.open()
				// this.$refs.bindmobile3.open()
			},
			//下单
			order(item) {
				// uni.navigateTo({
				// 	url: '/pages/commissionedSales/delegation_details/index?id=' + item.community_id + '&type=1'
				// })
        addEntrustCart({
        	community_id: item.community_id
        }).then(res => {
        	if (res.status == 200) {
        		this.$util.Tips({
        			title: res.message,
        			icon: 'success'
        		})
        		uni.navigateTo({
        			url: '/pages/users/order_confirm/index?cartId=' + res.data.cart_id.toString()
        		})
        	}
        
        })
			},
			//申请结束委托申请
			deteragrss(item) {

				finishchain(item.community_id, {
					status: 1
				}).then((res) => {
					console.log(res)
					this.$util.Tips({
						title: res.message,
						icon: 'success'
					})
					this.orderList = []
					this.tabTitle = "tabTwo"
					this.commislist()
					this.$refs.bindmobile1.close()
				}).catch((err) => {
                    this.$refs.bindmobile1.close()
					this.$util.Tips({
						title: err,
						icon: 'error'
					})
				})
			},
			// 已拒绝
			declined() {
				// this.$refs.bindmobile2.open()
				this.$refs.bindmobile3.open()
			},
			//删除订单
			deleteOrder(item) {
				checkchain(item.community_id, {
					status: 3
				}).then(res => {
					this.$util.Tips({
						title: res.message,
						icon: 'success'
					})
					this.orderList = []
					this.tabTitle = "tabOne"
					this.commislist()
				})
			},
			// 审核未通过 编辑
			auditEdit() {

			},
			//审核通过 拒绝
			passDelete(item) {
				checkchain(item.community_id, {
					status: 2
				}).then((res) => {
					this.$util.Tips({
						title: res.message,
						icon: 'success'
					})
					this.orderList = []
					this.tabTitle = "tabOne"
					this.commislist()
					this.$refs.bindmobile.close()
				})
			},
			//审核通过 同意
			passagree(item) {
				checkchain(item.community_id, {
					status: 1
				}).then((res) => {
					this.$util.Tips({
						title: res.message,
						icon: 'success'
					})
					this.orderList = []
					this.tabTitle = "tabOne"
					this.commislist()
					this.$refs.bindmobile.close()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_top {
		background-color: #FFFFFF;
	}

	.content_top {
		width: 100%;
	}

	.content-content {

		margin-top: 21rpx;
		background: #FFFFFF;
		padding: 0 28rpx;
		padding-top: 28rpx;
		background: #FFFFFF;
		position: relative;
		display: flex;
		justify-content: space-between;


		.content-one {
      width: 100%;
			display: flex;
			padding-bottom: 23rpx;

			.content-one-img {
				width: 148rpx;
				height: 148rpx;
				margin-right: 28rpx;
				border: 1px solid;
        flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content-one-txt {
        flex: 1;

				.txt-b-a {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.one-txt-b {
					display: flex;
					margin-top: 30rpx;

					.txt-b-a {
						font-size: 32rpx;
						font-family: SF Pro Display-Medium, SF Pro Display;
						font-weight: 500;
						color: #F84221;
						margin-right: 74rpx;
					}

					.txt-b-b {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333
					}
				}

			}
      
      .content-text{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .text-bottom{
          display: flex;
          justify-content: space-between;
        }
        .one-txt-a{
          flex: 1;
          font-size: 30rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 限制为三行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

		}

		.content-two_oneq {
			text-align: right;
      flex-shrink: 0;

			.content-two-edita {

				font-size: 32rpx;
				font-weight: 500;
				color: #F84221;

			}

			.content-two-editb {

				font-size: 32rpx;
				font-weight: 500;
				color: #FE9A10;

			}

			.content-two-editc {

				font-size: 32rpx;
				font-weight: 500;
				color: #20A162;

			}

			.content-two-editd {

				font-size: 32rpx;
				font-weight: 500;
				color: #999999;

			}

			.contentgn {

				display: flex;
				justify-content: space-between;
				// margin-top: 47rpx;

				.contentgn_a {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F84221;
					margin-right: 10rpx;
				}

				span {
					width: 0px;
					height: 30rpx;
					opacity: 1;

					margin-top: 10rpx;
					border: 2rpx solid #CCCCCC;

				}

				.contentgn_b {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
				}
			}


		}

		.content-two_one {

      flex-shrink: 0;

			text-align: right;

			.content-two-edita {

				font-size: 32rpx;
				font-weight: 500;
				color: #F84221;

			}

			.content-two-editb {

				font-size: 32rpx;
				font-weight: 500;
				color: #FE9A10;

			}

			.content-two-editc {

				font-size: 32rpx;
				font-weight: 500;
				color: #20A162;

			}

			.content-two-editd {

				font-size: 32rpx;
				font-weight: 500;
				color: #999999;

			}

			.contentgn {

				display: flex;
				justify-content: space-between;
				// margin-top: 47rpx;

				.contentgn_a {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F84221;
					margin-right: 10rpx;
				}

				span {
					width: 0px;
					height: 30rpx;
					opacity: 1;

					margin-top: 10rpx;
					border: 2rpx solid #CCCCCC;

				}

				.contentgn_b {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
				}
			}
		}


	}

	.entrust {

		.entrust_close {
			width: 44rpx;
			height: 44rpx;

			image {
				width: 100%;
				height: 100%;
			}

			z-index: 99999;
			position: absolute;
			right: 0;
		}

		.entrust_bg {
			width: 694rpx;
			height: 676rpx;
			background: url('@/static/images/wtbg3.png') no-repeat;
			background-size: 100% 100%;
			position: relative;

			.entrust_bg-content {
				position: absolute;
				top: 284rpx;

				.bg-content-a {
					margin-left: 242rpx;
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.bg-content-b {
					margin-left: 35rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-top: 32rpx;

					span {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F84221;
						margin-left: 18rpx;
					}
				}

				.bg-content-c {
					margin-left: 35rpx;
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-top: 32rpx;

					span {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F84221;
						margin-left: 18rpx;
					}
				}
			}

			.entrust_bga_btn {
				display: flex;
				margin-top: 53rpx;

				.cancellation {
					height: 95rpx;
					line-height: 95rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 121rpx;
					margin-right: 49rpx;
				}

				.determine {
					width: 249rpx;
					height: 95rpx;
					line-height: 95rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
					border-radius: 47rpx 47rpx 47rpx 47rpx;
				}
			}

		}

		.entrust_bga {
			width: 694rpx;
			height: 520rpx;
			background: url('@/static/images/wtbg4.png') no-repeat;
			background-size: 100% 100%;
			position: relative;

			.entrust_bg-content {
				position: absolute;
				top: 284rpx;

				.bg-content-a {
					margin-left: 242rpx;
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.entrust_bga_btn {
					display: flex;
					margin-top: 53rpx;

					.cancellation {
						height: 95rpx;
						line-height: 95rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-left: 121rpx;
						margin-right: 49rpx;
					}

					.determine {
						width: 249rpx;
						height: 95rpx;
						line-height: 95rpx;
						text-align: center;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
						border-radius: 47rpx 47rpx 47rpx 47rpx;
					}
				}

			}

		}

		.entrust_bgb {
			width: 694rpx;
			height: 994rpx;
			background: url('@/static/images/wtbg5.png') no-repeat;
			background-size: 100% 100%;
			position: relative;


			.entrust_bg-content {
				position: absolute;
				top: 304rpx;

				.bg-content-a {
					margin-left: 242rpx;
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.bg-content-b {
					margin-left: 35rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-top: 32rpx;

					span {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F84221;
						margin-left: 18rpx;
					}
				}

				.bg-content-c {
					margin-left: 35rpx;
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-top: 22rpx;

					span {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F84221;
						margin-left: 18rpx;
					}
				}

				.bg-content_textarea {
					width: 624rpx;
					height: 242rpx;
					padding: 25rpx 18rpx;

					background: #F5F5F5;
				}
			}

			.entrust_bga_btn {
				display: flex;
				margin-top: 33rpx;


				.determine {
					margin-left: 188rpx;
					width: 249rpx;
					height: 95rpx;
					line-height: 95rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
					border-radius: 47rpx 47rpx 47rpx 47rpx;
				}
			}

		}
	}
</style>