<template>
  <div id="tableCharts">
      <!-- 返回按钮，目前只有电脑端会出现 -->
      <div class="go_back" v-if="!isCollapse">
          <span class="btn" @click="$router.go(-1)">返回</span>
      </div>
      <!-- 电脑端的时间选择器 -->
      <div class="web_view" v-if="!isCollapse">
        <div class="ele_select">
            <div class="inline_block">
                <span>请选择精度：</span>
                <el-select v-model="period" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="inline_block">
                <span class="demonstration">起止时间：</span>
                <el-date-picker
                v-model="timeArr"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="inline_block">
                <span class="btn mar4" @click="getChartsData">生成图表</span>           
            </div>
      </div>
      </div>
      <!-- 手机端的时间选择器 -->
    <div class="mobile_view" v-else>
        <div class="mobile_select">
            <span>选择精度：</span>
            <select name="" id="" v-model="period">
                <option :value="item.value" v-for="item in options">{{item.label}}</option>
            </select>
            <div class="inline_block">
                <span>开始时间：</span>
                <input type="datetime-local" v-model="startDate">
            </div>
            <div class="inline_block">
                <span>结束时间：</span>
                <input type="datetime-local" v-model="endDate">
            </div>
            <span class="btn" @click="getIosDate()">生成图表</span>
        </div>
    </div>
    <!-- 生成的echarts -->
    <div class="echarts">
        <echarts v-if="renderData && renderData.length" :id="echartsData.id" :renderData="renderData" :units="echartsData.units"></echarts>
        <div v-else class="echarts_nodata">
            {{msgData}}
        </div>
    </div>
  </div>
</template>
<script>

import echarts from '@/components/lineCharts'

import {
    getEcharts//获取表格数据
} from 'api/repair'
export default {
    data () {
        return {
            isCollapse: true,//判断是否为移动端参数
            period: '',//select选择结果
            msgData: '暂无数据',//显示的数据内容
            startDate: '',//手机选择时间开始
            endDate: '',//手机选择时间结束
            options: [{//options选择数据
                value: '1min',
                label: '1分钟'
                }, {
                value: '5min',
                label: '5分钟'
                }, {
                value: '15min',
                label: '15分钟'
                }, {
                value: '1h',
                label: '1小时'
                }, {
                value: '1d',
                label: '1天'
                }
            ],
            echartsData: {//echarts数据
                id: 'echarts2',
                data: '',
                units: '111'
            },
            value: '',//
            id: this.$route.query.id,//Pj1101010001，网页传项目id
            code: this.$route.query.secondCode,//OutTdb，网页所传code，请求参数
            secret: this.$route.query.secret,//网页传来的参数secret
            FmId: this.$route.query.FmId,
            timeArr: [],//element-ui选择时间数据
            renderData: []//echarts的renderData
        }
    },
    components: {
        echarts
    },
    watch:{
    },
    methods:{
        //手机点击按钮
        getIosDate(){
            let startDate = this.format(new Date(this.startDate),'yyyyMMddHHmmss')//转换为yyyyMMddHHmmss后台需要格式
            let endDate = this.format(new Date(this.endDate),'yyyyMMddHHmmss')
            if(startDate && endDate && this.period){
                getEcharts(
                    this.id,
                    this.code,
                    this.period,
                    this.FmId,
                    startDate,
                    endDate,
                    this.secret
                ).then(
                    result =>{
                        if(result.data.Result == 'success'){
                            this.renderData = result.data.Content
                        }else{
                            console.log(result.data)
                            this.msgData = '暂无信息'
                        }
                    }
                )
            }
        },
        //电脑点击按钮
        getChartsData(){
            if(this.period && this.timeArr.length){
                getEcharts(
                    this.id,
                    this.code,
                    this.period,
                    this.FmId,
                    this.format(this.timeArr[0], 'yyyyMMddHHmmss'),
                    this.format(this.timeArr[1], 'yyyyMMddHHmmss'),
                    this.secret
                ).then(
                    result =>{
                        if(result.data.Result == 'success'){
                            this.renderData = result.data.Content
                        }else{
                            console.log(result.data)
                            this.msgData = '暂无信息'
                        }
                    }
                )
            }
        },
        //判断是移动端/pc端
        browserRedirect() {  
            var sUserAgent = navigator.userAgent.toLowerCase();  
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
            var bIsAndroid = sUserAgent.match(/android/i) == "android";  
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";  
            if(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {  
                return true;//移动地址  
            } else {  
                return false;//PC地址  
            }  
        },
        isMobile(){
            if(this.browserRedirect()){
                //是移动端
                this.isCollapse = true
            }else{
                //是pc端
                this.isCollapse = false
            }
        },
        //工具函数，转换成需求的格式
        format(time, format){
            var t = new Date(time);
            var tf = function(i){return (i < 10 ? '0' : '') + i};
            return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
                switch(a){
                    case 'yyyy':
                        return tf(t.getFullYear());
                        break;
                    case 'MM':
                        return tf(t.getMonth() + 1);
                        break;
                    case 'mm':
                        return tf(t.getMinutes());
                        break;
                    case 'dd':
                        return tf(t.getDate());
                        break;
                    case 'HH':
                        return tf(t.getHours());
                        break;
                    case 'ss':
                        return tf(t.getSeconds());
                        break;
                }
            })
        },
    },
    mounted(){
        this.isMobile()
    }
}
</script>