<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="Y轴绑定字段配置" name="yAxis">
                <el-table :data="yDataList" 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="100" 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"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="绑定Y轴" width="100" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.yAxisShow"></el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <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="100" 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"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="绑定X轴" width="100" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.xAxisShow"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="柱体堆叠组名" width="150" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stack"></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: "XYBindFlipBarSimple",
    props: {
        dictCode: String,
        modelData: String,
    },
    data() {
        return {
            activeName: "yAxis",
            dialogVisible: false,
            dataList: [],
            yDataList: [],
            xDataList: []
        };
    },
    methods: {
        okHandler() {
            let xRows = [],
                yRows = [];

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

                    aRow.field = item.field;
                    aRow.alias = item.alias;
                    aRow.yAxisShow = eval(item.yAxisShow);

                    yRows.push(aRow);
                }
            });

            this.xDataList.forEach((item) => {
                if (item.xAxisShow) {
                    let aRow = {};

                    aRow.field = item.field;
                    aRow.alias = item.alias;
                    aRow.xAxisShow = eval(item.xAxisShow);
                    aRow.stack = item.stack;

                    xRows.push(aRow);
                }
            });

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

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

            let modelDataObj = JSON.parse(this.modelData)["yAxisBindFields"];
            let rs = [];
            for (var i in list) {
                let row = ({
                    field: list[i].fieldCode,
                    alias: list[i].fieldName,
                    dataType: list[i].dataType,
                    xAxisShow: false,
                    stack: null
                });
                var matchRows = modelDataObj.filter(function (item) {
                    return item.field == row.field;
                });
                if (matchRows.length > 0) {
                    let bindRow = matchRows[0];

                    if (eval(bindRow.xAxisShow)) {
                        row.xAxisShow = eval(bindRow.xAxisShow);
                    }

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

            let modelDataObj = JSON.parse(this.modelData)["xAxisBindFields"];
            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 = modelDataObj.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);
                    }
                }
                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,
                        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">
.pub_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;

    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;

        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
</style>
