<template>
<div>
    <el-button @click="setHandler">设置</el-button>
    <el-dialog :close-on-click-modal="false"  title="数据项配置" :visible.sync="dialogVisible" width="50%">
        <el-tabs v-model="activeName">
            <el-tab-pane label="X轴绑定字段配置" name="XAxis">
                <el-table :data="xDataList" style="width: 100%" highlight-current-row border height="320">
                    <el-table-column label="字段"  align="center">
                        <template slot-scope="scope">{{scope.row.field}}</template>
                    </el-table-column>
                    <el-table-column label="数据类型" width="150" align="center">
                        <template slot-scope="scope">{{scope.row.dataType}}</template>
                    </el-table-column>
                    <el-table-column label="名称" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.alias" @input="change"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="绑定X轴" width="150" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.xAxisShow"></el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="Y轴绑定字段配置" name="YAxis">
                <el-table :data="yDataList" style="width: 100%" highlight-current-row border height="320">
                    <el-table-column label="字段" width="150" align="center">
                        <template slot-scope="scope">{{scope.row.field}}</template>
                    </el-table-column>
                    <el-table-column label="数据类型" width="80" align="center">
                        <template slot-scope="scope">{{scope.row.dataType}}</template>
                    </el-table-column>
                    <el-table-column label="名称" width="150" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.alias" @input="change"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="绑定Y轴" width="80" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.yAxisShow"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="显示位置" width="120" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.yAxisIndex">
                                <el-option v-for="item in yAxisIndexOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="显示类型" width="100" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.chartType">
                                <el-option v-for="item in chartTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="柱体堆叠组名"  align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stack" @input="change"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域堆积" width="80" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.areaStyle"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="图例显示" width="80" align="center">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.legendShow"></el-switch>
                      </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <!-- <el-tab-pane label="数据预览" name="preview">
              <el-table :data="dataList" style="width: 100%" highlight-current-row>
                <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column label="字段" width="150" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.color"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="数据类型" width="150" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.color"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="名称" width="150" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.color"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="绑定X轴" width="150" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.color"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>-->
        </el-tabs>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="okHandler" size="mini">保 存</el-button>
            <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import $ from "jquery";
export default {
    name: "XYBind",
    props: {
        dictCode: String,
        modelData: String
    },
    data() {
        return {
            activeName: "XAxis",
            dialogVisible: false,
            yAxisIndexOptions: [{
                    value: "0",
                    label: "第一Y轴"
                },
                {
                    value: "1",
                    label: "第二Y轴"
                }
            ],
            chartTypeOptions: [{
                    value: "line",
                    label: "折线"
                },
                {
                    value: "bar",
                    label: "柱状"
                }
            ],
            dataList: [],
            xDataList: [],
            yDataList: []
        };
    },
    methods: {
        okHandler() {
            let xRows = [],
                yRows = [];

            this.xDataList.forEach(function (item) {
                if (item.xAxisShow) {
                    let aRow = {};
                    aRow.xAxisShow = eval(item.xAxisShow);
                    aRow.field = item.field;
                    aRow.alias = item.alias;

                    xRows.push(aRow);
                }
            });

            this.yDataList.forEach(item => {
                if (item.yAxisShow) {
                    let aRow = {};

                    aRow.field = item.field;
                    aRow.alias = item.alias;
                    aRow.yAxisShow = eval(item.yAxisShow);
                    aRow.yAxisIndex = item.yAxisIndex;
                    aRow.chartType = item.chartType;
                    aRow.stack = item.stack;
                    aRow.areaStyle = item.areaStyle;
                    aRow.legendShow = item.legendShow;

                    yRows.push(aRow);
                }
            });

            this.$emit(
                "set-value",
                this.dictCode,
                JSON.stringify({
                    xAxisBindFields: xRows,
                    yAxisBindFields: yRows
                })
            );

            this.dialogVisible = false;
        },
        setHandler() {
            this.xDataList = this.initXDataList();
            this.yDataList = this.initYDataList()
            this.dialogVisible = true;
        },
        change() {
            this.$forceUpdate();
        },
        initXDataList() {
            let list = this.colList;
            if (!list) {
                return;
            }

            //回显处理
            let xBindValue = [];
            if (this.modelData) {
                let modelDataObj = JSON.parse(this.modelData);
                if (modelDataObj.xAxisBindFields) {
                    xBindValue = modelDataObj.xAxisBindFields;
                }
            }

            let rs = [];
            for (var i in list) {
                let row = {
                    field: list[i].fieldCode,
                    alias: list[i].fieldName,
                    dataType: list[i].dataType,
                    xAxisShow: false
                };

                var matchRows = xBindValue.filter(function (item) {
                    return item.field == row.field;
                });
                if (matchRows.length > 0) {
                    let bindRow = matchRows[0];

                    if (bindRow.alias) {
                        row.alias = bindRow.alias;
                    }

                    if (eval(bindRow.xAxisShow)) {
                        row.xAxisShow = eval(bindRow.xAxisShow);
                    }
                }
                rs.push(row);
            }
            return rs;
        },
        initYDataList() {
            let list = this.colList;
            if (!list) {
                return;
            }

            //回显处理
            let yBindValue = [];
            if (this.modelData) {
                let modelDataObj = JSON.parse(this.modelData);
                if (modelDataObj.yAxisBindFields) {
                    yBindValue = modelDataObj.yAxisBindFields;
                }
            }

            let rs = [];
            for (var i in list) {
                let row = {
                    field: list[i].fieldCode,
                    alias: list[i].fieldName,
                    dataType: list[i].dataType,
                    yAxisShow: false
                };

                var matchRows = yBindValue.filter(function (item) {
                    return item.field == row.field;
                });

                if (matchRows.length > 0) {
                    let bindRow = matchRows[0];

                    if (eval(bindRow.yAxisShow)) {
                        row.yAxisShow = eval(bindRow.yAxisShow);
                    }
                    if (bindRow.alias) {
                        row.alias = bindRow.alias;
                    }
                    if (bindRow.yAxisIndex) {
                        row.yAxisIndex = bindRow.yAxisIndex;
                    }
                    if (bindRow.chartType) {
                        row.chartType = bindRow.chartType;
                    }
                    if (bindRow.stack) {
                        row.stack = bindRow.stack;
                    }
                    if (bindRow.areaStyle) {
                        row.areaStyle = bindRow.areaStyle;
                    }
                    row.legendShow = bindRow.legendShow || false;
                }
                rs.push(row);
            }
            return rs;
        }
    },
    computed: {
        colList: {
            get() {
                let me = this;
                let attrObj = me.GLOBAL.fwebdesigner.selectedCom;

                let finalPath = null;
                if (me.GLOBAL) {
                    finalPath = me.GLOBAL.basePath;
                }

                let list = [];
                let reqUrl = null;
                if (attrObj["dataType"] == "sql") {
                    if (!attrObj["data_source"]) {
                        me.$message.error("请选择数据视图！");
                    } else {
                        let dsObj = me.GLOBAL.fwebdesigner.dsList.filter(function (obj) {
                            return obj.dsCode == attrObj["data_source"];
                        });
                        let ds = dsObj[0];
                        if (ds && ds.entityCode) {
                            reqUrl =
                                finalPath +
                                "fweb-form/data/entities/entity/getcolumns?entityCode=" +
                                ds.entityCode;
                        }
                    }
                }

                if (attrObj["dataType"] == "api") {
                    reqUrl = finalPath + attrObj["dataUrl"];
                }

                if (reqUrl) {
                    $.ajax({
                        url: reqUrl,
                        async: false,
                        contentType: "application/json",
                        data: {
                            inFwebDesigner: 1
                        },
                        dataType: "json",
                        success: function (res) {
                            if (attrObj["dataType"] == "sql") {
                                list = res.data;
                            }
                            if (attrObj["dataType"] == "api") {
                                if (res.rows) {
                                    let data = res.rows;
                                    res.data = data;
                                    delete res["rows"];
                                }

                                if (res.data) {
                                    for (var p in res.data[0]) {
                                        list.push({
                                            fieldCode: p,
                                            fieldName: p,
                                            dataType: typeof res.data[0][p]
                                        });
                                    }
                                }
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log("jqXHR :", JSON.stringify(jqXHR));
                        }
                    });
                }

                return list;
            }
        }
    }
};
</script>

<style lang="scss">
</style>
