<template>
    <div class="gashistoy-container">
        <div class="header">
            <el-date-picker 
                v-model="date" 
                type="daterange" 
                value-format="yyyy-MM-dd" 
                range-separator="至" 
                start-placeholder="开始日期" 
                :clearable='false'
                @change="dateChange"
                end-placeholder="结束日期"> 
            </el-date-picker>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="path-conts">
                <el-breadcrumb-item style="cursor: pointer" @click.native="handleTopChange('首页',-1)">首页</el-breadcrumb-item>
                <el-breadcrumb-item 
					v-for="(item,index) in levelPath" 
					:key="item.id" 
					style="cursor: pointer"
					@click.native="handleTopChange(item,index)"
				>{{item.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-table 
            :data="tableData" 
            border height="75vh" 
            v-loading="loading"
            element-loading-text="拼命加载中" 
            element-loading-spinner="el-icon-loading"
            empty-text="没有此日期的数据，请重新选择日期"
        >
            <el-table-column
                v-for="item in tableColums"
                :key="item.label"
                :label="item.label"
                :width="item.widthsty"
                :min-width="item.minwidthsty"
                align="center"
            >
                <template #header>
                    <span>{{ item.label }}</span><br />
                    <span class="deletesty" v-if="item.unit">{{item.unit}}</span>
                </template>
                <template slot-scope="scope">
                    <span 
                        v-if="item.prop==='status'" 
                        :class="[scope.row.status==='E' ? 'warnsty' :scope.row.status==='C' ? 'successty' : 'disty']"
                    >
                        {{statusMap.get(scope.row.status)}}
					</span>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {dataInterence} from '@/api/api.js'
export default {
    data() {
        return {
            date: "",
			code:this.$route.query.EicCode,
            levelPath: [],
            tableData: [], //表格数据
            tableColums: [
                { label: "日期", prop: "gasDayStart", minwidthsty: "100px" },
                { label: "天然气存量", prop: "gasInStorage", unit: "TWh", minwidthsty: "100px" },
                { label: "储存容量百分比", prop: "full", unit: "%", minwidthsty: "120px" },
                { label: "较前日对比", prop: "trend", unit: "%", minwidthsty: "110px" },
                { label: "注入量", prop: "injection", unit: "GWh/d", minwidthsty: "80px" },
                { label: "减少量", prop: "withdrawal", unit: "GWh/d", minwidthsty: "80px" },
                { label: "最大存量", prop: "workingGasVolume", unit: "TWh", minwidthsty: "100px" },
                { label: "注入速度", prop: "injectionCapacity", unit: "GWh/d", minwidthsty: "100px" },
                { label: "取出速度", prop: "withdrawalCapacity", unit: "GWh/d", minwidthsty: "100px" },
                { label: "数据状态", prop: "status" },
            ], //列配置
            statusMap: new Map([
				['E', '估计'],
				['C', '已确认'],
				['N', '无数据'],
			]),//E(估计)C(已确认)N(无数据)
            loading:false,
        };
    },
    methods: {
		handleTopChange(e,index){
			if(e=='首页'){
				this.$router.go(-1)
			}else{
                let arr=this.levelPath.slice(0,index+1)
                sessionStorage.setItem('gasHistoryHead',JSON.stringify(arr))

                this.$router.replace({
                    path: '/gasHistory',
                    query: {
                        EicCode: arr[arr.length-1].EicCode
                    }
                })
                this.refreshPage()
			}
		},
        refreshPage(){
            this.levelPath=JSON.parse(sessionStorage.getItem('gasHistoryHead'))
            this.code=this.$route.query.EicCode
		    this.getList()
        },

		dateChange(){
			this.getList()
		},

		async getList(){
            this.loading=true
			const res=await dataInterence.getGasHistoryDataV2({
				Code:this.code,
				date1:this.date&&this.date[0],
				date2:this.date&&this.date[1]
			})
            this.loading=false
			if(res.Ret==200){
				this.tableData=res.Data
                if(!this.date){
                    console.info("line 125")
                    let timeArr=res.Data.map(item=>{
                        return item.gasDayStart
                    })
                    console.info("line 129")
                    let temarr=[timeArr[0],timeArr[timeArr.length-1]]
                    this.date=temarr
                }else{
                    console.info("line 131")
                }
			}
		}

	},
    created() {
		this.levelPath=JSON.parse(sessionStorage.getItem('gasHistoryHead'))
		this.getList()
    },
};
</script>
<style lang="scss">
.gashistoy-container {
    * {
        box-sizing: border-box;
    }
    box-sizing: border-box;
    background-color: #fff;
    height: calc(100vh - 120px);
    padding: 20px;
    .header {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .path-conts {
            margin-left: 40px;
            font-size: 14px !important;
            .el-breadcrumb__inner,
            .el-icon-arrow-right {
                color: #409eff;
            }
        }
    }
    .el-date-editor .el-range-separator{
        width: 25px;
    }
}
</style>
