<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti" v-if="ontype== '1'">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">日志查询分析</span></div>
			</div>
			<div class="formSearch">
			          <el-form
			            :inline="true"
			            :model="pageindex"
			            label-position="left"
			          >
			
			
			            <el-form-item label="请求用户" v-if="concat.one">
			              <el-input
			                placeholder="请输入"
			
			                style="width: 168px"
			                v-model="pageindex.name">
			              </el-input>
			            </el-form-item>
			            <el-form-item label="请求设备"  v-if="concat.three">
							<el-input
							  placeholder="请输入"
										
							  style="width: 168px"
							  v-model="pageindex.describe">
							</el-input>
			             
			            </el-form-item>
			            
			          </el-form>
					<div>
						<el-button
						  style="background-color: #3F9B6A;color: #fff;"
						  @click="onSubmit"
						  >查询
						</el-button>
						<el-button
						
						
						class="buttonHover"
						style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
						  @click="resetting"
						  >重置
						</el-button>
					</div>
			        </div>
			<div style="margin-bottom: 20px;">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="biaoSet(4)">
					日志类别管理
				</el-button>		
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="biaoSet(5)">
					日志集合标签设置
				</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="rifenxi">
					日志分析
				</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="conShow=true">日志查询条件设置
				</el-button>	
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaojianzu">
					日志查询条件组合
				</el-button>
				
			</div>
			<div>
				<!-- 表格 -->
				<el-table :data="tableData"
					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
					 @selection-change="handleSelectionChange"
					>
					<el-table-column
					      type="selection"
					      width="55"
						  v-if="fenxiShow"
						  >
					    </el-table-column>
					<el-table-column label="序号" min-width="80">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column label="请求时间" prop="createTime" min-width="250">
					</el-table-column>
					<el-table-column label="请求用户" prop="name" min-width="200">

					</el-table-column>
					<el-table-column label="请求IP" prop="ip" min-width="300">

					</el-table-column>
					<el-table-column label="请求设备" prop="browserName" min-width="250">
					</el-table-column>
					<el-table-column prop="payState" label="支付状态" min-width="300">

					</el-table-column>
					<el-table-column prop="type" label="请求类型" min-width="150">
						<template slot-scope="scope">
							{{scope.row.type == '1'?'平台端':scope.row.type == '2'?'商家端':'C端'}}
						</template>
					</el-table-column>
					<el-table-column prop="time" label="请求耗时" min-width="100">
						<template slot-scope="scope">
							{{scope.row.time}}秒
						</template>
					</el-table-column>
					<el-table-column label="操作" width="auto" min-width="80">
						<template slot-scope="scope">
							<div @click="delList(scope.row)" class="tableBtn greens">删除</div>

						</template>
					</el-table-column>
				</el-table>
				<div class="" style="padding: 10px;" v-if="fenxiShow">
					<el-button style="background-color: #3F9B6A;color: #fff;" @click="rifenxiCheck">
						日志分析结果展示
					</el-button>
					</div>
				<div class="fenye">
					<div style="line-height: 34px">共{{total}}条</div>
					<el-pagination class="pagination" :hide-on-single-page="flag" background
						:current-page="pageindex.page+1" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
						layout="prev, pager,next" :total="total " @current-change="handleCurrentChange" />
				</div>

				<!-- 新建商家弹框 -->
				<el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'" :visible.sync="ggXin"
					custom-class="diaslog_zhong" style="padding: 0;" width="80%" class="dialog_css_Xq" center
					:close-on-click-modal="false" :show-close="false">
					<div>
						<div style="margin-bottom: 20px;">
							<el-form ref="form" :model="formInline" label-width="80px">
								<el-form-item label="渠道名称">
									<el-input v-model="formInline.name"
										:disabled="index == 1?false:index == 2?true:false" size="mini"
										placeholder="请输入"></el-input>
								</el-form-item>
								<el-form-item label="渠道类型">
									<el-select v-model="formInline.createUser" placeholder="请选择" size="mini"
										:disabled="index == 1?false:index == 2?true:false" style="width:100%">
										<el-option label="APP" value="APP" />
									</el-select>
								</el-form-item>

								<el-form-item label="备注">
									<el-input type="textarea" v-model="formInline.textarea" :rows="4"
										:disabled="index == 1?false:index == 2?true:false"></el-input>
								</el-form-item>

							</el-form>

						</div>
						<div style="display: flex;justify-content: flex-end;">
							<el-button plain @click="closeFn(1)" size="mini"
								style="background-color: #fff;color: #000;width: 70px;height: 30px;border-color: #B2B2B2;">返回</el-button>
							<el-button plain @click="bianji()" v-if="index == 2" size="mini"
								style="background-color: #3F9B6A;color: #fff;width: 70px;height: 30px;border-color: #3F9B6A;">编辑</el-button>
							<el-button plain @click="addCheck(0)" v-if="index!= 2" size="mini"
								style="background-color: #3F9B6A;color: #fff;width: 70px;height: 30px;border-color: #3F9B6A;">确定</el-button>
						</div>
					</div>
				</el-dialog>
			</div>
		</div>
	<div class="zhuti" v-if="ontype == '5'">
			<div style="padding: 20px 0;">{{msg}}</div>
			<div style="margin-bottom: 20px;">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="add(msg)">新增
				</el-button>
			
			</div>
			<el-table :data="biaotable"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column :label="msg" min-width="20%" prop="labelName">

				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="auto" min-width="10%">

				</el-table-column>
				<el-table-column label="操作" width="auto" min-width="10%">
<template slot-scope="scope">
              <div @click="deltab(scope.row.id)" class="tableBtn greens" >删除</div>
            </template>
				</el-table-column>
			</el-table>
			<div style="display: flex;">
				<el-button @click="clriz" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<div class="zhuti" v-if="ontype == '6'">
					<div style="padding: 20px 0;">日志查询条件组合</div>
					<div style="margin-bottom: 20px;">
						<el-button style="background-color: #3F9B6A;color: #fff;" @click="addzuhe">新增
						</el-button>
					
					</div>
					<el-table :data="zuheData"
						:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
						style="width: 100%">
						<el-table-column label="请求用户" min-width="20%" prop="conditionOne">
		
						</el-table-column>
						<el-table-column label="请求设备" min-width="20%" prop="conditionTwo">
								
						</el-table-column>
						<el-table-column label="操作" width="auto" min-width="10%">
		<template slot-scope="scope">
			<div @click="kuaisu(scope.row)" class="tableBtn greens" >快速查询</div>
		              <div @click="zuheDel(scope.row.id)" class="tableBtn greens" >删除</div>
		            </template>
						</el-table-column>
					</el-table>
					<div style="display: flex;">
						<el-button @click="clriz" class="buttonHover"
							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
					</div>
				</div>
		<el-dialog :visible.sync="tiaoAdd" :title="msg" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
			{{msg}}：
				<el-input v-model="tiaoObj.labelName"></el-input>
				
			</div>
			<div style="display: flex;">
				<el-button @click="close" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaoChek">确定
				</el-button>
			</div>
		
		</el-dialog>
		<el-dialog title="查询条件设置" :visible.sync="conShow"  style="padding: 0;" width="30%" center
					:close-on-click-modal="false">
				 <div style="padding: 20px;">
					<div><el-checkbox v-model="concat.one" label="请求用户条件"></el-checkbox></div> 
					<!-- <div><el-checkbox v-model="concat.two" label="账单金额"></el-checkbox></div> -->
					<div><el-checkbox v-model="concat.three" label="请求设备"></el-checkbox></div>
				 </div>
					<div style="display: flex;justify-content: flex-end;padding: 0px;">
						<el-button @click="closeconShow" class="buttonHover"
							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
						<el-button @click="CheckconShow" 
							style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">确定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="日志分析结果展示" :visible.sync="bingShow"  style="padding: 0;" width="30%" center
							:close-on-click-modal="false">
						 <div style="padding: 20px;">
						<div ref="bingzhan" style="width: 100%;height: 200px;"></div>
						 </div>
							<div style="display: flex;justify-content: flex-end;padding: 0px;">
								<el-button @click="bingShow = false" class="buttonHover"
									style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
							</div>
						</el-dialog>
						<el-dialog :visible.sync="zuheAdd" title="" style="padding: 0;" width="45%" center
							:close-on-click-modal="false" :show-close="false">
							<div style="padding:20px;">
							
							请求用户条件：	<el-input v-model="zuheObj.conditionOne"></el-input>
									请求设备条件：	<el-input v-model="zuheObj.conditionTwo"></el-input>
							</div>
							<div style="display: flex;">
								<el-button @click="zuheAdd=false" class="buttonHover"
									style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
								<el-button style="background-color: #3F9B6A;color: #fff;" @click="zuChek">确定
								</el-button>
							</div>
						
						</el-dialog>
				
	</div>
</template>

<script>
	import {
		logQuery,
		deleteList,
		liationByPage,
		liationAdds,
		liationDelete,
		trafficLabelByPage,
		trafficLabelInsert,
		trafficLabelEdit,
		payLogQueryAnalysis,
		businessPermissionIn,
		businessPermissioBy,
		businessPermissionDe
	} from '../../../api/online.js'
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				total: 0,
				flag: false,
				ggXin: false,
				index: 1,
				formInline: {
					merchantName: '', // 商家名称
					storeId: '', // 编码
					contacts: '', // 联系人
					businessEntity: '', //经营主体
					page: 0, // 当前页
					pageSize: 10 // 每页记录数
				},
				tableData: [],
				multipleSelection: 0,
				pageindex: {
					page: 0,
					pageSize: 10,
					name:'',
					describe:''
				},
				pageSize:10,
				biaoShow:false,
				ontype:'1',
				biaotable:[],
				tiaoAdd:false,
				tiaoObj:{
					labelName:'',
					createTime:'',
					type:5
				},
				fenxiShow:false,
				 multipleSelection: [],
				 conShow:false,
				 concat:{
				 		  one:true,
				 		  two:true,
				 		  three:true
				 },
				 msg:'日志类别',
				 bingShow:false,
				 zuheData:[],
				 zuheAdd:false,
				 zuheObj:{
					conditionOne:'',
					conditionTwo:'' 
				 }
			}
		},
		computed: {},
		mounted() {
			this.getAll()
		},
		methods: {
		addzuhe(){
			this.zuheObj.conditionOne = ''
			this.zuheObj.conditionTwo = ''
			this.zuheAdd = true
			
		},
			async zuChek(){
				await businessPermissionIn(this.zuheObj)
				this.zuheAdd = false
				this.getzuList()
			},
			kuaisu(row){
				this.pageindex.name = row.conditionOne
				this.pageindex.describe = row.conditionTwo
				this.ontype = '1'
				this.onSubmit()
			},
			async zuheDel(ids){
				await businessPermissionDe(ids)
				this.getzuList()
			},
			tiaojianzu(){
				this.ontype = '6'
				this.getzuList()
			},
			async getzuList(){
			  const res =  await businessPermissioBy({})
			  this.zuheData =  res.data
			},
			onSubmit(){
				this.getAll()
			},
			resetting(){
				this.pageindex.name = ''
				this.pageindex.describe =''
				this.getAll()
			},
			closeconShow(){
				this.concat = {
						  one:true,
						  two:true,
						  three:true
				}
				this.conShow = false
			},
			CheckconShow(){
				this.conShow = false
				
			},
			rifenxiCheck(){
				if(this.multipleSelection.length == 0){
					  this.$message({
					          message: '至少选中一条数据！',
					          type: 'warning'
					        });
					return
				}
				this.bingShow = true
				setTimeout(()=>{
					this.initChart(this.multipleSelection)
				},1000)
			},
			initChart(data) {
			let Dom = this.$refs.bingzhan
			let myChart = echarts.init(Dom)
			   const browserCount = {};
			        data.forEach(item => {
			          if (browserCount[item.browserName]) {
			            browserCount[item.browserName]++;
			          } else {
			            browserCount[item.browserName] = 1;
			          }
			        });
			        
			        // 转换为echarts所需格式
			        const seriesData = Object.keys(browserCount).map(key => ({
			          value: browserCount[key],
			          name: key
			        }));
			        
			        // 设置图表选项
			        const option = {
			          title: {
			            text: '占比',
			            left: 'center'
			          },
			          tooltip: {
			            trigger: 'item',
			            formatter: '{a} <br/>{b}: {c} ({d}%)'
			          },
			          legend: {
			            orient: 'vertical',
			            left: 'left',
			            data: seriesData.map(item => item.name)
			          },
			          series: [
			            {
			              name: '设备',
			              type: 'pie',
			              radius: '55%',
			              center: ['50%', '60%'],
			              data: seriesData,
			              emphasis: {
			                itemStyle: {
			                  shadowBlur: 10,
			                  shadowOffsetX: 0,
			                  shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			              }
			            }
			          ]
			        }
					option && myChart.setOption(option)
			    },
		  handleSelectionChange(val) {
		        this.multipleSelection = val;
		      },
			rifenxi(){
				this.fenxiShow = !this.fenxiShow 
			},
			clriz(val) {
				this.ontype = '1'
			},
		async tiaoChek(){
		 this.tiaoObj.createTime = this.currentTime()
			await trafficLabelInsert(this.tiaoObj)	
			this.tiaoAdd = false
			this.setTable(this.tiaoObj.type)
		},
		close(){
			this.tiaoAdd = false
			this.tiaoObj.labelName  = ''
		},
			add(val){
				if(val == '日志类别管理'){
					this.tiaoObj.type = 4
				}else{
					this.tiaoObj.type = 5
				}
				this.tiaoObj.labelName  = ''
				this.tiaoAdd = true
			},
			biaoSet(val) {
				this.biaoShow = true
				if(val == 4 ){
					this.msg = '日志类别管理'
				}else{
					this.msg = '日志集合标签设置'
				}
				this.ontype = '5'
				this.setTable(val)
			},
			async deltab(ids){
				await trafficLabelEdit(ids)
				if(this.msg == '日志类别管理'){
					this.setTable(4)
				}else{
					this.setTable(5)
				}
				
			},
			async	setTable(val){
						let obj ={
							pageNumber: 0,
							pageSize: 100,
							type:val
						}
					let res = await trafficLabelByPage(obj)
					this.biaotable = res.data
				},
			async getAll() {
				const res = await logQuery(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.totalElements
			},
			handleCurrentChange(val) {
				this.pageindex.page = val - 1
				this.getAll()
			},
			closeFn() {
				this.ggXin = false
				this.index = 1
			},
			delList(item) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							deleteList({
								id: item.webLogId
							}).then(res => {
								this.getAll()
								done();
							})
						} else {
							done();
						}
					}
				})

			},
			// 获取时间
			currentTime() {
			 let date = new Date();
			  let year = date.getFullYear();
			  let month = date.getMonth() + 1; // 月份从0~11，所以加一
			  let day = date.getDate();
			  let hours = date.getHours();
			  let minutes = date.getMinutes();
			  let seconds = date.getSeconds();
			
			  // 为月、日、小时、分钟和秒添加前导零（如果需要）
			  month = month < 10 ? '0' + month : month;
			  day = day < 10 ? '0' + day : day;
			  hours = hours < 10 ? '0' + hours : hours;
			  minutes = minutes < 10 ? '0' + minutes : minutes;
			  seconds = seconds < 10 ? '0' + seconds : seconds;
			
			  // 返回格式化的日期和时间字符串
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		}
	}
</script>

<style scoped>
	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;
		position: relative;
	}

	/deep/ .el-form-item__content {
		line-height: 0;
	}

	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}

	::v-deep .formSearch {
		position: relative;
		margin-bottom: 20px;
		display: flex;
		width: 100%;
		height: 30px;
		font-size: 14px;
		justify-content: space-between;

		.el-form-item__label {
			line-height: 28px;
			font-size: 14px;
			color: #000;
			font-weight: 100;
		}
	}

	.greens {
		color: #3F9B6A;
	}



	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}

	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}

	/deep/ .el-pagination__total {
		margin-top: 4px;
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}
</style>