'use strict';

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

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

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

Vue.component('bui-list', {
    props: {
        data: {
            type: Array,
            default: function _default() {
                return [];
            }
        }
    },
    template: '\n        <div class="bui-list-container">\n            <div class="bui-list-header">\u8BBE\u5907\u4FE1\u606F\u5217\u8868</div>\n            <div class="bui-list-content">\n                <ul class="bui-list">\n                    <li \n                    v-for="(item, key) in data"\n                    :key="key"\n                    class="bui-btn bui-box"\n                    @click="handlerClick(item, key)">\n                        <div class="span1">\n                            <h3 class="item-title" :style="getTStyle(item)">{{item.title}}</h3>\n                            <p\n                            v-for="(list, lkey) in item.list"\n                            :key="lkey" \n                            class="item-text">\n                                <span class="bui-label">{{list.label}}</span>\n                                <span class="bui-value">{{list.value}}</span>\n                            </p>\n                        </div>\n                        <i class="icon-listright"></i>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    ',
    methods: {
        getTStyle: function getTStyle(item) {
            var style = {};
            if (typeof item.list == 'undefined' || item.list.length == 0) {
                style = {
                    marginBottom: 0
                };
            }
            return style;
        },
        handlerClick: function handlerClick(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: function _default(range) {
                var result = {
                    min: 0,
                    minFlag: false,
                    max: 1,
                    maxFlag: false
                };
                return result;
            }
        },
        colors: {
            type: Object,
            default: function _default(option) {
                var defaults = {
                    normal: '#5cadff',
                    max: '#19be6b',
                    min: '#ed4014'
                };
                var colors = {};
                if (option) {
                    colors = $.extend({}, defaults, option);
                } else {
                    colors = defaults;
                }
                return colors;
            }
        }
    },
    template: '\n        <div class="bar-echart">\n            <div class="echart" :style="style"></div>\n        </div>\n    ',
    data: function data() {
        return {
            graph: '',
            style: {
                width: this.width,
                height: this.height
            },
            option: {}
        };
    },

    methods: {
        setOption: function setOption(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 _setRange() {
            // 设置范围
            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 _setColor() {
            // 设置颜色
            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 _setLabel() {
            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 resize() {
            var option = this.graph.getOption();
            this.setOption(option);
        }
    },
    mounted: function mounted() {
        // 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: function _default() {
                return {};
            }
        },
        monHanderClick: {
            type: Function
        }
    },
    template: '\n        <div class="high-chart-container">\n            <div :id="id" class="high-chart" :style="getStyle"></div>\n        </div>\n    ',
    data: function data() {
        return {
            chart: ''
        };
    },

    watch: {
        height: function height(value) {
            this.chart.setSize(undefined, value);
        }
    },
    methods: {
        init: function init() {
            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 setOption(options) {
            var categories = options.categories;
            var data = options.data;
            this.setCategories(categories);
            this.setExtremes(null, null);
            this.setData(data);
        },
        setCategories: function setCategories(categories) {
            this.chart.xAxis[0].setCategories(categories, false); // 不更新
        },
        setExtremes: function setExtremes(min, max) {
            this.chart.yAxis[0].setExtremes(min, max, false); // 不更新
        },
        setData: function setData(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 getUnit() {
            // 格式化单位
            var unit = this.unit ? '（' + this.unit + '）' : '';
            return unit;
        },
        getColors: function getColors() {
            var defaults = {
                min: '#ed4014',
                max: '#19be6b',
                normal: '#2db7f5'
            };
            var colors = this.colors;
            var result = $.extend({}, defaults, colors);
            return result;
        }
    },
    computed: {
        getStyle: function getStyle() {
            return {
                height: this.height
            };
        }
    },
    mounted: function 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: function _default() {
                return {};
            }
        },
        monHanderClick: {
            type: Function
        }
    },
    template: '\n        <div class="high-chart-container">\n            <div :id="id" class="high-chart" :style="getStyle"></div>\n        </div>\n    ',
    data: function data() {
        return {
            chart: ''
        };
    },

    watch: {
        height: function height(value) {
            this.chart.setSize(undefined, value);
        }
    },
    methods: {
        init: function init() {
            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 setOption(options) {
            var categories = options.categories;
            var data = options.data;
            this.setCategories(categories);
            this.setExtremes(null, null);
            this.setData(data);
        },
        setCategories: function setCategories(categories) {
            this.chart.xAxis[0].setCategories(categories, false); // 不更新
        },
        setExtremes: function setExtremes(min, max) {
            this.chart.yAxis[0].setExtremes(min, max, false); // 不更新
        },
        setData: function setData(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 getUnit() {
            // 格式化单位
            var unit = this.unit ? '（' + this.unit + '）' : '';
            return unit;
        },
        getColors: function getColors() {
            var defaults = {
                min: '#ed4014',
                max: '#19be6b',
                normal: '#2db7f5'
            };
            var colors = this.colors;
            var result = $.extend({}, defaults, colors);
            return result;
        }
    },
    computed: {
        getStyle: function getStyle() {
            return {
                height: this.height
            };
        }
    },
    mounted: function mounted() {
        var self = this;
        this.init();
    }
});