<template>
	<div class="container" style="padding: 10px;" >
		<div v-if="isshowView==0">
		<el-form :inline="true" :model="model" class="demo-form-inline">
			<el-form-item label="关键字">
				<el-input v-model="model.KeyWord" placeholder="关键字"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="ID" >
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
			<el-table-column prop="beijintupian" label="头像">
				<template slot-scope="scope">
					<img :src="scope.row.beijintupian" style="width: 50px;height: 50px;" />
					<!-- {{scope.row.beijintupian}} -->
				</template>
			</el-table-column>
			<el-table-column prop="date" label="微信名" >
				<template slot-scope="scope">
					{{scope.row.username}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="别名" >
				<template slot-scope="scope">
					{{scope.row.full_name}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="用户电话" >
				<template slot-scope="scope">
					{{scope.row.phone}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="备用电话" >
				<template slot-scope="scope">
					{{scope.row.updphone}}
				</template>
			</el-table-column>
			<el-table-column prop="[address]" label="地址" >
				<template slot-scope="scope">
					{{scope.row.address}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="性别"  v-if="false">
				<template slot-scope="scope">
					<!-- 0--男 1--女 -->
					<el-tag type="success">
						{{scope.row.sex==0?'男':'女'}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="生日"  v-if="false">
				<template slot-scope="scope">
					{{scope.row.birthday}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="用户角色" >
				<template slot-scope="scope">
					<el-tag type="success">
						{{scope.row.type==1?'管理员':scope.row.type==2?'普通用户':scope.row.type==3?'推广专员':scope.row.type==4?'客户经理':'未知'}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="用户状态" >
				<template slot-scope="scope">
					<el-tag :type="scope.row.status==0?'success':'warn'">
						{{scope.row.status==0?'使用中':'禁用中'}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="添加时间"  v-if="false">
				<template slot-scope="scope">
					{{scope.row.add_time}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="查看直推" >
				<template slot-scope="scope">
					<el-button type="success" @click="SelectOrder(scope.row.id)">查看直推</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="查看下级" >
				<template slot-scope="scope">
					<el-button type="success" @click="SelectOrderW(scope.row.id)">查看下级</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="model.TotalCount" @current-change="Pages"
			style="text-align:right;margin-top:10px;">
		</el-pagination>
		<!-- 折叠面板 -->
		<el-collapse v-if="isshow==0">
			<el-collapse-item title="客户经理直推" name="1" >
				<div class="zt">
					<el-form :inline="true" :model="formCustomer" class="demo-form-inline">
						<el-form-item label="开始日期">
							<el-date-picker v-model="formCustomer.StartResultTime" type="datetime" placeholder="开始日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束日期">
							<el-date-picker v-model="formCustomer.EndResultTime" type="datetime" placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="状态">
							<el-select v-model="formCustomer.RecordState" placeholder="预约状态" @change="cs">
								<el-option label="查所有" value="-1"></el-option>
								<el-option label="已预约" value="0"></el-option>
								<el-option label="已取消" value="1"></el-option>
								<el-option label="已完成" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmitTime">查询</el-button>
						</el-form-item>
					</el-form>
					<el-table :data="Direct" style="width: 100%">
						<el-table-column prop="date" label="ID" >
							<template slot-scope="scope">
								{{scope.row.Id}}
							</template>
						</el-table-column>
						<el-table-column prop="beijintupian" label="头像" >
							<template slot-scope="scope">
								<img :src="scope.row.beijintupian" style="width: 40px;height: 40px;" />
							</template>
						</el-table-column>
						<el-table-column prop="RecordName" label="微信名" >
							<template slot-scope="scope">
								{{scope.row.RecordName}}
							</template>
						</el-table-column>
						<el-table-column prop="RecordPhone" label="电话号码">
							<template slot-scope="scope">
								{{scope.row.RecordPhone}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="用户名" >
							<template slot-scope="scope">
								{{scope.row.UserName}}
							</template>
						</el-table-column>
						<el-table-column prop="UserId" label="用户ID" >
							<template slot-scope="scope">
								{{scope.row.UserId}}
							</template>
						</el-table-column>
						<el-table-column prop="CarId" label="车辆ID" v-if="false">
							<template slot-scope="scope">
								{{scope.row.CarId}}
							</template>
						</el-table-column>

						<el-table-column prop="date" label="状态" >
							<template slot-scope="scope">
								<el-tag type="success">
									{{scope.row.State==0?'已预约':scope.row.State==1?'已取消':scope.row.State==2?'已完成':'未知'}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="Remarks" label="备注" >
							<template slot-scope="scope">
								{{scope.row.Remarks}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="车型" >
							<template slot-scope="scope">
								{{scope.row.CarModel}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="颜色" >
							<template slot-scope="scope">
								{{scope.row.CarColour}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="划痕" >
							<template slot-scope="scope">
								{{scope.row.Scratch}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="腐蚀" >
							<template slot-scope="scope">
								{{scope.row.Corrosion}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="破损" >
							<template slot-scope="scope">
								{{scope.row.BeDamaged}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="飞漆" >
							<template slot-scope="scope">
								{{scope.row.FlyingPaint}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="地址" >
							<template slot-scope="scope">
								{{scope.row.Address}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="预约时间" >
							<template slot-scope="scope">
								{{scope.row.MakeTime}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="添加时间"  v-if="false">
							<template slot-scope="scope">
								{{scope.row.AddTime}}
							</template>
						</el-table-column>
						<el-table-column prop="ResultTime" label="付款时间" >
							<template slot-scope="scope">
								<!-- {{scope.row.RecordTime}} -->
								{{scope.row.State==2?scope.row.ResultTime:''}}
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background layout="prev, pager, next" :total="formCustomer.TotalCount"
						@current-change="PagesCustomer" style="text-align:right;margin-top:10px;">
					</el-pagination>
				</div>
			</el-collapse-item>
			<el-collapse-item title="专员推广" name="2">
				<div class="xj">
					<!-- 经理下级专员 -->
					<el-table :data="ManageData" style="width: 100%;">
						<el-table-column prop="date" label="ID" >
							<template slot-scope="scope">
								{{scope.row.id}}
							</template>
						</el-table-column>
						<el-table-column prop="beijintupian" label="头像">
							<template slot-scope="scope">
								<img :src="scope.row.beijintupian" style="width: 40px;height: 40px;" />
							</template>
						</el-table-column>
						<el-table-column prop="username" label="微信名" >
							<template slot-scope="scope">
								{{scope.row.username}}
							</template>
						</el-table-column>
						<el-table-column prop="phone" label="手机号" >
							<template slot-scope="scope">
								{{scope.row.phone}}
							</template>
						</el-table-column>
						<el-table-column prop="type" label="用户角色" >
							<template slot-scope="scope">
								<el-tag type="success">
									{{scope.row.type==0?'超级管理员':scope.row.type==1?'管理员':scope.row.type==2?'普通用户':scope.row.type==3?'推广专员':scope.row.type==4?'客户经理':'未知'}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="full_name" label="别名" >
							<template slot-scope="scope">
								{{scope.row.full_name}}
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="备注" >
							<template slot-scope="scope">
								{{scope.row.remark}}
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="查看推广" >
							<template slot-scope="scope">
								<el-button type="primary" @click="SelectW(scope.row.id)">查看推广</el-button>
							</template>
						</el-table-column>

					</el-table>
					
					<!-- 下级推广数据 -->
					<el-form :inline="true" :model="formCustomerW" class="demo-form-inline" style="margin-top:20px;">
						<el-form-item label="开始日期">
							<el-date-picker v-model="formCustomerW.StartResultTime" type="datetime" placeholder="开始日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束日期">
							<el-date-picker v-model="formCustomerW.EndResultTime" type="datetime" placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="状态">
							<el-select v-model="formCustomerW.RecordState" placeholder="预约状态">
								<el-option label="查所有" value="-1"></el-option>
								<el-option label="已预约" value="0"></el-option>
								<el-option label="已取消" value="1"></el-option>
								<el-option label="已完成" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmitSub">查询</el-button>
						</el-form-item>
					</el-form>
					<!-- 下级数据展示 -->
					<el-table :data="SubData" style="width: 100%">
						<el-table-column prop="date" label="ID">
							<template slot-scope="scope">
								{{scope.row.Id}}
							</template>
						</el-table-column>
						<el-table-column prop="beijintupian" label="头像">
							<template slot-scope="scope">
								<img :src="scope.row.beijintupian" style="width: 40px;height: 40px;" />
							</template>
						</el-table-column>
						<el-table-column prop="RecordName" label="微信名">
							<template slot-scope="scope">
								{{scope.row.RecordName}}
							</template>
						</el-table-column>
						<el-table-column prop="RecordPhone" label="电话号码">
							<template slot-scope="scope">
								{{scope.row.RecordPhone}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="用户名">
							<template slot-scope="scope">
								{{scope.row.UserName}}
							</template>
						</el-table-column>
						<el-table-column prop="UserId" label="用户ID" >
							<template slot-scope="scope">
								{{scope.row.UserId}}
							</template>
						</el-table-column>
						<el-table-column prop="CarId" label="车辆ID" v-if="false">
							<template slot-scope="scope">
								{{scope.row.CarId}}
							</template>
						</el-table-column>

						<el-table-column prop="date" label="状态" >
							<template slot-scope="scope">
								<el-tag type="success">
									{{scope.row.State==0?'已预约':scope.row.State==1?'已取消':scope.row.State==2?'已完成':'未知'}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="Remarks" label="备注" >
							<template slot-scope="scope">
								{{scope.row.Remarks}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="车型" >
							<template slot-scope="scope">
								{{scope.row.CarModel}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="颜色" >
							<template slot-scope="scope">
								{{scope.row.CarColour}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="划痕" >
							<template slot-scope="scope">
								{{scope.row.Scratch}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="腐蚀" >
							<template slot-scope="scope">
								{{scope.row.Corrosion}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="破损" >
							<template slot-scope="scope">
								{{scope.row.BeDamaged}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="飞漆" >
							<template slot-scope="scope">
								{{scope.row.FlyingPaint}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="地址" >
							<template slot-scope="scope">
								{{scope.row.Address}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="预约时间" >
							<template slot-scope="scope">
								{{scope.row.MakeTime}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="添加时间" v-if="false">
							<template slot-scope="scope">
								{{scope.row.AddTime}}
							</template>
						</el-table-column>
						<el-table-column prop="ResultTime" label="付款时间">
							<template slot-scope="scope">
								<!-- {{scope.row.RecordTime}} -->
								{{scope.row.State==2?scope.row.ResultTime:''}}
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background layout="prev, pager, next" :total="formCustomer.TotalCount"
						@current-change="PagesCustomer" style="text-align:right;margin-top:10px;">
					</el-pagination>
				</div>
			</el-collapse-item>

		</el-collapse>
</div>
<div class="footer" v-else>链接已失效</div>
	</div>
</template>

<script>
	import {
		GetRecordByCustomerX
	} from '../../api/AppointmentRecord.js'
	import utils from '../../utils/utils.js'
	import {
		GetCommissionerByManage
	} from '../../api/user.js'
	import {GetPartnerById} from '../../api/Partner.js'
	import {
		GetUserList
	} from '../../api/partneruser.js'
	export default {
		data() {
			return {
				// 0--展示折叠面板  1--不展示折叠面板
				isshow:1,
				Direct: [],
				// 获取某个用户下面的客户所有预约情况
				formCustomer: {
					"StartResultTime": "",
					"EndResultTime": "",
					"UserId": 0,
					"RecordState": '查所有',
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "id",
						"Type": 0
					}]
				},
				// 获取某个销售专员下的客户所有预约情况
				formCustomerW: {
					"StartResultTime": "",
					"EndResultTime": "",
					"UserId": 0,
					"RecordState": '查所有',
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "id",
						"Type": 0
					}]
				},
				tableData: [],
				model: {
					"id": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "id",
						"Type": 0
					}]
				},
				// 销售经理ID
				ManageUserId: {
					UserId: 0,
				},
				// 销售专员数据
				ManageData: [],
				// 销售专员的下级推广数据
				SubData: [],
				//0---展示数据   1---隐藏数据 失效
				isshow:0,
				// 链接失效与否 0--不失效  1--失效
				isshowView:0,
			}
		},
		created() {
			this.model.id =utils.Decrypt(this.$route.query.id)
			console.log('数据',this.$route.query.id)
			console.log('数据2',this.model.id)
			this.SetShow(this.model.id)
			this.ShowManager()
		},
		methods: {
			//根据过期时间显示隐藏
			SetShow(id){
				GetPartnerById(id).then(res=>{
					console.log('时间',res)
					if(res.data.code==200){
							// 没过期
							this.isshowView=0
						}else{
							// 过期了
							this.isshowView=1
						}
						console.log('状态',this.isshow)
				})
			},
			// 直推提交查询
			onSubmitTime() {
				this.ShowZT()
			},
			// 下级提交查询
			onSubmitSub() {
				this.GetSubData()
			},
			// 查看销售经理下的销售专员
			SelectOrderW(id) {
				this.ManageUserId.UserId = id
				GetCommissionerByManage(this.ManageUserId).then(res => {
					console.log('查询客户经理下的推广专员数据', res)
					if (res.data.code == 200) {
						if(res.data.data.length==0){
							this.$message.error('暂无下级推广专员')
						}else{
							this.$message.success('查询下级推广专员成功')
							res.data.data.forEach((item,index)=>{
								item.phone = item.phone.substr(0, 3) + '****' + item.phone.substr(7)
							})
						this.ManageData = res.data.data
						}
					} else {
						this.$message.error(res.data.message)
					}
				})
			},
			// 查看推广专员下的所有预约情况 id=推广专员
			SelectW(id) {
				this.formCustomerW.RecordState=-1
				this.formCustomerW.UserId = id
				// console.log('wwww')
				GetRecordByCustomerX(this.formCustomerW).then(res => {
					console.log('查询出的数据', res)
					if(res.data.code==200){
						this.$message.success('查询下级成功')
					if (res.data.data.total == 0) {
						this.$message.error('暂无下级预约数据')
					} else {
						res.data.data.rows.forEach((item, index) => {
							item.RecordTime=utils.formatTime(item.RecordTime,"yyyy-MM-dd HH:mm:ss")
							item.ResultTime = utils.formatTime(item.ResultTime, "yyyy-MM-dd HH:mm:ss")
							item.AddTime = utils.formatTime(item.AddTime, "yyyy-MM-dd HH:mm:ss")
							item.MakeTime = utils.formatTime(item.MakeTime, "yyyy-MM-dd HH:mm:ss")
							item.RecordPhone = item.RecordPhone.substr(0, 3) + '****' + item.RecordPhone.substr(7)
						})
						this.SubData = res.data.data.rows
						this.formCustomerW.TotalCount = res.data.data.total
					}
					}else{
						this.$message.error('查询下级失败')
					}
				})
			},
			// 查询
			GetSubData(){
				console.log('最终查询获取时间',this.formCustomerW)
				if(this.formCustomerW.StartResultTime!=''){
					this.formCustomerW.StartResultTime=utils.formatTime(this.formCustomerW.StartResultTime,"yyyy-MM-dd")
				}
				if(this.formCustomerW.EndResultTime!=''){
					this.formCustomerW.EndResultTime=utils.formatTime(this.formCustomerW.EndResultTime,"yyyy-MM-dd")
				}
				GetRecordByCustomerX(this.formCustomerW).then(res => {
					console.log('查询出的数据', res)
					if (res.data.data.total == 0) {
						this.$message.error('暂无下级预约数据')
						this.SubData=[]
					} else {
						res.data.data.rows.forEach((item, index) => {
							item.RecordTime=utils.formatTime(item.RecordTime,"yyyy-MM-dd HH:mm:ss")
							item.ResultTime = utils.formatTime(item.ResultTime, "yyyy-MM-dd HH:mm:ss")
							item.AddTime = utils.formatTime(item.AddTime, "yyyy-MM-dd HH:mm:ss")
							item.MakeTime = utils.formatTime(item.MakeTime, "yyyy-MM-dd HH:mm:ss")
							item.RecordPhone = item.RecordPhone.substr(0, 3) + '****' + item.RecordPhone.substr(7)
						})
						this.SubData = res.data.data.rows
						this.formCustomerW.TotalCount = res.data.data.total
					}
				})
			},
			// 查看直推订单
			SelectOrder(id) {
				// 销售经理id传给查询销售专员接口
				this.formCustomer.UserId = id
				this.formCustomer.RecordState = -1
				GetRecordByCustomerX(this.formCustomer).then(res => {
					console.log('直推', res)
					if (res.data.data.total == 0) {
						this.$message.error('暂无下级预约数据')
					} else {
						res.data.data.rows.forEach((item, index) => {
							item.ResultTime = utils.formatTime(item.ResultTime, "yyyy-MM-dd HH:mm:ss")
							item.AddTime = utils.formatTime(item.AddTime, "yyyy-MM-dd HH:mm:ss")
							item.MakeTime = utils.formatTime(item.MakeTime, "yyyy-MM-dd HH:mm:ss")
							item.RecordPhone = item.RecordPhone.substr(0, 3) + '****' + item.RecordPhone.substr(7)
						})
						this.Direct = res.data.data.rows
						this.formCustomer.TotalCount = res.data.data.total
						console.log('shiti实体',this.formCustomer)
					}
				})
			},
			//展示直推用户
			ShowZT() {
				if(this.formCustomer.StartResultTime!=''){
					this.formCustomer.StartResultTime=utils.formatTime(this.formCustomer.StartResultTime,"yyyy-MM-dd")
				}
				if(this.formCustomer.EndResultTime!=''){
					this.formCustomer.EndResultTime=utils.formatTime(this.formCustomer.EndResultTime,"yyyy-MM-dd")
				}
				GetRecordByCustomerX(this.formCustomer).then(res => {
					console.log('直推', res)
					res.data.data.rows.forEach((item, index) => {
						item.MakeTime=utils.formatTime(item.MakeTime,"yyyy-MM-dd HH:mm:ss")
						item.ResultTime = utils.formatTime(item.ResultTime, "yyyy-MM-dd HH:mm:ss")
						item.AddTime = utils.formatTime(item.AddTime, "yyyy-MM-dd HH:mm:ss")
						item.UserPhone = item.UserPhone.substr(0, 3) + '****' + item.UserPhone.substr(7)
					})
					this.Direct = res.data.data.rows
					this.formCustomer.TotalCount = res.data.data.total
					console.log('直推查询按钮',this.formCustomer)
				})
			},
			Pages(e) {
				this.model.PageIndex = e
				this.ShowManager()
			},
			PagesCustomer(e) {
				this.formCustomer.PageIndex = e
				this.ShowZT()
			},
			// 查询销售经理
			ShowManager() {
				GetUserList(this.model).then(res => {
					console.log('数据', res)
					if(res.data.data.total>0){
						this.isshow=0
					res.data.data.rows.forEach((item, index) => {
						item.add_time = utils.formatTime(item.add_time, "yyyy-MM-dd HH:mm:ss")
					})
					this.tableData = res.data.data.rows
					this.model.TotalCount = res.data.data.total
					}else{
						this.isshow=1
					}
				})
			},
			onSubmit() {
				this.ShowManager()
			}
		}
	}
</script>

<style>
	.footer{
		padding: 10px;
	}
</style>
