// 页面中的表格
Vue.component('b-table', {
    props: {
        columns: {
            type: Array,
            default: function() {
                return []
            }
        },
        data: {
            type: Array,
            default: function() {
                return []
            }
        },
        title: String,
        default: ''
    },
    template: `
        <div class="tbl-container ml8 mr8">
            <div class="tbl-container-header" v-show="showHeader">{{title}}</div>
            <div class="tbl-content">
                <table class="bui-table bui-table-odd">
                    <thead>
                        <tr>
                            <th v-for="column in columns" :key="column.key">{{column.title}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, key) in data" @click="handerTrClick(item)">
                            <td v-for="column in columns" :key="column.key">{{item[column.key]}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    `,
    data() {
        return {

        }
    },
    methods: {
        handerTrClick: function(item) {
            this.$emit('on-click-tr', item);
        }
    },
    computed: {
        showHeader: function() {
            var result = this.title?true: false;
            return result;
        }
    },
});
// iview的table
Vue.component('iview-table', {
    props: {
        columns: {
            type: Array,
            default: function() {
                return []
            }
        },
        data: {
            type: Array,
            default: function() {
                return []
            }
        },
        height: {
            type: [String, Number],
            default: 'auto'
        },
        title: String,
        default: ''
    },
    template: `
        <div class="tbl-container ml8 mr8">
            <div class="tbl-container-header" v-show="showHeader">{{title}}</div>
            <div class="tbl-content">
                <i-table
                :columns="columns"
                :data="data"
                :height="height"
                stripe
                border></i-table>
            </div>
        </div>
    `,
    data() {
        return {

        }
    },
    methods: {
        handerTrClick: function(item) {
            this.$emit('on-click-tr', item);
        }
    },
    computed: {
        showHeader: function() {
            var result = this.title?true: false;
            return result;
        }
    },
});

Vue.component('bui-list', {
    props: {
        data: {
            type: Array,
            default() {
                return []
            }
        }
    },
    template: `
        <div class="bui-list-container">
            <div class="bui-list-header">设备信息列表</div>
            <div class="bui-list-content">
                <ul class="bui-list">
                    <li 
                    v-for="(item, key) in data"
                    :key="key"
                    class="bui-btn bui-box"
                    @click="handlerClick(item, key)">
                        <div class="span1">
                            <h3 class="item-title" :style="getTStyle(item)">{{item.title}}</h3>
                            <p
                            v-for="(list, lkey) in item.list"
                            :key="lkey" 
                            class="item-text">
                                <span class="bui-label">{{list.label}}</span>
                                <span class="bui-value">{{list.value}}</span>
                            </p>
                        </div>
                        <i class="icon-listright"></i>
                    </li>
                </ul>
            </div>
        </div>
    `,
    methods: {
        getTStyle: function(item) {
            var style = {};
            if(typeof item.list == 'undefined' || item.list.length == 0) {
                style = {
                    marginBottom: 0
                };
            }
            return style;
        },
        handlerClick: function(data, key) {
            this.$emit('on-click', data);
        }
    },
    computed: {
        
    }
});

Vue.component('bar-chart', {
    props: {
        width: {
            type: String,
            default: 'auto'
        },
        height: {
            type: String,
            default: '100px'
        },
        'showValue': {
            type: Boolean,
            default: true,
        },
        range:{
            type: Object,
            default(range) {
                var result = {
                    min: 0,
                    minFlag: false,
                    max: 1,
                    maxFlag: false,
                };
                return result;
            }
        },
        colors:{
            type: Object,
            default(option) {
                var defaults = {
                    normal: '#5cadff',
                    max: '#19be6b',
                    min: '#ed4014',
                };
                var colors = {};
                if(option) {
                    colors = $.extend({}, defaults, option);
                }else {
                    colors = defaults;
                }
                return colors;
            }
        }
    },
    template: `
        <div class="bar-echart">
            <div class="echart" :style="style"></div>
        </div>
    `,
    data() {
        return {
            graph: '',
            style: {
                width: this.width,
                height: this.height,
            },
            option: {}, 
        }
    },
    methods: {
        setOption: function(opt) {
            var self = this;
            var defaults = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 1,
                    splitLine: {
                        show: false
                    }
                },
                series: []
            };
            this.option = $.extend(true, {}, defaults, opt);

            // 设置图谱显示范围
            this._setRange();

            // 设置文本
            this._setLabel();

            // 设置柱状图的颜色
            this._setColor();

            this.graph.resize();
            this.graph.setOption(this.option, true);
        },
        _setRange: function() {     // 设置范围
            var option = this.option;
            var series = option.series;
            // option的最值进行处理
            if(series.length == 0 || series[0].data.length == 0) {
                option.yAxis.min = 0;
                option.yAxis.max = 1;
            }else {
                var data = series[0].data;
                var min = getMinFromArr(data);
                var max = getMaxFromArr(data);
                // 设置最小值
                if(this.range.minFlag == false || this.range.min == undefined) {
                    min = Math.floor(min*0.9);
                }else {
                    min = this.range.min>min?Math.floor(min*0.9):this.range.min;
                }

                // 设置最大值
                if(this.range.maxFlag == false || this.range.max == undefined) {
                    max = Number((max*1.15).toFixed(1))
                }else {
                   max= this.range.max<max?Number((max*1.15).toFixed(1)):this.range.max;
                }
                option.yAxis.min = min;
                option.yAxis.max = max;
            }
        },
        _setColor: function() {     // 设置颜色
            var option = this.option;
            var colors = this.colors;
            var series = option.series[0];
            if(series) {
                var data = series.data;
                if(series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                var maxflag = true;
                var minflag = true;
                series.itemStyle.normal.color = function setColor(value) {
                    var min = getMinFromArr(data);
                    var max = getMaxFromArr(data);
                    if(value.value==max) {
                        return colors.max;
                    }else if(value.value == min) {
                        return colors.min;
                    }else {
                        return colors.normal;
                    }
                };
            }
        },
        _setLabel: function() {
            var option = this.option;
            var series = option.series[0];
            if(series) {
                if(series.itemStyle == undefined) {
                    series.itemStyle = {};
                    series.itemStyle.normal = {};
                }
                series.itemStyle.normal.label = {
                    show: this.showValue,
                    position: 'top'
                };
            }
        },
        resize: function() {
            var option = this.graph.getOption();
            this.setOption(option);
        },
    },
    mounted: function() {
        // console.log(this.$el);
        var $root = $(this.$el);
        var graphEl = $root.find('.echart').get(0);
        this.graph = echarts.init(graphEl);
        this.graph.setOption({});
    },
});

// 柱状图
Vue.component('high-bar-chart', {
    props: {
        id: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            default: '',
        },
        unit: {
            type: String,
            default: '',
        },
        title: {
            type: String,
            default: ''
        },
        subtitle: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '200px'
        },
        colors: {
            type: Object,
            default(){
                return {}
            }
        },
        monHanderClick: {
            type: Function,
        }
    },
    template: `
        <div class="high-chart-container">
            <div :id="id" class="high-chart" :style="getStyle"></div>
        </div>
    `,
    data() {
        return {
            chart: '',
        }
    },
    watch: {
        height: function(value) {
            this.chart.setSize(undefined, value);
        }
    },
    methods: {
        init: function() {
            var self = this;
            var yText = this.name+this.getUnit();
            this.chart = Highcharts.chart(this.id, {
                chart: {
                    type: 'column'
                },
                credits: {  // 版本信息
                    enabled: false,
                },
                legend: {       // 指示
                    enabled: false,
                },
                title: {
                    text: this.title,
                },
                subtitle: {
                    text: this.subtitle,
                },
                xAxis: [{
                    categories: [],
                    crosshair: true
                }],
                yAxis: [{
                    title: {
                        text: yText,
                    },
                    lineWidth: 1,
                }],
                tooltip: {},
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: this.name,
                    data: [],
                    events: {
                        click: self.monHanderClick,
                    },
                    dataLabels: {
                        enabled: true
                    }
                }]
            });
        },
        setOption: function(options) {
            var categories = options.categories;
            var data = options.data;
            this.setCategories(categories);
            this.setExtremes(null, null);
            this.setData(data);
        },
        setCategories: function(categories,) {
            this.chart.xAxis[0].setCategories(categories, false);       // 不更新
        },
        setExtremes: function(min, max) {
            this.chart.yAxis[0].setExtremes(min, max, false);          // 不更新
        },
        setData: function(data) {
            var result = [];
            var max = getMaxFromArr(data);
            var min = getMinFromArr(data);
            var colors = this.getColors();
            for(var i=0; i<data.length; i++) {
                var _data = data[i];
                var tmp = {
                    y: _data,
                };
                if(_data == min) {
                    tmp.color = colors.min;
                }else if(_data == max) {
                    tmp.color = colors.max;
                }else {
                    tmp.color = colors.normal;
                }
                result.push(tmp);
            }
            this.chart.series[0].setData(result);
        },
        getUnit: function() {   // 格式化单位
            var unit = this.unit?'（'+this.unit+'）':'';
            return unit;
        },
        getColors: function() {
            var defaults = {
                min: '#ed4014',
                max: '#19be6b',
                normal: '#2db7f5',
            };
            var colors = this.colors;
            var result = $.extend({}, defaults, colors);
            return result;
        },
    },
    computed: {
        getStyle: function() {
            return {
                height: this.height
            }
        }
    },
    mounted() {
        var self = this;
        this.init();
    }
});

// 折线状图
Vue.component('high-line-chart', {
    props: {
        id: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            default: '',
        },
        unit: {
            type: String,
            default: '',
        },
        title: {
            type: String,
            default: ''
        },
        subtitle: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '200px'
        },
        colors: {
            type: Object,
            default(){
                return {}
            }
        },
        monHanderClick: {
            type: Function,
        }
    },
    template: `
        <div class="high-chart-container">
            <div :id="id" class="high-chart" :style="getStyle"></div>
        </div>
    `,
    data() {
        return {
            chart: '',
        }
    },
    watch: {
        height: function(value) {
            this.chart.setSize(undefined, value);
        }
    },
    methods: {
        init: function() {
            var self = this;
            var yText = this.name+this.getUnit();
            this.chart = Highcharts.chart(this.id, {
                chart: {
                    type: 'line'
                },
                credits: {  // 版本信息
                    enabled: false,
                },
                legend: {       // 指示
                    enabled: false,
                },
                title: {
                    text: this.title,
                },
                subtitle: {
                    text: this.subtitle,
                },
                xAxis: [{
                    categories: [],
                    crosshair: true,
                    labels: {
                        autoRotation: [-5]
                    }
                }],
                yAxis: [{
                    title: {
                        text: yText,
                    },
                    lineWidth: 1,
                }],
                tooltip: {},
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: this.name,
                    data: [],
                    events: {
                        click: self.monHanderClick,
                    },
                    dataLabels: {
                        enabled: false
                    },
                    marker: {
                        enabled: false
                    }
                }]
            });
        },
        setOption: function(options) {
            var categories = options.categories;
            var data = options.data;
            this.setCategories(categories);
            this.setExtremes(null, null);
            this.setData(data);
        },
        setCategories: function(categories,) {
            this.chart.xAxis[0].setCategories(categories, false);       // 不更新
        },
        setExtremes: function(min, max) {
            this.chart.yAxis[0].setExtremes(min, max, false);          // 不更新
        },
        setData: function(data) {
            var result = [];
            var max = getMaxFromArr(data);
            var min = getMinFromArr(data);
            var colors = this.getColors();
            for(var i=0; i<data.length; i++) {
                var _data = data[i];
                var tmp = {
                    y: _data,
                };
                if(_data == min) {
                    tmp.color = colors.min;
                }else if(_data == max) {
                    tmp.color = colors.max;
                }else {
                    tmp.color = colors.normal;
                }
                result.push(tmp);
            }
            this.chart.series[0].setData(result);
        },
        getUnit: function() {   // 格式化单位
            var unit = this.unit?'（'+this.unit+'）':'';
            return unit;
        },
        getColors: function() {
            var defaults = {
                min: '#ed4014',
                max: '#19be6b',
                normal: '#2db7f5',
            };
            var colors = this.colors;
            var result = $.extend({}, defaults, colors);
            return result;
        },
    },
    computed: {
        getStyle: function() {
            return {
                height: this.height
            }
        }
    },
    mounted() {
        var self = this;
        this.init();
    }
});