<template>
    <div>
        <div class="filters-container">

            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
            </el-button>
            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small" icon="el-icon-search" class="filter-item">高级查询
            </el-button>
        </div>
        <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
            <el-table :data="advancedQueryFields">

                <el-table-column prop="link" label="链接符" align="center">
                    <template slot-scope="{row}">
                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
                            <el-option label="AND" value="AND">
                            </el-option>
                            <el-option label="OR" value="OR">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="字段" align="center">
                    <template slot-scope="{row}">
                        <el-select v-model="row.name">

                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
                    <template slot-scope="{row}">
                        <el-select v-model="row.searchMethod">
                            <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="value" label="参数" align="center">
                    <template slot-scope="{row}">
                        <el-input v-model="row.value"></el-input>
                    </template>
                </el-table-column>
                <el-table-column width="60" align="center">
                    <template slot-scope="{ row, column, $index }">
                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <span slot="footer" class="dialog-footer">

                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
            </span>
        </el-dialog>

        <line-chart ref="line" :height='200' :chartData='lineData' :options='lineOptions' style="max-width:1000px;margin:auto"></line-chart>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'
import lineChart from '../components/Line'

export default {
    created() {
    },
    data() {
        return {
            filter1: '',
            multipleMode: false,
            showAdvancedQueryDialog: false,
            advancedQueryFields: [],
            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
            advancedQueryColumns: [
                {
                    label: 'id',
                    value: 'id'
                },
                {
                    label: '名字',
                    value: 'test_name'
                },
                {
                    label: '备注',
                    value: 'remark'
                },
                {
                    label: '图片',
                    value: 'image_url'
                },
                {
                    label: '时间',
                    value: 'test_time'
                },
                {
                    label: '多选',
                    value: 'multi_select'
                },
            ],
            advancedQuerySearchKey: '',
            lineData: null,
            lineOptions: {
                responsive: true,
                title: {
                    display: true,
                    text: '折线图'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                // hover: {
                //     mode: 'nearest',
                //     intersect: true
                // },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            },
            chartColors: {
                red: 'rgb(255, 99, 132)',
                orange: 'rgb(255, 159, 64)',
                yellow: 'rgb(255, 205, 86)',
                green: 'rgb(75, 192, 192)',
                blue: 'rgb(54, 162, 235)',
                purple: 'rgb(153, 102, 255)',
                grey: 'rgb(201, 203, 207)'
            },
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            this.type = this.$route.query.type
            this.$http.get({
                url: '/testAaa/all',
                data: {
                    searchKey: this.filter1,
                    advancedQuery: this.advancedQuerySearchKey,
                }
            }).then(res => {
                if (res.success) {
                    var tempLables = [];
                    var tempDatasetsLabels = [];

                    res.data.forEach(item => {
                        tempLables.push(item.testName);
                        tempDatasetsLabels.push(item.remark);
                    })

                    tempLables = Array.from(new Set(tempLables));

                    tempDatasetsLabels = Array.from(new Set(tempDatasetsLabels))

                    var tempDatasets = []

                    tempDatasetsLabels.forEach((item, index) => {

                        var colorNames = Object.keys(this.chartColors);
                        var colorName = colorNames[(index + 1) % colorNames.length];

                        var tempData = [];

                        tempLables.forEach(item2 => {
                            var datavalue = null;
                            res.data.forEach(item3 => {
                                if (item2 == item3.testName && item == item3.remark) {
                                    datavalue = item3.multiSelect;
                                }
                            })

                            tempData.push(datavalue)
                        })

                        var newDataset = {
                            label: item,
                            backgroundColor: this.chartColors[colorName],
                            borderColor: this.chartColors[colorName],
                            data: tempData,
                            fill: false
                        }

                        tempDatasets.push(newDataset);

                    })

                    this.lineData = {
                        datasets: tempDatasets,
                        labels: tempLables,

                    }


                    this.$refs.line.updateChart()




                }
            })
        },
        addField() {
            this.advancedQueryFields.push({
                link: 'AND',
                name: '',
                searchMethod: '=',
                value: '',
            });
        },
        removeField(i) {
            if (this.advancedQueryFields.length > 0) {
                this.advancedQueryFields.splice(i, 1);
            }
        },
        advancedQuery() {

            this.advancedQuerySearchKey = '';

            if (this.advancedQueryFields.length > 0) {

                var templist = [];

                this.advancedQueryFields.forEach(item => {
                    if (item.link && item.name && item.searchMethod && item.value) {
                        var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
                        templist.push(tempItem);
                    }
                })

                if (templist.length > 0) {

                    this.advancedQuerySearchKey = templist.join('_;');
                }
            }

            this.getData();
            this.$refs.line.updateChart()
            this.showAdvancedQueryDialog = false;
        },
        searchData() {
            this.getData();
            setTimeout(() => {

            }, 1000)
        },

    },
    components: { lineChart }
}
</script>
<style lang="less" scoped>
</style>
