<template>
	<view class="detail-warp">
		<view>
			<view class="top-search">
				{{ this.$t('homePage.price.elePriceQuery') }}
			</view>
			<view style="padding: 0 20rpx 0 20rpx;margin-top: -85rpx;">
				<view class="price-box">
					<Section :title="this.$t('homePage.price.queryCriteria')">
						<view slot="right" style="flex: 1">
							<view class="top-right-box" style="color:rgba(0, 156, 119, 1)" @click="showPopup">
								{{this.$t('homePage.price.sift')}}<u-icon name="arrow-right" color="rgba(0, 156, 119, 1)" size="32"></u-icon>
							</view>
						</view>
					</Section>
					<view class="search-box">
						<view class="content-box">
							<view class="content-title">
								{{ this.$t('homePage.price.provinceRegion') }}
							</view>
							<view class="content-value">
								{{ regionName }}
							</view>

						</view>
						<view class="content-box">
							<view class="content-title">
								{{ this.$t('homePage.price.customerType') }}
							</view>
							<view class="content-value">
								{{ customerName }}
							</view>

						</view>
						<view class="content-box">
							<view class="content-title">
								{{ this.$t('homePage.price.eleType') }}
							</view>
							<view class="content-value">
								{{ electricityName }}
							</view>

						</view>

						<view class="content-box">
							<view class="content-title">
								{{ this.$t('homePage.price.volLevel') }}
							</view>
							<view class="content-value">
								{{ voltageLevelName }}
							</view>

						</view>
						<view class="content-box">
							<view class="content-title">
								{{ this.$t('homePage.price.exeTime') }}
							</view>
							<view class="content-value">
								{{ filters.executionTime }}
							</view>

						</view>

					</view>
				</view>

			</view>

			<zero-loading v-if="loading"></zero-loading>
			<view v-else-if="!detailList.length && !loading" style="width: 100%;height: calc(100vh - 500rpx);">
				<u-empty :text="$t('homePage.price.noData')" mode="list"></u-empty>
			</view>
			<view v-else-if="detailList.length && !loading" style="padding: 0 20rpx 0 20rpx;">

				<view class="price-box">
					<Section :title="$t('homePage.price.eleLevel')" />
					<view class="time-title">
						{{ this.$t('homePage.price.exeTime') }}
					</view>
					<view class="time-value">
						{{ detailData.executionTime }}
					</view>
					<view class="time-title">
						{{ this.$t('homePage.price.eleType') }}
					</view>
					<view class="time-value">
						{{ detailData.electricityTypeLabel }}
					</view>
					<view class="time-title">
						{{ this.$t('homePage.price.volLevel') }}
					</view>
					<view class="time-value">
						{{ detailData.voltageLevelLabel }}
					</view>
					<view class="title">
						{{ this.$t('homePage.price.fsdd') }}{{ this.$t('homePage.price.dietailUnit') }}
					</view>
					<view class="levels-chart">
						<zero-loading v-if="levelsChart_loading"></zero-loading>
						<charts v-else id="levelsChart" :options="levelsChart_option" :labelFormatter="true" :dataList="dataList"></charts>
					</view>
					<view class="title">
						{{ this.$t('homePage.price.eleprice') }}{{ this.$t('homePage.price.dietailUnit') }}
					</view>
					<view class="value-box">
						<view class="box">
							<view class="box-value">
								{{ detailData.nonTimePrice ? detailData.nonTimePrice : '--' }}
							</view>
							<view class="box-title">
								{{ this.$t('homePage.price.nonTime') }}
							</view>
						</view>
						<view class="box">
							<view class="box-value">
								{{ detailData.proxyPrice ? detailData.proxyPrice : '--' }}
							</view>
							<view class="box-title">
								{{ this.$t('homePage.price.proxyPrice') }}
							</view>
						</view>
						<view class="box">
							<view class="box-value">
								{{ detailData.transmissionPrice ? detailData.transmissionPrice : '--' }}
							</view>
							<view class="box-title">
								{{ this.$t('homePage.price.transmission') }}
							</view>
						</view>
						<view class="box">
							<view class="box-value">
								{{ detailData.addPrice ? detailData.addPrice : '--' }}
							</view>
							<view class="box-title">
								{{ this.$t('homePage.price.attachPrice') }}
							</view>
						</view>

					</view>
				</view>
				<view class="price-box">
					<Section :title="$t('homePage.price.historytrend')">
						<view slot="right" style="flex: 1">
							<view class="top-right-box">
								<view class="top-right-item" :class="{ active: historytype === 'chart' }"
									@click="changeHistoryType('chart')">{{this.$t('homePage.price.curve')}}</view>
								<view class="top-right-item" :class="{ active: historytype === 'table' }"
									@click="changeHistoryType('table')">{{this.$t('homePage.price.list')}}</view>
							</view>
						</view>
					</Section>
					<view class="levels-chart">
						<zero-loading v-if="historyChart_loading" position="absolute">></zero-loading>
						<charts v-else-if="!historyChart_loading && historytype === 'chart'" id="historyChart"
							:options="historyChart_option"></charts>
						<uni-table v-else-if="!historyChart_loading && historytype === 'table'" ref="table"
							:loading="historyChart_loading" border style="margin-top:10rpx;height: 98%;" emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="100" align="center">{{this.$t('homePage.price.exeTime')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.spike')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.speak')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.regular')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.lowValley')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.deepValley')}}</uni-th>


							</uni-tr>
							<uni-tr v-for="(item, index) in history_tableData" :key="index">
								<uni-td align="center">{{ item.executionTime }}</uni-td>
								<uni-td align="center">{{ item.spikePrice ? item.spikePrice : '-' }}</uni-td>
								<uni-td align="center">{{ item.peakPrice ? item.peakPrice : '-' }}</uni-td>
								<uni-td align="center">{{ item.regularPrice ? item.regularPrice : '-' }}</uni-td>
								<uni-td align="center">{{ item.lowValleyPrice ? item.lowValleyPrice : '-' }}</uni-td>
								<uni-td align="center">{{ item.deepValleyPrice ? item.deepValleyPrice : '-' }}</uni-td>

							</uni-tr>
						</uni-table>

					</view>
				</view>
				<view class="price-box">
					<Section :title="$t('homePage.price.peakDifference')">
						<view slot="right" style="flex: 1">
							<view class="top-right-box">
								<view class="top-right-item" :class="{ active: differencetype === 'chart' }"
									@click="changeDifferenceType('chart')">{{this.$t('homePage.price.curve')}}</view>
								<view class="top-right-item" :class="{ active: differencetype === 'table' }"
									@click="changeDifferenceType('table')">{{this.$t('homePage.price.list')}}</view>
							</view>
						</view>
					</Section>
					<view class="levels-chart">
						<zero-loading v-if="differenceChart_loading" position="absolute"></zero-loading>
						<charts v-else-if="!differenceChart_loading && differencetype === 'chart'" id="differenceChart"
							:options="differenceChart_option"></charts>
						<uni-table v-else-if="!differenceChart_loading && differencetype === 'table'" ref="table"
							:loading="differenceChart_loading" border style="margin-top:10rpx;height: 98%;" emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="100" align="center">{{this.$t('homePage.price.peakDifferencePrice')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.exeTime')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.dayHighPrice')}}</uni-th>
								<uni-th width="100" align="center">{{this.$t('homePage.price.dayLowtPrice')}}</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in difference_tableData" :key="index">
								<uni-td align="center">{{ item.executionTime ? item.executionTime : '-' }}</uni-td>
								<uni-td align="center">{{ item.diffPrice ? item.diffPrice : '-' }}</uni-td>
								<uni-td align="center">{{ item.maxPrice ? item.maxPrice : '-' }}</uni-td>
								<uni-td align="center">{{ item.minPrice ? item.minPrice : '-' }}</uni-td>

							</uni-tr>
						</uni-table>
					</view>
				</view>

			</view>
		</view>

		<view class="popup-box">
			<u-popup v-model="popupShow" mode="bottom" border-radius="20" height="75%" placement="top-end" @close="closePop">
				<view class="title">{{this.$t('homePage.price.sift')}}</view>
				<view class="s-station">
					<u-section :title="$t('homePage.price.provinceRegion')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
						style="margin-bottom: 20rpx;"></u-section>
					<view style="margin-top: 20rpx;">
						<u-input v-model="regionName" type="select" border="border" :placeholder="$t('homePage.price.selectProvinceRegion')"
							@click="regionShow = true" />
					</view>

					<u-select :default-value="defaultRegionArr" v-model="regionShow" :list="regionList" value-name="id"
						label-name="regionName" @confirm="confirmRegion"></u-select>
				</view>

				<view class="s-station">
					<u-section :title="$t('homePage.price.customerType')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
						style="margin-bottom: 20rpx;"></u-section>
					<view style="margin-top: 20rpx;">
						<u-input v-model="customerName" type="select" border="border"  :placeholder="$t('homePage.price.selectEleCustomers')"
							@click="customerShow = true" />
					</view>


					<u-select v-model="customerShow" :default-value="defaultcCustomerArr" :list="customerList"
						@confirm="confirmCustomer" value-name="value" label-name="name"></u-select>
				</view>

				<view class="s-station">
					<u-section :title="$t('homePage.price.eleType')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
						style="margin-bottom: 20rpx;"></u-section>
					<view style="margin-top: 20rpx;">
						<u-input v-model="electricityName" type="select" border="border" :placeholder="$t('homePage.price.selectEleType')"
							@click="electricityShow = true" />
					</view>

					<u-select :default-value="defaultElectricityArr" v-model="electricityShow" :list="useEleList" value-name="value"
						label-name="name" @confirm="confirmElectricity"></u-select>
				</view>

				<view class="s-station">
					<u-section :title="$t('homePage.price.volLevel')" line-color="#009C77" color="#2A2A2A" class="s-title" :right="false"
						style="margin-bottom: 20rpx;"></u-section>
					<view style="margin-top: 20rpx;">
						<u-input v-model="voltageLevelName" type="select" border="border" :placeholder="$t('homePage.price.selectVoltageLevel')"
							@click="voltageLevelShow = true" />
					</view>

					<u-select v-model="voltageLevelShow" :default-value="defaultVoltageLevelList" :list="useVolList"
						@confirm="confirmVoltage" value-name="value" label-name="name"></u-select>
				</view>

				<view class="s-station">
					<u-section :title="$t('homePage.price.exeTime')" :default-value="defaultcTimeArr" line-color="#009C77" color="#2A2A2A" class="s-title"
						:right="false" style="margin-bottom: 20rpx;"></u-section>
					<view style="margin-top: 20rpx;"><u-input v-model="filters.executionTime" type="select" border="border"
							:placeholder="$t('homePage.price.selectExeTime')" @click="executionTimeShow = true" />
					</view>

					<u-picker v-model="executionTimeShow" mode="time" :params="timeParams" @confirm="confirmTime"></u-picker>
				</view>

				<view class="other-button">
					<u-button type="warning" :custom-style="resetButtonStyle" @click="reset">{{ this.$t('homePage.price.reset') }}</u-button>
					<u-button type="primary" :custom-style="sureButtonStyle" @click="search">{{ this.$t('homePage.price.sure') }}</u-button>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
import Section from '@/components/section/index.vue'
import charts from "@/components/charts/index";
import Search from "@/components/Search/index";
export default {
	data() {
		return {
			background: {
				backgroundColor: "#0EA17E",
			},
			detailData: {},
			levelsChart_loading: false,
			levelsChart_option: {},
			historyChart_loading: false,
			historyChart_option: {},
			differenceChart_loading: false,
			differenceChart_option: {},
			colorList: [{
				name: '深谷',
				color: '#00B754'
			},
			{
				name: '谷',
				color: '#A1CE21'
			},
			{
				name: '平',
				color: '#048FFF'
			},
			{
				name: '峰',
				color: '#FF8A35'
			},
			{
				name: '尖',
				color: '#FF3333'
			}
			],
			popupShow: false,
			filters: {
				regionId: undefined,
				electricityType: undefined,
				customerType: undefined,
				voltageLevel: undefined,
				executionTime: undefined
			},
			regionName: '上海',
			electricityName: '两部制',
			customerName: '大工业用户',
			voltageLevelName: '10千伏',
			popupShow: false,
			regionShow: false, // 省市区域
			regionList: [], //省市区域
			electricityShow: false, //用电部制/分类
			customerShow: false, //用电客户
			voltageLevelShow: false, //电压等级
			executionTimeShow: false, //执行日期
			timeParams: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			sureButtonStyle: {
				backgroundColor: 'rgba(0, 156, 119, 1)',
				width: '280rpx',
				height: '70rpx',
				fontSize: '28rpx',
				color: 'rgba(255, 255, 255, 1)'
			},
			resetButtonStyle: {
				backgroundColor: 'rgba(191, 228, 159, 1)',
				width: '280rpx',
				height: '70rpx',
				fontSize: '28rpx',
				color: 'rgba(40, 40, 40, 1)'
			},
			dataList: [],
			loading: false,
			defaultRegionArr: [],
			defaultElectricityArr: [],
			defaultcCustomerArr: [],
			defaultVoltageLevelList: [],
			defaultcTimeArr: [],
			history_tableData: [],
			difference_tableData: [],
			historytype: 'chart',
			differencetype: 'chart',
			detailList: [],
			electricityList: [],
			customerList: [],
			voltageLevelList: [],
			useEleList: [],
			useCustList: [],
			useVolList: [],
			middleIndexList: [],
			dataList: []

		}
	},
	computed: {

	},
	components: {
		Section,
		charts,
		Search
	},
	onLoad() {

	},
	created() {
		this.getRegionList()
		var currentDate = new Date();
		// 获取年份和月份
		var year = currentDate.getFullYear();
		var month = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
		// 格式化为"yyyy-mm"的格式
		var formattedDate = year + '-' + (month < 10 ? '0' + month : month);
		this.filters.regionId = 18
		this.filters.electricityType = 2
		this.filters.customerType = 2
		this.filters.voltageLevel = 4
		this.filters.executionTime = formattedDate
		this.getData()
		this.loading = true

	},
	methods: {
		reset() {
			var currentDate = new Date();
			// 获取年份和月份
			var year = currentDate.getFullYear();
			var month = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
			// 格式化为"yyyy-mm"的格式
			var formattedDate = year + '-' + (month < 10 ? '0' + month : month);
			this.filters.regionId = 18
			this.filters.electricityType = 2
			this.filters.customerType = 2
			this.filters.voltageLevel = 4
			this.filters.executionTime = formattedDate
			this.regionName = '上海'
			this.electricityName = '两部制'
			this.customerName = '大工业用户'
			this.voltageLevelName = '10千伏'

			this.useEleList = this.electricityList.filter(item => +item.type === +this.filters.customerType)
			this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.filters.customerType)
			this.defaultFind()
		},
		defaultFind() {
			const regionIndex = this.regionList.findIndex((item) => {
				return +item.id === +this.filters.regionId
			})
			this.defaultRegionArr = [regionIndex]

			const electricityIndex = this.electricityList.findIndex((item) => {

				return +item.value === +this.filters.electricityType
			})
			this.defaultElectricityArr = [electricityIndex]

			const customerIndex = this.customerList.findIndex((item) => {
				return +item.value === +this.filters.customerType
			})
			this.defaultcCustomerArr = [customerIndex]

			const voltageLevelIndex = this.voltageLevelList.findIndex((item) => {
				return +item.value === +this.filters.voltageLevel
			})
			this.defaultVoltageLevelList = [voltageLevelIndex]
		},
		changeHistoryType(val) {
			this.historytype = val
			this.getHistoryChart(this.detailData.id)
		},
		changeDifferenceType(val) {
			this.differencetype = val
			this.getDifferenceChart(this.detailData.id)
		},
		async getRegionList() {
			const {
				data
			} = await this.$u.api.proxyPrice.GetIndustrialElecRegionList()
			this.regionList = data
			const regionIndex = this.regionList.findIndex((item) => {
				return +item.id === +this.filters.regionId
			})
			this.electricityList = this.regionList[regionIndex].electricityType ? JSON.parse(this.regionList[regionIndex].electricityType) : []
			this.customerList = this.regionList[regionIndex].customerType ? JSON.parse(this.regionList[regionIndex].customerType) : []
			this.voltageLevelList = this.regionList[regionIndex].voltageLevel ? JSON.parse(this.regionList[regionIndex].voltageLevel) : []
			this.useEleList = this.electricityList.filter(item => +item.type === +this.filters.customerType)
			this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.filters.customerType)

			this.defaultFind()
		},
		decSearch(e) {

		},
		showPopup() {
			this.popupShow = true
		},
		closePop() {

		},
		async getData() {
			const params = {
				pageNum: 1,
				pageSize: 2,
				...this.filters
			}
			try {
				const {
					data
				} = await this.$u.api.proxyPrice.GetIndustrialElecPricePage(params)
				this.detailData = data.list[0]
				this.detailList = data.list
				if (this.detailData?.id) {
					this.getLevelsChart(this.detailData.id)
					this.getHistoryChart(this.detailData.id)
					this.getDifferenceChart(this.detailData.id)
				}

			} finally {
				this.loading = false
			}

		},

		confirmRegion(val) {

			const regionIndex = this.regionList.findIndex((item) => {
				return +item.id === +val[0].value
			})

			this.defaultRegionArr = [regionIndex]
			this.electricityList = this.regionList[regionIndex].electricityType ? JSON.parse(this.regionList[regionIndex].electricityType) : []
			this.customerList = this.regionList[regionIndex].customerType ? JSON.parse(this.regionList[regionIndex].customerType) : []
			this.voltageLevelList = this.regionList[regionIndex].voltageLevel ? JSON.parse(this.regionList[regionIndex].voltageLevel) : []
			if (+this.filters.regionId !== val[0].value) {
				this.filters.customerType = this.customerList[0].value
				this.customerName = this.customerList[0].name
				this.useEleList = this.electricityList.filter(item => +item.type === +this.customerList[0].value)
				this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.customerList[0].value)
				this.filters.electricityType = this.useEleList[0].value
				this.electricityName = this.useEleList[0].name
				this.filters.voltageLevel = this.voltageLevelList[0].value
				this.voltageLevelName = this.voltageLevelList[0].name
				this.defaultElectricityArr = [0]
				this.defaultcCustomerArr = [0]
				this.defaultVoltageLevelList = [0]
			}
			this.filters.regionId = val[0].value
			this.regionName = val[0].label

		},

		confirmCustomer(val) {

			const customerIndex = this.customerList.findIndex((item) => {
				return +item.value === +val[0].value
			})
			this.customerName = val[0].label
			this.filters.customerType = val[0].value
			this.defaultcCustomerArr = [customerIndex]
			this.useEleList = this.electricityList.filter(item => +item.type === +val[0].value)


			this.electricityName = this.useEleList[0].name
			this.filters.electricityType = this.useEleList[0].value
			this.defaultElectricityArr = [0]
			this.useVolList = this.voltageLevelList.filter(item => +item.type === +this.useEleList[0].value)


			this.voltageLevelName = this.useVolList[0].name
			this.filters.voltageLevel = this.useVolList[0].value
			this.defaultVoltageLevelList = [0]

		},

		confirmElectricity(val) {
			const electricityIndex = this.useEleList.findIndex((item) => {
				return +item.value === +val[0].value
			})
			this.electricityName = val[0].label
			this.filters.electricityType = val[0].value
			this.defaultElectricityArr = [electricityIndex]
			this.useVolList = this.voltageLevelList.filter(item => +item.type === +val[0].value)
			this.voltageLevelName = this.useVolList[0].name
			this.filters.voltageLevel = this.useVolList[0].value
			this.defaultVoltageLevelList = [0]
		},

		confirmVoltage(val) {
			const voltageLevelIndex = this.useVolList.findIndex((item) => {
				return +item.value === +val[0].value
			})
			this.defaultVoltageLevelList = [voltageLevelIndex]
			this.filters.voltageLevel = val[0].value
			this.voltageLevelName = val[0].label
		},
		confirmTime(val) {
			this.filters.executionTime = val.year + '-' + val.month
		},
		search() {
			this.pageNum = 1;
			this.dataList = [];
			this.getData();
			this.popupShow = false;
		},
		findMiddleIndex(arr) {
			let firstIndex = -1 // 第一个不为null的

			let prev = -1
			const result = []

			for (let i = 0; i < arr.length; i++) {
				if (arr[i] !== null) {
					if (firstIndex === -1) {
						firstIndex = i
					}
					if (i !== arr.length - 1) {
						if (arr[i + 1] === null) {
							prev = i
							result.push((prev + firstIndex) / 2)
							firstIndex = -1
						}
					} else if (i === arr.length - 1) {
						prev = i
						result.push((prev + firstIndex) / 2)
						firstIndex = -1
					}
				}
			}

			return result
		},
		async getLevelsChart(id) {
			this.levelsChart_loading = true
			try {
				const res = await this.$u.api.proxyPrice.GetTouLineById(id)
				this.initLevelsChart(res.data)
			  this.dataList = res.data ? res.data : []
			} finally {
				this.levelsChart_loading = false
			}

		},
		initLevelsChart(data) {
			const series = []
			if (data.length > 0) {
				data.map(item => {
					this.middleIndexList = this.findMiddleIndex(item.list)
					const colorInfo = this.colorList.find(color => color.name === item.name)
					const param = {
						type: 'line',
						itemStyle: {
							normal: {
								color: colorInfo ? colorInfo.color : undefined,
								lineStyle: {
									color: colorInfo ? colorInfo.color : undefined
								},
								areaStyle: {
									type: 'default',
									opacity: 0.2
								}
							}
						},
						name: item.name,
						data: item.list,
						symbol: 'circle',
						'symbolSize': 0.001,
						label: {
							show: true,
							formatter(params) {
								const isInclude = this.middleIndexList.findIndex(i => i === params.dataIndex)
								if (isInclude === -1) {
									return ''
								} else {
									return params.data
								}
							}
						}


					}
					series.push(param)
				})
			}
			this.levelsChart_option = {
				tooltip: {
					trigger: 'axis',
					confine: true,
					textStyle: {
						textShadowBlur: 10, // 重点
						textShadowColor: 'transparent', // 重点
					},
				},
				legend: {

				},
				grid: {

					bottom: "15%",
					top: "20%",
				},
				calculable: true,
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: ['0', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6',
						'6.5', '7', '7.5', '8', '8.5', '9', '9.5', '10', '10.5', '11', '11.5', '12',
						12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 17.5, 18, 18.5, 19, 19.5, 20,
						20.5, 21, 21.5, 22, 22.5, 23, 23.5, 24
					],
					splitLine: {
						show: true,
						lineStyle: {
							color: '#F0F0F0',
						}
					},
					axisLine: {
						lineStyle: {
							color: '#F0F0F0',
						}
					},
					axisLabel: {
						show: true,
						color: '#A3A3A3'
					},

					axisTick: {
						show: false
					}
				}],
				yAxis: [{
					type: 'value',

					axisLine: {
						show: false
					},
					axisLabel: {
						show: true,
						color: '#A3A3A3'
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#F0F0F0',
						}
					}
				}],
				series: series
			}
		},
		async getHistoryChart(id) {
			this.historyChart_loading = true
			try {
				const res = await this.$u.api.proxyPrice.GetTouLineHistoryById(id)
				this.history_tableData = res.data.table
				this.initHistoryChart(res.data)
			} finally {
				this.historyChart_loading = false
			}

		},
		initHistoryChart(data) {
			const series = []
			const x_data = []
			if (data.line && data.line.length > 0) {
				data.line.map((item, index) => {
					const line_y_data = []
					if (item.list && item.list.length > 0) {
						item.list.map((itemLine) => {
							line_y_data.push(itemLine.value)
							if (index === 0) {
								x_data.push(itemLine.date)
							}
						})
					}
					const colorInfo = this.colorList.find(color => color.name === item.name)
					const param = {
						type: 'line',
						smooth: true,
						symbol: line_y_data.length > 1 ? 'none' : 'circle',
						data: line_y_data,
						name: item.name,
						itemStyle: {
							normal: {
								color: colorInfo ? colorInfo.color : undefined,
								lineStyle: {
									color: colorInfo ? colorInfo.color : undefined
								}
							}
						}
					}
					series.push(param)
				})
			}
			this.historyChart_option = {
				tooltip: {
					trigger: 'axis',
					confine: true,
					textStyle: {
						textShadowBlur: 10, // 重点
						textShadowColor: 'transparent', // 重点
					},
				},
				legend: {

				},
				grid: {

					bottom: "15%",
					top: "20%",
				},
				xAxis: {
					type: 'category',
					data: x_data,
					splitLine: {
						show: true,
						lineStyle: {
							color: '#F0F0F0',
						}
					},
					axisLabel: {
						show: true,
						color: '#A3A3A3'
					},
					axisLine: {
						lineStyle: {
							color: '#F0F0F0',
						}
					},

					axisTick: {
						show: false
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#F0F0F0',
						}
					},
					axisLabel: {
						show: true,
						color: '#A3A3A3'
					},
				},
				series: series
			}
		},
		async getDifferenceChart(id) {
			this.differenceChart_loading = true
			try {
				const res = await this.$u.api.proxyPrice.GetMaxPriceDiffById(id)
				this.initDifferenceChart(res.data)
				this.difference_tableData = res.data.table
			} finally {
				this.differenceChart_loading = false
			}


		},
		initDifferenceChart(data) {
			const x_data = []
			const y_data = []

			if (data.line && data.line.length > 0) {
				data.line.map((item, index) => {
					x_data.push(item.date)
					y_data.push(item.value)
				})
			}
			this.differenceChart_option = {
				tooltip: {
					trigger: 'axis',
					confine: true,
					textStyle: {
						textShadowBlur: 10, // 重点
						textShadowColor: 'transparent', // 重点
					}
				},
				grid: {

					bottom: "15%",
					top: "20%",
				},

				xAxis: {
					type: 'category',
					data: x_data,
					splitLine: {
						show: true,
						lineStyle: {
							color: '#F0F0F0',
						}
					},
					axisLabel: {
						show: true,
						color: '#A3A3A3'
					},
					axisLine: {
						lineStyle: {
							color: '#F0F0F0',
						}
					},
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						},
						{
							type: 'min',
							name: '最小值'
						}
						]
					},
					markLine: {
						data: [{
							type: 'max',
							name: '最大值'
						},
						{
							type: 'min',
							name: '最小值'
						}
						]
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisLabel: {
						show: true,
						color: '#A3A3A3'
					},

					splitLine: {
						show: true,
						lineStyle: {
							color: '#F0F0F0',
						}
					}
				},
				series: {
					type: 'line',
					smooth: true,
					symbol: y_data.length > 1 ? 'none' : 'circle',
					lineStyle: {
						normal: {
							width: 1
						}
					},
					areaStyle: {
						normal: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(255, 184, 0, 0.3)'
							}, {
								offset: 1,
								color: 'rgba(255, 184, 0, 0.05)'
							}], false),
							// shadowColor: 'rgba(0, 0, 0, 0.5)',
							// shadowBlur: 10
						}
					},
					itemStyle: {
						normal: {
							color: 'rgb(255, 184, 0)'

						}
					},
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						},
						{
							type: 'min',
							name: '最小值'
						}
						]
					},
					markLine: {
						data: [{
							type: 'max',
							name: '最大值'
						},
						{
							type: 'min',
							name: '最小值'
						}
						]
					},
					data: y_data
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-warp {
	width: 100%;
	overflow: auto;
	.top-search {
		width: 100%;
		height: 230rpx;

		background: linear-gradient(45deg, rgba(0, 156, 119, 1), rgba(178, 223, 138, 1));
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		padding-top: 30rpx;
		font-size: 32rpx;
		color: rgba(248, 248, 248, 1);

		.left {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.value-box {
				width: 100%;
				height: 40rpx;
				display: flex;

				.title {
					width: 250rpx;
					font-size: 32rpx;
					color: rgba(255, 255, 255, 1);
					text-align: right;
				}

				.value {
					margin-left: 20rpx;
					text-align: left;
					font-size: 32rpx;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;
				}
			}

		}

		.right {
			// width: 200rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 1);

			.value-box {
				position: relative;
				right: 50rpx;
				white-space: nowrap;
				width: 100%;
				height: 40rpx;
				display: flex;
				align-items: center;
			}
		}
	}

	.price-box {
		padding: 20rpx;
		// margin: 20rpx;
		// margin-right: 20rpx;
		width: 100%;

		margin-top: 20rpx;
		border-radius: 16rpx;
		background: #ffffff !important;
		box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
		padding: 20rpx;

		.top-right-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex: 1;
			justify-content: flex-end;

			.top-right-item {
				padding: 5rpx 10rpx;
				border: 1rpx solid #009c77;
				font-size: 24rpx;
				color: #009c77;
				cursor: pointer;
				margin-right: 10rpx;
				border-radius: 8rpx;

				&.active {
					background: #009c77;
					color: #ffffff;
				}
			}
		}

		.time-title {
			margin-top: 20rpx;
			font-size: 20rpx;
			color: #999999;
		}

		.time-value {
			font-size: 24rpx;
			color: #333333;
		}

		.title {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.levels-chart {
			width: 100%;
			height: 450rpx;
			position: relative;
			margin-top: 20rpx;
		}

		.value-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 300rpx;
			width: 100%;

			.box {
				border-radius: 9rpx;
				background: rgba(0, 156, 119, 0.05);
				width: 330rpx;
				height: 140rpx;
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.box-value {
					text-align: center;
					color: #009C77;
					font-size: 36rpx;
				}

				.box-title {
					text-align: center;
					color: #2C3231;
					font-size: 24rpx;
				}
			}
		}
	}

	.popup-box {
		width: 100%;
		padding: 20rpx 20rpx 0;
		text-align: right;

		.title {
			text-align: center;
			font-size: 40rpx;
			margin-bottom: 20rpx;
			padding-left: 20rpx;
			padding-top: 40rpx;
		}

		.s-station {
			margin-bottom: 60rpx;
			padding: 0 20px 0 20px;

			.s-title {
				font-size: 35rpx;
				text-align: left;
				margin-bottom: 10rpx;
				// padding-left: 20rpx;
			}

			.s-content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding-left: 20rpx;


			}
		}

		.other-button {
			width: 100%;
			display: flex;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-evenly;
		}
	}

	.search-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.content-box {
			width: 50%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			margin-top: 20rpx;

			.content-title {
				color: #999999;
				width: 300rpx;
				font-size: 28rpx;
			}

			.content-value {
				color: #282828;
				font-size: 28rpx;
				margin-top: 5rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				width: 300rpx;
				margin-right: 5rpx;
				background: rgba(0, 156, 119, 0.05);
				height: 48rpx;
				line-height: 48rpx;
				padding-left: 5rpx;
			}
		}
	}
}
</style>