// 货主任务审核
<template>
	<div class="center">
		<div class="center_css">
			<div class="top_css">
				<el-row>
					<el-col :span="14" style="height: 45px;">
						<!-- <el-button type="primary">添加</el-button> -->
					</el-col>
					<el-col :span="10">
						<div class="screen">
							<el-input placeholder="可按货主姓名、账号查找" v-model="searchkeyWord" clearable @change="find"></el-input>
							<el-button class="search" @click="find"><img width="16" height="16"
									style="margin-left: -8px" src="../../../public/img/sousuo.png" /></el-button><span
								class="count_css">共{{ deptBudgetTotal }}条</span>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<div class="search_btn">
							<div :class="search == '' ? 'search' : 'searchNo'" class="search_item search_block"
								@click="searchBtn('')">
								全部
							</div>
							<div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(1)">
								待审核
							</div>
							<div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
								已通过
							</div>
							<div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
								已驳回
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border>
				<el-table-column prop="cargoOwnerName" label="货主姓名" min-width="125"></el-table-column>
				<el-table-column prop="taskNo" label="任务编号" min-width="165"></el-table-column>
				<el-table-column prop="cargoOwnerPhone" label="货主账号" min-width="108"></el-table-column>
				<el-table-column prop="amountMoney" label="发货地" min-width="150">
					<template slot-scope="scope">
						{{scope.row.sendPrivate}}{{scope.row.sendCity}}{{scope.row.sendArea}}{{scope.row.sendDetailedAddress}}
					</template>
				</el-table-column>
				<el-table-column prop="amountMoney" label="收货地" min-width="150">
					<template slot-scope="scope">
						{{scope.row.unloadPrivate}}{{scope.row.unloadCity}}{{scope.row.unloadArea}}{{scope.row.unloadDetailedAddress}}
					</template>
				</el-table-column>
				<el-table-column prop="createDate" label="发布日期" min-width="100"></el-table-column>
			
				<el-table-column prop="status" label="状态"></el-table-column>
				<el-table-column label="操作" min-width="350">
					<template slot-scope="scope">
						<el-link  target="_blank" @click="adopt(scope.row)" type="primary" :underline="false" :disabled="scope.row.status != '审核中'">通过</el-link>
						<el-divider direction="vertical"></el-divider>
						<el-link  target="_blank" @click="reject(scope.row)" type="primary" :underline="false" :disabled="scope.row.status != '审核中'">驳回</el-link>
						<el-divider direction="vertical"></el-divider>
						<el-link  target="_blank" @click="reject(scope.row)" type="primary" :underline="false">查看</el-link>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
		</el-pagination>
		<!-- <el-dialog title="驳回认证" :visible.sync="rejectInfo" width="400px" :before-close="rejectClose">
			<div>
				<div><span class="sign">*</span>选择驳回原因</div>
				<div class="form_css">
					<el-form ref="form" :model="form" label-width="80px">
						<el-checkbox-group v-model="form.checkList">
							<el-checkbox label="证件照片不清晰"></el-checkbox>
							<el-checkbox label="证件照片上传错误"></el-checkbox>
							<el-checkbox label="身份信息填写错误"></el-checkbox>
							<el-checkbox label="证件信息填写错误"></el-checkbox>
							<el-checkbox label="其他"></el-checkbox>
						</el-checkbox-group>
						<div style="margin: 20px 0;">驳回原因描述（选填）</div>
						<el-input type="textarea" :rows="3" resize="none" placeholder="输入驳回原因，5-50个字" maxlength="50"
							v-model="form.textarea"></el-input>
						<div class="form_btn">
							<el-button @click="rejectClose">取消</el-button>
							<el-button @click="submit" type="primary">确定</el-button>
						</div>
					</el-form>
				</div>
			</div>
		</el-dialog> -->
		<el-drawer title="任务详情" :visible.sync="rightSee" >
			<div class="right_css">
						<div class="right_item">任务编号：{{taskLook.taskNo}}</div>
						<div class="right_title">公司</div>
						<div class="right_item">{{taskLook.cargoOwnerName}}</div>
						<div class="right_title">发货地区</div>
						<div class="right_item">{{taskLook.sendPrivate}}{{taskLook.sendCity}}{{taskLook.sendArea}}</div>
						<div class="right_title">发货详细地址</div>
						<div class="right_item">{{taskLook.sendPrivate}}{{taskLook.sendCity}}{{taskLook.sendArea}}{{taskLook.sendDetailedAddress}}</div>
						<div class="right_title">收货地区</div>
						<div class="right_item">{{taskLook.unloadPrivate}}{{taskLook.unloadCity}}{{taskLook.unloadArea}}</div>
						<div class="right_title">收货详细地址</div>
						<div class="right_item">{{taskLook.unloadPrivate}}{{taskLook.unloadCity}}{{taskLook.unloadArea}}{{taskLook.unloadDetailedAddress}}</div>
						<div class="right_title">运输距离</div>
						<div class="right_item">约{{taskLook.distance ? taskLook.distance : 0}}km</div>
						<div class="right_title">货名</div>
						<div class="right_item">{{taskLook.goodsName}}</div>
						<div class="right_title">重量（吨）</div>
						<div class="right_item">{{taskLook.weight}}</div>
						<div class="right_title">运费计算方式</div>
						<div class="right_item">{{taskLook.billingMethod == 0 ? "元/吨":"元/车"}}</div>
						<div class="right_title">{{taskLook.billingMethod == 0 ? "运费单价（元/吨）":"运费单价（元/车）"}}</div>
						<div class="right_item">{{taskLook.freightPrice}}</div>
						<div class="right_title">预计装车日期起</div>
						<div class="right_item">{{taskLook. loadingDateStart}}</div>
						<div class="right_title">预计装车日期止</div>
						<div class="right_item">{{taskLook.loadingDateEnd}}</div>
						<div class="right_title">车长要求（米）</div>
						<div class="right_item">{{taskLook.carLengthSmall}}~{{taskLook.carLength}}</div>
						<div class="right_title">载重要求（吨）</div>
						<div class="right_item">{{taskLook.loadWeightSmall}}~{{taskLook.loadWeight}}</div>
						<div class="right_title">车型要求</div>
						<div class="right_item" v-if="taskLook.carModel == 1">不限</div>
						<div class="right_item" v-if="taskLook.carModel == 2">高栏</div>
						<div class="right_item" v-if="taskLook.carModel == 3">集装箱</div>
						<div class="right_item" v-if="taskLook.carModel == 4">自卸车</div>
						<div class="right_title">任务描述</div>
						<div class="right_item">{{taskLook.taskDescription}}</div>
						<div class="right_title">任务有效期</div>
						<div class="right_item">{{taskLook.taskValidity}}</div>
						<div class="right_item">{{taskLook.freightAdvance == 0 ? "该任务未申请运费垫付":"该任务申请运费垫付"}}</div>
						<div class="right_btn">
							<el-button @click="submit(1)" v-if="taskLook.status == '审核中'">通过</el-button>
							<el-button @click="submit(2)" v-if="taskLook.status == '审核中'">驳回</el-button>
							<el-button @click="rightSee = false">关闭</el-button>
						</div>
					</div>
		</el-drawer>
	</div>
</template>
<script>
	import {
		getListLook,
		toTaskExamine
	} from '@/api/cargoOwnerManagement'
	export default {
		data() {
			return {
				tableData: [],
				//分页
				searchkeyWord: "",
				currentPage: 1,
				pageSize: 10,
				deptBudgetTotal: 0,
				deptCircularPage: {},
				search: "",
				addressUrl: [],
				disabled: false,
				form: {
					checkList: [],
					textarea: "",
				},
				rightSee:false,
				taskLook:{},
			};
		},
		mounted() {
			this.getList()
		},
		methods: {

			getList() {
				
				this.loading = true
				let _obj = {}
				_obj.currentPage = this.currentPage
				_obj.pageSize = this.pageSize
				_obj.searchKeyWord = this.searchkeyWord
				_obj.searchType = this.search
				getListLook(_obj).then(response => {
						this.tableData = response.data.records
						this.deptBudgetTotal = response.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.loading = false
					})
			},
			adopt(row) {
				this.taskLook = row
				this.rightSee = true
			},
			reject(row) {
				this.taskLook = row
				this.rightSee = true
			},
			submit(num) {
				var _taskObj = {}
				_taskObj.id = this.taskLook.id
				let taskTitle = ""
				if(num == 1){
					_taskObj.flag = 1
					taskTitle = "通过"
				}else if(num == 2){
					_taskObj.flag = 2
					taskTitle = "驳回"
				}
				this.$confirm('确定'+ taskTitle + this.taskLook.cargoOwnerName + '的发运任务？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						this.listLoading = true
						
						toTaskExamine(_taskObj).then(response => {
							this.rightSee = false
								this.taskLook = {}
								this.$notify({
									title: '成功',
									message: taskTitle+'成功！',
									type: 'success'
								});
								this.getList()
								this.listLoading = false
							})
							.catch(() => {
								this.loading = false
							})
					})
			},
			searchBtn(num) {
				this.search = num;
				this.getList();
			},
			find() {
				this.getList();
			},
			onChange() {
				this.$refs.upload
					.handleSaveBill()
					.then(async (response) => {
						this.formData.addressUrl = response;
					})
					.catch((res) => {
						EventBus.$emit("error", (JSON.parse(res) || {}).message);
						this.$refs.upload.clearFiles();
					});
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				console.log(`当前页: ${val}`);
				this.getList();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.center {
		padding: 10px 20px;
		background: #f5f6f7;
		height: calc(100vh - 5vh);

		.top_css {
			padding: 10px;

			.search_btn {
        height: 80px;
        background: linear-gradient(#fafbfb, #ffffff);
				display: flex;
				margin-top: 20px;
        .search_block{
          margin-left: 20px;
        }

				.search_item {
					text-align: center;
					font-size: 14px;
					font-weight: 600;
					line-height: 40px;
					width: 112px;
					height: 40px;
					background: #f7f8f9;
					cursor: pointer;
          margin-top: 30px;
				}

				.searchNo {
					color: #323233;
				}

				.search {
					color: #2f53eb;
					background: #ffffff;
				}
			}
		}

		.center_css {
			background: #ffffff;
			border-radius: 1px;
			margin-top: 10px;
			padding-bottom: 10px;
		}

		.screen {
			display: flex;

			.search {
				width: 40px;
				height: 40px;
				background: #f7f8fa;
				border-radius: 0px 2px 2px 0px;
				border: 1px solid #f0f1f2;
			}

			.count_css {
				width: 80px;
				text-align: center;
				line-height: 40px;
				color: #666666;
			}
		}

		.el-button {
			padding: 10px 20px !important;
		}

		.center_css {

			::v-deep .el-table th,
			::v-deep .el-table td {
				text-align: center;
			}

			.fujian {
				font-size: 24px;
				color: #409eff;
			}

			.warning {
				font-size: 14px;
				color: #ed1d1d;
			}
		}
	}

	.car_css {
		width: 50%;
		display: inline-block;
		text-align: center;
		margin-top: 20px;
	}

	.car_item {
		width: 100px;
		height: 100px;
	}

	.user {
		margin-bottom: 20px;

		.user_id {
			display: flex;
			height: 30px;
		}

		.name_css,
		.id_css {
			width: 50%;
		}

		.name_css {
			text-align: right;
		}

		.user_item {
			width: 450px;
			height: 300px;
		}
	}

	::v-deep .el-table--border .el-table__header th {
		background: #f7f8f9;
	}

	.btn_css {
		color: #2f53eb;
		cursor: pointer
	}

	.sign {
		font-size: 14px;
		color: red;
	}
	.right_css {
			padding:0 20px;
			.right_title {
				color: #9D9D9D;
				font-size: 14px;
				margin-bottom: 4px;
			}
	
			.right_item {
				color: #0D0D0D;
				font-size: 14px;
				margin-bottom: 20px;
			}
	
			.right_btn {
				text-align: right;
				margin: 10px 0;
			}
	
			.right_img {
				width: 200px;
				height: 120px;
				margin-top: 10px;
			}
		}
		::v-deep .el-drawer {
			overflow: auto;
		}
	
</style>
