<template>
	<div class="table-box">
		<div class="card table-search" style="overflow: hidden;">
			<el-form ref="formRef" :model="searchParam" :inline="true" label-width="auto">
				<el-form-item label="自动站：" prop="base">
					<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
						<el-option v-for="item in baseOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="观测时间：" prop="base" >
					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
						start-placeholder="开始时间" end-placeholder="结束时间"  style="width: 300px" />
				</el-form-item>
				<el-form-item>
					<div>
						<el-button type="primary">查询</el-button>
						<el-button plain @click="resetForm(formRef)">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="main_list">
			<el-row :gutter="15">
				<el-col :span="24">
					<div class="chart_item zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>雷电区域分析</span>
						</div>
						<div class="mt5">
							<div ref="data" class="data_box"></div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="dataSynthesis">
import * as echarts from 'echarts';

import { ref, reactive, onMounted,computed,watch } from "vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/stores/modules/global";
const globalStore = useGlobalStore();
const isDark = computed(() => globalStore.isDark);


const formRef = ref()
const data = ref()


const router = useRouter();
const searchParam = reactive({
	base: undefined,
	date: ''

})
const baseOptions = ref([{
	value: 0,
	label: 'M1986',
},
{
	value: 1,
	label: 'M1987',
}])

// resetForm
const resetForm = (formEl) => {
	if (!formEl) return;
	formEl.resetFields();
};

const showData = () => {

	let mychart = echarts.init(data.value);
	let option = {


  radar: {
    shape: 'circle',
	// radius: 320, // 大小
    
    
    name: { // (圆外的标签)雷达图每个指示器名称的配置项。
            formatter: '{value}',
            textStyle: {
                fontSize: 15,
                color: isDark.value ? '#fff' : "#000"
            }
        },
        nameGap: 5,
        // 指示器名称和指示器轴的距离。[ default: 15 ]
        splitNumber: 5,
        splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
                color: '#bbbbbb',
                // 分隔线颜色
                width: 1,
                // 分隔线线宽
            }
        },
        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: { // 分隔区域的样式设置。
                color: [isDark.value ? '#000' : "#fff",isDark.value ? '#000' : "#fff"],
                // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
        },
    indicator: [
      { name: '360°', max: 200,axisLabel: { show: true,formatter:'{value}km',color:isDark.value ? '#fff' : "#000",showMinLabel: false, }, },
      { name: '',max:200},
      { name: '315°',  },
      { name: '', },
      { name: '270°', },
      { name: '',  },
      { name: '225°', },
      { name: '',  },
      { name: '180°', },
      { name: '',  },
      { name: '135°',  },
      { name: '',  },
      { name: '90°',  },
      { name: '',  },
      { name: '45°',  },
      { name: '',  },
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      
      data: [
        {
          value: [20],
          name: 'Allocated Budget',
           itemStyle: { // 单个拐点标志的样式设置。
                normal: {
                    // color:'#d1d6dd'
                }
            },
        },
        
      ]
    }
  ]
};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

watch(isDark, () => {
	showData()
});
onMounted(() => {
	showData()
})

</script>
<style scoped lang="scss">
.main_list {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: calc(100vh - 150px);
	margin-bottom: 10px;
	overflow-y: scroll;
	overflow-x: hidden;


	.chart_item {
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
		// height: 100%;
		// margin-bottom: 15px;


		.item_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.FTP_box {
			padding: 0 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.FTP_item {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					width: 56px;
					margin-bottom: 20px;
				}
			}

		}
	}

	.info_box {
		.info_title {
			color: #999999;
			font-size: 16px;
		}

		.info_content {
			height: 40px;
			font-weight: bold;
			color: #000;
			font-size: 26px;
		}
	}

}

.data_box {
	height: calc(100vh - 215px);
	// height: 100%;
}
</style>