<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);
		// 模拟数据
		     const shopCount = 50;
		     const adCount = 30;
		     const venueCount = 20;
		     const totalCount = shopCount + adCount + venueCount;
				
		     const option = {
		       tooltip: {
		         trigger: 'item',
		         formatter: '{a} <br/>{b}: {c} ({d}%)'
		       },
		       legend: {
		          orient: 'horizontal', // 横向展示
		                 left: 'center', // 居中显示
		         data: ['商铺', '广告位', '场地']
		       },
		       series: [
		         {
		           name: '资源分布',
		           type: 'pie',
		           radius: ['50%', '70%'],
		           avoidLabelOverlap: false,
		           label: {
		             show: true,
		             position: 'outside',
		             formatter: '{b}: {c}'
		           },
		           labelLine: {
		             show: true
		           },
		           data: [
		             { value: shopCount, name: '商铺' },
		             { value: adCount, name: '广告位' },
		             { value: venueCount, name: '场地' }
		           ]
		         },
		         {
		   name: '总量',
		   type: 'pie',
		   radius: ['0%', '0%'], // 不显示圆形
		   label: {
		     show: true,
		     position: 'center',
		     formatter: `总量: ${totalCount}`,
		     fontSize: 20
		   },
		           data: [
		             { value: totalCount, name: '总量' }
		           ]
		         }
		       ]
		     };
				// 使用刚指定的配置项和数据显示图表
				option && myChart.setOption(option)
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			charDam1(val) {

				const chartDom = this.$refs.shop1ZX;
				const myChart = echarts.init(chartDom)
					
		 // 模拟数据
		      const shopCount = 50;
		      const adCount = 30;
		      const venueCount = 20;
		      const totalCount = shopCount + adCount + venueCount;
		
		      const option = {
		        tooltip: {
		          trigger: 'item',
		          formatter: '{a} <br/>{b}: {c} ({d}%)'
		        },
		        legend: {
		           orient: 'horizontal', // 横向展示
		                  left: 'center', // 居中显示
		          data: ['商铺', '广告位', '场地']
		        },
		        series: [
		          {
		            name: '资源分布',
		            type: 'pie',
		            radius: ['50%', '70%'],
		            avoidLabelOverlap: false,
		            label: {
		              show: true,
		              position: 'outside',
		              formatter: '{b}: {c}'
		            },
		            labelLine: {
		              show: true
		            },
		            data: [
		              { value: shopCount, name: '商铺' },
		              { value: adCount, name: '广告位' },
		              { value: venueCount, name: '场地' }
		            ]
		          },
		          {
            name: '总量',
            type: 'pie',
            radius: ['0%', '0%'], // 不显示圆形
            label: {
              show: true,
              position: 'center',
              formatter: `总量: ${totalCount}`,
              fontSize: 20
            },
		            data: [
		              { value: totalCount, name: '总量' }
		            ]
		          }
		        ]
		      };

				    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 months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
			      const contractCounts = [12, 15, 20, 18, 22, 25, 28, 30, 26, 24, 21, 23];
			
			      const option = {
			        tooltip: {
			          trigger: 'axis'
			        },
			        xAxis: {
			          type: 'category',
			          data: months,
			          boundaryGap: false
			        },
			        yAxis: {
			          type: 'value',
			          name: '签约数'
			        },
			        series: [
			          {
			            name: '签约数',
			            type: 'line',
			            data: contractCounts,
			            symbol: 'circle',
			            lineStyle: {
			              color: '#4A90E2'
			            },
			            itemStyle: {
			              color: '#4A90E2'
			            },
			            areaStyle: {
			              color: new echarts.graphic.LinearGradient(
			                0, 0, 0, 1,
			                [
			                  { offset: 0, color: 'rgba(74, 144, 226, 0.3)' },
			                  { offset: 1, color: 'rgba(74, 144, 226, 0.1)' }
			                ]
			              )
			            }
			          }
			        ]
			      };

				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 months = ['1月', '2月', '3月', '4月', '5月', '6月'];
		           const rentPrices = [50, 52, 55, 53, 56, 58];
		     
		           const option = {
		             tooltip: {
		               trigger: 'axis'
		             },
		             xAxis: {
		               type: 'category',
		               data: months,
		               boundaryGap: false
		             },
		             yAxis: {
		               type: 'value',
		               name: '租金价格（元/m²）'
		             },
		             series: [
		               {
		                 name: '租金价格',
		                 type: 'line',
		                 data: rentPrices,
		                 symbol: 'circle',
		                 lineStyle: {
		                   color: '#4A90E2'
		                 },
		                 itemStyle: {
		                   color: '#4A90E2'
		                 },
		                 areaStyle: {
		                   color: new echarts.graphic.LinearGradient(
		                     0, 0, 0, 1,
		                     [
		                       { offset: 0, color: 'rgba(74, 144, 226, 0.3)' },
		                       { offset: 1, color: 'rgba(74, 144, 226, 0.1)' }
		                     ]
		                   )
		                 }
		               }
		             ]
		           };

				// 使用刚指定的配置项和数据显示图表
				option && myChart.setOption(option)
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			
			},

			async getAll() {
				const res = await getInvestmentStatistics(this.pageindex)
			this.charDam3()
				this.charDam1()
				this.charDam()
				this.charDam5()
				
			},
	
		}
	}
</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>