<template>
    <div class="iui-datasource-pane">
        <Button @click="showAdd" type="dashed" icon="md-add">新增数据源</Button>
        <div v-for="(ds, i1) in dsList" :key="i1">
            <div class="iui-datasource-tool-item">
                <span class="iui-datasource-caption">{{ds.name}}</span>
                <a
                    class="iui-datasource-tool iui-datasource-tool-delete"
                    @click="del(i1)"
                    title="删除"
                ></a>
                <a
                    class="iui-datasource-tool iui-datasource-tool-edit"
                    @click="showEdit(ds)"
                    title="编辑"
                ></a>
                <a
                    class="iui-datasource-tool iui-datasource-tool-add"
                    @click="addDataset(ds)"
                    title="添加数据集"
                ></a>
            </div>
            <div v-for="(dataset, i2) in ds.datasets" :key="i2">
                <div class="iui-dataset-tool-item">
                    <span class="iui-dataset-caption">{{dataset.name}}</span>
                    <a
                        class="iui-dataset-tool iui-dataset-tool-delete"
                        @click="delDataset(ds, i2)"
                        title="删除"
                    ></a>
                    <a
                        class="iui-dataset-tool iui-dataset-tool-edit"
                        @click="editDataset(ds, dataset)"
                        title="编辑"
                    ></a>
                </div>
                <div class="iui-field-tool-item" v-for="(field, i3) in dataset.fields" :key="i3">
                    <span
                        class="iui-field-caption"
                        @dblclick="setDataField(dataset.name, field.name)"
                    >{{field.name}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import DesignApi from '@/api/designer'
import JdbcDatasourceDialog from './dialogs/JdbcDatasourceDialog'
import DatasetDialog from './dialogs/DatasetDialog'
import Utils from '@/libs/utils'
import Hub from '../../Hub'
import { mapState } from 'vuex'

export default {
    name: 'Datasource',
    data() {
        return {
            datasources: null,
        }
    },
    computed: {
        ...mapState(['context', 'currCellDef', 'currRowIndex', 'currColIndex']),
        dsList() {
            if (!this.datasources) {
                return []
            }

            return this.datasources.filter((elem) => {
                return elem.type === 'jdbc'
            })
        },
    },
    methods: {
        showAdd() {
            Utils.showModal(JdbcDatasourceDialog, {
                data: {
                    data: {
                        type: 'jdbc',
                        datasets: [],
                    },
                },
                methods: {
                    afterOk: (data) => {
                        if (!data.name) {
                            return
                        }
                        let fi = this.datasources.findIndex((ds) => {
                            return ds.name === data.name
                        })

                        if (fi === -1) {
                            this.datasources.push(data)
                        }
                    },
                },
            })
        },

        showEdit(ds) {
            Utils.showModal(JdbcDatasourceDialog, {
                data: {
                    data: Object.assign({}, ds),
                    disabled: true,
                },
                methods: {
                    afterOk: (data) => {
                        Object.assign(ds, data)
                    },
                },
            })
        },

        del(index) {
            this.$Modal.confirm({
                title: '确认',
                content: `<p>确定删除数据源?</p>`,
                onOk: () => {
                    this.datasources.splice(index, 1)
                },
            })
        },

        addDataset(ds) {
            Utils.showModal(DatasetDialog, {
                data: {
                    data: { fields: [] },
                },
                methods: {
                    afterOk: (data) => {
                        ds.datasets.push(data)
                        this.updateField(ds, data)
                    },
                },
            })
        },

        editDataset(ds, dataset) {
            Utils.showModal(DatasetDialog, {
                data: {
                    data: Object.assign({}, dataset),
                },
                methods: {
                    afterOk: (data) => {
                        Object.assign(dataset, data)
                        this.updateField(ds, dataset)
                    },
                },
            })
        },

        delDataset(ds, index) {
            ds.datasets.splice(index, 1)
        },

        refresh() {
            this.datasources = this.context.reportDef.datasources
        },

        updateField(ds, dataset) {
            DesignApi.getDatasourceFields({
                sql: dataset.sql,
                parameters: JSON.stringify(dataset.parameters),
                username: ds.username,
                password: ds.password,
                driver: ds.driver,
                url: ds.url,
                type: 'jdbc',
            }).then(function (fields) {
                if (fields) {
                    Vue.set(dataset, 'fields', fields)
                }
            })
        },

        setDataField(datasetName, fieldName) {
            let cellValue = this.currCellDef.value
            if (!cellValue) {
                return
            }

            if (cellValue.type === 'dataset') {
                cellValue.datasetName = datasetName
                cellValue.property = fieldName
            } else {
                cellValue.type = 'dataset'
                cellValue.datasetName = datasetName
                cellValue.property = fieldName
                cellValue.aggregate = 'select'
                cellValue.order = 'none'
            }

            const value = `${cellValue.datasetName}.${cellValue.aggregate}(${cellValue.property})`
            this.context.hot.setDataAtCell(
                this.currRowIndex,
                this.currColIndex,
                value
            )
        },
    },
    created() {
        Hub.$on('context_inited', () => {
            this.refresh()
        })
    },
}
</script>
<style scoped>
.iui-datasource-pane {
    margin: 0 8px;
}

.iui-db-tool-item {
    height: 32px;
    line-height: 32px;
}

.iui-datasource-tool-item {
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}

.iui-datasource-tool-item:hover {
    background-color: #f8f8f9;
}

.iui-datasource-tool-item:hover .iui-datasource-tool {
    display: inline-block;
}

.iui-db-tool {
    background-position: right center;
    background-repeat: no-repeat;
    display: inline-block;
    padding-right: 26px;
    height: 32px;
    line-height: 32px;
}

.iui-datasource-caption {
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    padding-left: 20px;
    background-position: left center;
    background-image: url(../../assets/icons/datasource.png);
}

.iui-datasource-tool {
    float: right;
    height: 24px;
    width: 24px;
    display: none;
    background-repeat: no-repeat;
    background-position: center center;
}

.iui-db-tool-add {
    background-image: url(../../assets/icons/add.png);
}

.iui-datasource-tool-edit {
    background-image: url(../../assets/icons/edit_16.png);
}

.iui-datasource-tool-delete {
    background-image: url(../../assets/icons/delete_16.png);
}

.iui-datasource-tool-add {
    background-image: url(../../assets/icons/add_16.png);
}

.iui-dataset-tool {
    float: right;
    height: 24px;
    width: 24px;
    display: none;
    background-repeat: no-repeat;
    background-position: center center;
}

.iui-dataset-tool-item {
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}

.iui-dataset-tool-item:hover {
    background-color: #f8f8f9;
}

.iui-dataset-tool-item:hover .iui-dataset-tool {
    display: inline-block;
}

.iui-dataset-caption {
    margin-left: 20px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    padding-left: 20px;
    background-position: left center;
    background-image: url(../../assets/icons/dataset.png);
}

.iui-dataset-tool-edit {
    background-image: url(../../assets/icons/edit_16.png);
}

.iui-dataset-tool-delete {
    background-image: url(../../assets/icons/delete_16.png);
}

.iui-dataset-tool-add {
    background-image: url(../../assets/icons/add_16.png);
}

.iui-field-tool-item {
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}

.iui-field-tool-item:hover {
    background-color: #f8f8f9;
}

.iui-field-tool-item:hover .iui-field-tool-delete {
    display: inline-block;
}

.iui-field-caption {
    margin-left: 40px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    padding-left: 20px;
    background-position: left center;
    background-image: url(../../assets/icons/field.png);
}

.iui-field-tool {
    float: right;
    height: 24px;
    width: 24px;
    display: none;
    background-repeat: no-repeat;
    background-position: center center;
}

.iui-field-tool-delete {
    background-image: url(../../assets/icons/delete_16.png);
}
</style>
