<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti">
			<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="toolbar">
			  <el-form  :inline="true" :model="pageindex"> 
			    <el-form-item label="资源类型">
			    <el-select  placeholder="全部"   v-model="pageindex.leaseType"
			      style="width: 120px;margin-right: 15px">
			     <el-option label="商铺" value="商铺" />
				 <el-option label="场地" value="场地" />
				 <el-option label="广告位" value="广告位" />
			    </el-select>
			    </el-form-item>
			    <el-form-item label="日期">
			      <el-date-picker
			        v-model="pageindex.list"
			        type="daterange"
			        range-separator="至"
			        start-placeholder="开始时间"
			        end-placeholder="结束时间"
			        value-format="yyyy-MM-dd"
			      />
			    </el-form-item>
			
			    <el-form-item label-width="0">
			      <el-button   @click="search" style="background-color: #3F9B6A;color: #fff">查询</el-button>
			      <el-button  @click="clear" class="buttonHover"
			     style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
			    </el-form-item>
			  </el-form>
			</div>
			<div style="width: 100%;margin-bottom:30px;">
				<div style="display:flex;margin-top:10px;">
					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">商户统计</div>
						</div>
						<div ref="shop1TJ" style="width:100%;height: 400px;"></div>
					</div>
					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">转化率分析</div>
						</div>
						<div ref="shop1ZX" style="width:100%;height: 400px;"></div>

					</div>

				</div>
			</div>
			<div style="width: 100%;margin-bottom;20px;">
				<div style="display:flex;margin-top:10px;">

					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">出租率</div>
						</div>
						<div ref="shop2TJ" style="width:100%;height: 400px;"></div>
					</div>
					<div style="width:50%;height: 400px;marigin-right:20px;">
						<div style="display: flex;justify-content: space-between;">
							<div style="line-height:35px;">空置资源统计</div>
						</div>
						<div ref="shop3QS" style="width:100%;height: 400px;"></div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
  import {
   getInvestmentStatistics
  } from '@/api/cereBusinessInfo'
	import * as echarts from 'echarts'
	export default {
		name: 'atmosphereGl',
		data() {
			return {
				currentPage: 1,
				radio1: 0,
				total: 100,
				flag: false,
				pageSize: 10,
				tableData: [],
				pageindex: {
				leaseType:'',
				startTime:'',
				endTime:'',
				list:[]
				},
				listType:[]

			}
		},
		computed: {},
		mounted() {
			this.getAll()
			
		},

		methods: {
			search(){
				if(this.pageindex.list.length!=0){
					this.pageindex.startTime = this.pageindex.list[0]+' 00:00:00'
					this.pageindex.endTime = this.pageindex.list[1]+' 23:59:59'	
				}
				
				this.getAll()
			},
			clear(){
				this.pageindex={
				leaseType:'',
				startTime:'',
				endTime:'',
				list:[]
				}
				this.getAll()
			},
			charDam(val) {
		

				// 获取图表容器的 DOM 元素
				const chartDom = this.$refs.shop2TJ
				// 初始化 ECharts 实例
				const myChart = echarts.init(chartDom);
			 val.sort((a, b) => {
			       return new Date(a.month) - new Date(b.month);
			     });
			    const months =  val.map(item => item.month);
			   const lettingRate = val.map(item => item.lettingRate);
			    
			      const option = {
			        tooltip: {
			          trigger: 'axis'
			        },
			        xAxis: {
			          type: 'category',
			          boundaryGap: false,
			          data:months,
			        },
			        yAxis: {
			          type: 'value',
			          axisLabel: {
			            formatter: '{value}%'
			          }
			        },
			        series: [
			          {
			            name: '出租率',
			            type: 'line',
			            data: lettingRate,
			            symbol: 'circle',
			            symbolSize: 8,
			            lineStyle: {
			              color: '#4A90E2'
			            },
			            areaStyle: {
			              color: new echarts.graphic.LinearGradient(
			                0, 0, 0, 1,
			                [
			                  { offset: 0, color: '#4A90E2' },
			                  { offset: 1, color: 'rgba(74, 144, 226, 0.1)' }
			                ]
			              )
			            },
						// 新增：设置节点（小圆点）颜色
						            itemStyle: { 
						              normal: { 
						                color: '#2c87ff' // 节点颜色设为红色，可替换为其他颜色值（如 '#00ff00' 绿色、'#0000ff' 蓝色）
						              }
						            },
			          }
			        ]
			      };
				// 使用刚指定的配置项和数据显示图表
				option && myChart.setOption(option)
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			charDam1(val) {

				const chartDom = this.$refs.shop1ZX;
				const myChart = echarts.init(chartDom)
					
			const option = {
			        series: [
			          {
			            name: '转化率',
			            type: 'funnel',
						minSize: '25%',
						maxSize: '80%',
						sort: 'descending',
						color: ['#50B5FF', '#5AD8A6'],
			            data: [
			          { name: `意向客户 ${val.intention}`, value: val.intention },
			          { name: `签约客户 ${val.signContract}`, value: val.signContract }
			            ],
			            itemStyle: {
			              normal: {
			                borderColor: '#333',
			                borderWidth: 1,
							 scale: 10
			              }
			            },
			            label: {
			              normal: {
			                show: true,
			                position: 'inside'
			              }
			            },
			            labelLine: {
			              normal: {
			                show: true
			              }
			            },
			            tooltip: {
			              formatter: function (params) {
			                return `${params.name}: ${params.value}`;
			              }
			            },
			            funnelAlign: 'center',
			            gap: 5,
			            left: '10%',
			            right: '10%'
						
			          }
			        ],
			
					graphic: [
					          {
					            type: 'text',
					            left: '80%',
					            top: '60%',
					            style: {
					              text: `转化率${val.percentConversion}%`,
					              fill: '#666',
					              fontSize: 12
					            }
					          },
					        ]
			      };
				    option && myChart.setOption(option,true);
				    window.addEventListener('resize', () => myChart.resize());
			},
			charDam3(val) {
				let Dom = this.$refs.shop1TJ
				let myChart = echarts.init(Dom)
				  val.sort((a, b) => {
				        return new Date(a.mouth) - new Date(b.mouth);
				      });
				     const months =  val.map(item => item.mouth);
				    const intentMerchants = val.map(item => item.intention);
				     const signedMerchants =  val.map(item => item.signContract);
				      // 配置项
				      const option = {
				        tooltip: {
				          trigger: 'axis'
				        },
				        grid: {
				          left: '10%',
				          right: '10%',
				          bottom: '15%'
				        },
				        xAxis: {
				          type: 'category',
				          data: months,
				          boundaryGap: false
				        },
				        yAxis: {
				          type: 'value',
				          name: '商户数量'
				        },
				        series: [
				          {
				            name: '签约商户',
				            type: 'line',
				            data: signedMerchants,
				            symbol: 'circle',
				            lineStyle: {
				              color: '#1890ff'
				            },
				            itemStyle: {
				              color: '#1890ff'
				            }
				          },
				          {
				            name: '意向商户',
				            type: 'line',
				            data: intentMerchants,
				            symbol: 'circle',
				            lineStyle: {
				              color: '#52c41a'
				            },
				            itemStyle: {
				              color: '#52c41a'
				            }
				          }
				        ]
				      };
				option && myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},

			charDam5(val) {
			
				// 获取图表容器的 DOM 元素
				const chartDom = this.$refs.shop3QS
				// 初始化 ECharts 实例
				const myChart = echarts.init(chartDom);
				 // const data = val.sort((a, b) => b.vacancyDays - a.vacancyDays);
		   // 按vacancyDays降序排序
		      const sortedData = val.sort((a, b) => b.vacancyDays - a.vacancyDays);
		
		      // 取前10条数据
		      const top10Data = sortedData.slice(0, 10);
		
		      // 计算其他项的vacancyDays总和
		      const otherVacancyDays = sortedData.slice(10).reduce((sum, item) => sum + item.vacancyDays, 0);
		
		      // 添加其他项
		      top10Data.push({
		        resourceName: '其他',
		        vacancyDays: otherVacancyDays
		      });
		      const option = {
		        tooltip: {
		          trigger: 'axis',
		          axisPointer: {
		            type: 'shadow'
		          }
		        },
				grid: {
				  left: '0%', 
				  right: '5%',
				  top: '8%',
				  bottom: '8%',
				  containLabel: true
				},
				
		        xAxis: {
		          type: 'value'
		        },
		        yAxis: {
		          type: 'category',
		          data: top10Data.map(item => item.resourceName)
		        },
		        series: [
		          {
		            name: '空置天数',
		            type: 'bar',
		            data: top10Data.map(item => item.vacancyDays),
					barWidth: 30,  
					barCategoryGap: '50%', // 原为 40%，调整为 60% 增加间隙
					barGap: '20%', 
		            itemStyle: {
		              color: '#3f9b6a',
		            },
		            label: {
		              normal: {
		                show: true,
		                position: 'insideRight' // 数值显示在柱子右侧
		              }
		            }
		          }
		        ],
				
				  // graphic: [
				  //         {
				  //           type: 'text',
				  //           left: '92%', // 右侧5%位置
				  //           bottom: '12%', // 底部5%位置
				  //           style: {
				  //             text: '天',
				  //             fill: '#666',
				  //             fontSize: 12,
				  //             // fontWeight: 'bold'
				  //           }
				  //         }
				  //       ]
		      };
			
				// 使用刚指定的配置项和数据显示图表
				option && myChart.setOption(option)
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			
			},

			async getAll() {
				const res = await getInvestmentStatistics(this.pageindex)
			this.charDam3(res.data.signContractAndIntentionVOList)
				this.charDam1(res.data.percentConversionVO)
				this.charDam(res.data.lettingRateVOList)
				this.charDam5(res.data.vacantDaysVOS)
				
			},
	
		}
	}
</script>

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

	}

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

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

	.formSearch {
		position: relative;
		margin-top: 30px;
		display: flex;
		width: 100%;
		height: 30px;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.greens {
		color: #3F9B6A;
	}


	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: flex-start;
		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 .el-select .el-input.is-focus .el-input__inner {
		border-color: #3F9B6A
	}

	/deep/ .el-dialog__header {
		background-color: #fff;
		padding: 0
	}

	/deep/ .el-radio__input.is-checked .el-radio__inner {
		border-color: #3F9B6A;
		background: #3F9B6A;
	}

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