<template>
<el-container style="margin-top:20px">
    <el-header>

        <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="5" :xl="4">
                天车:<el-select v-model="selectedRootDevice" placeholder="请选择天车" @change="selectRootDeviceChanged">
                    <el-option v-for="item in rootDevices" :key="item.id" :label="item.name" :value="item" />
                </el-select>
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="15" :xl="8">
                数据:
                <el-cascader  collapse-tags style="width:80%" filterable :options=" dataTypeDTOs" :props="{ checkStrictly: false,multiple: true}" clearable @change="selectDeviceChanged" />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
                <div class="block">
                    <span class="demonstration">时间:</span>
                    <el-date-picker v-model="selectedTimes" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
                <el-button type="primary" @click="selectChartData">查询</el-button>
            </el-col>
        </el-row>
        <el-divider></el-divider>


        <!-- <el-row>
            <el-col :xs="10" :sm="10" :md="10" :lg="4" :xl="4">
                天车 :<el-select v-model="selectedRootDevice" placeholder="请选择天车" @change="selectRootDeviceChanged">
                    <el-option v-for="item in rootDevices" :key="item.id" :label="item.name" :value="item" />
                </el-select>
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="10">
                <div class="block">
                    <span class="demonstration">时间:</span>
                    <el-date-picker v-model="selectedTimes" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
                <el-button type="primary" @click="selectChartData">查询</el-button>
            </el-col>
        </el-row> -->

    </el-header>
    <el-container style="margin-top: 20px;height: 100%;">

        <el-main>

            <el-row  v-for="chart in chartDataList" :key="chart.legend" >
                <line-chart2 :chart-data="chart" />
            </el-row>

        </el-main>
    </el-container>
</el-container>
</template>

<script>
import LineChart2 from '../components/LineChart2.vue'
import LineChart from '../components/LineChart.vue'
const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
}

export default {

    components: {
        LineChart2,
        LineChart
    },
    data() {
        return {
            dataSources: [],
            selectSources:[],
            selectRequestData: {
                startTime: '',
                endTime: '',
              
                param:'',
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            selectedTimes: [],
            value2: '',
            props: {
                multiple: true,
                checkStrictly: true
            },
            chartData:{},
            chartDataList:[],
            chartData1: {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                series: [{
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            },
            chartData2: [{
                    "name": "1665366551355",
                    "value": [
                        "2022-10-10T01:49:05.976Z",
                        0.006105006,
                        0.005105006
                    ]
                },
                {
                    "name": "1665366570795",
                    "value": [
                        "2022-10-10T01:49:25.424Z",
                        0.012210012,
                        0.006105006,
                    ]
                },
                {
                    "name": "1665366590235",
                    "value": [
                        "2022-10-10T01:49:44.856Z",
                        0.006105006,
                        0.005105006,
                    ]
                }
            ],
            newVisitis: {
                expectedData: [100, 120, 161, 134, 105, 160, 165],
                actualData: [120, 82, 91, 154, 162, 140, 145]
            },
            selectedRootDevice: {},
            // client: null,
            clientList: [],
            // lineChartData: lineChartData.newVisitis,
            chartDataArray: [],
            xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
            yData: [30, 132, 80, 134]
        }
    },
    computed: {
        dataTypeDTOs(){
            return this.$store.getters.dataTypeDTOs
        },
        allDataSources() {
            return this.$store.getters.allDataSources
        },
        rootDevices() {
            return this.$store.getters.rootDevices
        },
        deviceList() {
            return this.$store.getters.deviceList
        },

        allDataTypes() {
            return this.$store.getters.allDataTypes
        }
    },
    mounted() {
        this.$store.dispatch('device/getRootDevices').then(res => {
            if (this.rootDevices.length > 0) {
                this.selectedRootDevice = this.rootDevices[0]
                this.$store.dispatch('dataType/getDataTypeDTOs',this.selectedRootDevice)
                //this.dataSources = this.selectedRootDevice.childrenDataSources
                //this.initMqtt(this.rootDevices[0],this.dataSources)
            }
        })
        this.$store.dispatch('device/getAllDevices')
        // this.initMqtt()

        // const {
        //     name,
        //     xData,
        //     yData
        // } = this
        // console.log('refs', this.$refs)
        // this.$store.dispatch('dataSource/getAllDataSources').then(res => {
        //     // this.subscribeAll()
        // })
    },
    created() {
        console.log('created')
    },
    destroyed() {
        console.log('clientList size', this.clientList.length)
        for (var i = 0; i < this.clientList.length; ++i) {
            this.clientList[i].end()
        }
    },
    methods: {

        dateFormat(time) {
            const date = new Date(time)
            const year = date.getFullYear()
            // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
            const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            const milliSeconds = date.getMilliseconds()
            // 拼接
            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds + ':' + milliSeconds
            // return year + "-" + month + "-" + day;
        },

        selectChartData() {
            console.log('start to select chartData')
            console.log('selected time:', this.selectedTimes)
            this.selectRequestData.startTime=this.dateFormat(this.selectedTimes[0])
            this.selectRequestData.endTime=this.dateFormat(this.selectedTimes[1])
            console.log('selectSources',this.selectSources)

            this.selectRequestData.param=''
            for(let i=0;i<this. selectSources.length;++i){
                this.selectRequestData.param+=this.selectSources[i]
                this.selectRequestData.param+=','
            }

            console.log('selectRequestData',this.selectRequestData)
            var vm=this
            this.$store.dispatch('dataSource/getChartData',this.selectRequestData).then(res=>{
                //vm.chartData=null
                vm.chartDataList=res.data.data
                // vm.chartData=res.data.data
            }).catch(err=>{

            })
           // this.selectSources=[]

            
        },

        handleSetLineChartData(type) {
            this.lineChartData = lineChartData[type]
        },
        selectDeviceChanged(data) {
            console.log('select dataSource change ', data)
            this.selectSources=[]
            for(let i=0;i<data.length;++i){
                let sourceId=data[i][data[i].length-1]
                this.selectSources.push(sourceId)
            }
            console.log('selectSources:',this.selectSources)
            // let sourceId = data[data.length - 1]
            // this.selectedDeviceID = selectedDeviceID

            // console.log('selected deviceID ', data[data.length - 1])
            // let device = this.findDeviceById(this.rootDevices, selectedDeviceID)
            // let tmpList = []
            // tmpList.push(device)
            // this.$store.commit('device/SET_DEVICE_LIST', tmpList)
            // this.dataSources=device.dataSources
        },
        selectRootDeviceChanged(data) {
            console.log('selectRootDeviceChanged', data)
            this.$store.dispatch('dataType/getDataTypeDTOs',this.selectedRootDevice)
            //this.dataSources = data.childrenDataSources
            // this.selectRequestData.sources = data.childrenDataSources
            //this.$store.commit('device/SET_DEVICE_LIST', data.allChildren)
            // this.dataSources=data.childrenDataSources
            // this.$store.dispatch('device/getAllDataSources', data).then(res => {

            // }).catch(error => {

            // })
        },

        selectDeviceChange(data) {
            console.log('select device change ', data)
            let selectedDeviceID = data[data.length - 1]
            console.log('selected deviceID ', data[data.length - 1])
            let device = this.findDeviceById(this.rootDevices, selectedDeviceID)
            console.log('selected device ', device)
            this.addDevice.fatherId = device.id
        }
    }
}
</script>

<style>
/* .el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
} */
</style>
