<template>
    <div class="prop">
        <Form :label-width="60" class="iui-style-from">
            <FormItem label="左父格" style="margin-bottom:0px;">
                <RadioGroup v-model="leftParentCellType" @on-change="changeLeftParentCellType">
                    <Radio label="默认"></Radio>
                    <Radio label="自定义"></Radio>
                </RadioGroup>
                <Row :gutter="10">
                    <Col span="12">
                    <Select v-model="leftParentCellName" @on-change="changeLeftParentCell" :disabled="leftParentCellType == '默认'">
                        <Option value="root" key="root">无</Option>
                        <Option v-for="item in parentCellNames" :value="item" :key="item">{{item}}</Option>
                    </Select>
                    </Col>
                    <Col span="12">
                    <Select v-model="leftParentCellRow" @on-change="changeLeftParentCell" :disabled="leftParentCellType == '默认' || leftParentCellName == 'root'">
                        <Option value="" key="e"></Option>
                        <Option v-for="item in parentCellRows" :value="item" :key="item">{{item}}</Option>
                    </Select>
                    </Col>
                </Row>
            </FormItem>
            <FormItem label="上父格">
                <RadioGroup v-model="topParentCellType" @on-change="changeTopParentCellType">
                    <Radio label="默认"></Radio>
                    <Radio label="自定义"></Radio>
                </RadioGroup>
                <Row :gutter="10">
                    <Col span="12">
                    <Select v-model="topParentCellName" @on-change="changeTopParentCell" :disabled="topParentCellType == '默认'">
                        <Option value="root" key="root">无</Option>
                        <Option v-for="item in parentCellNames" :value="item" :key="item">{{item}}</Option>
                    </Select>
                    </Col>
                    <Col span="12">
                    <Select v-model="topParentCellRow" @on-change="changeTopParentCell" :disabled="topParentCellType == '默认' || topParentCellName == 'root'">
                        <Option value="" key="e"></Option>
                        <Option v-for="item in parentCellRows" :value="item" :key="item">{{item}}</Option>
                    </Select>
                    </Col>
                </Row>
            </FormItem>
        </Form>
        <Form :label-width="72" class="iui-style-from">
            <FormItem label="单元格类型">
                <Select v-model="cellType" @on-change="changeCellType">
                    <Option value="simple" key="simple">普通文本</Option>
                    <Option value="expression" key="expression">表达式</Option>
                    <Option value="dataset" key="dataset">数据集</Option>
                    <Option value="image" key="image">图片</Option>
                    <!-- <Option value="zxing" key="zxing">二维码</Option> -->
                    <!-- <Option value="qcode" key="qcode">条码</Option> -->
                    <!-- <Option value="chart" key="chart">斜表头</Option> -->
                    <Option value="chart" key="chart">图表</Option>
                </Select>
            </FormItem>
            <simpleValueEditor v-if="cellType=='simple'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></simpleValueEditor>
            <ExpressionEditor v-if="cellType=='expression'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></ExpressionEditor>
            <DatasetEditor v-if="cellType=='dataset'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></DatasetEditor>
            <ImageEditor v-if="cellType=='image'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></ImageEditor>
            <SkewHeadEditor v-if="cellType=='斜表头'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></SkewHeadEditor>
            <ZXingEditor v-if="cellType=='zxing'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></ZXingEditor>
            <BarcodeEditor v-if="cellType=='条码'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></BarcodeEditor>
            <ChartEditor v-if="cellType=='chart'" :cellDef="cellDef" :rowIndex="rowIndex" :colIndex="colIndex"></ChartEditor>
            <span>链接配置</span>
            <FormItem label="URL">
                <Input v-model="linkUrl" @on-change="changeLinkUrl"></Input>
            </FormItem>
            <FormItem label="目标窗口">
                <Row>
                    <Col span="12">
                    <Select v-model="linkTargetWindow" @on-change="changeLinkTargetWindow" transfer>
                        <Option value="_blank" key="_blank">新窗口</Option>
                        <Option value="_self" key="_self">当前窗口</Option>
                    </Select>
                    </Col>
                    <Col span="12">
                    <Button @click="showUrlParamsDlg" type="text">参数配置</Button>
                    </Col>
                </Row>
            </FormItem>
        </Form>
        <Modal title="URL参数配置" v-model="isShowUrlParamsDlg" @on-ok="saveUrlParams">
            <Button @click="addParam">添加参数</Button>
            <Table border :columns="paramColumns" :data="linkParameters" height="160"></Table>
        </Modal>
        <Modal title="添加参数" v-model="isShowAddUrlParamsDlg" @on-ok="saveAddUrlParams">
            <Form :label-width="80" :model="currParam">
                <FormItem label="参数名">
                    <Input v-model="currParam.name"></Input>
                </FormItem>
                <FormItem label="表达式">
                    <Input v-model="currParam.value" type="textarea" :rows="5"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import SimpleValueEditor from './cellEditor/SimpleValueEditor';
import DatasetEditor from './cellEditor/DatasetEditor';
import ImageEditor from './cellEditor/ImageEditor';
import SkewHeadEditor from './cellEditor/SkewHeadEditor';
import ZXingEditor from './cellEditor/ZXingEditor';
import BarcodeEditor from './cellEditor/BarcodeEditor';
import ChartEditor from './cellEditor/ChartEditor';
import ExpressionEditor from './cellEditor/ExpressionEditor';
import $ from 'jQuery'
import Hub from '../../Hub';
import {
    mapState,
    mapActions
} from 'vuex';

export default {
    name: 'Prop',
    data() {
        return {
            cellDef: {},
            rowIndex: 0,
            colIndex: 0,
            row2Index: 0,
            col2Index: 0,

            parentCellNames: null,
            parentCellRows: null,
            leftParentCellType: '默认',
            leftParentCellName: '',
            leftParentCellRow: '',
            topParentCellType: '默认',
            topParentCellName: '',
            topParentCellRow: '',
            linkUrl: '',
            linkTargetWindow: '',
            linkParameters: [],
            isShowUrlParamsDlg: false,
            paramColumns: [{
                title: '参数名',
                key: 'name'
            }, {
                title: '表达式',
                key: 'value'
            }, {
                title: '操作',
                key: 'action',
                width: 150,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.editParam(params.index);
                                }
                            }
                        }, '修改'),
                        h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.delParam(params.index);
                                }
                            }
                        }, '删除')
                    ]);
                }
            }],
            isShowAddUrlParamsDlg: false,
            currParam: {},
            cellType: 'simple'
        };
    },
    components: {
        SimpleValueEditor,
        DatasetEditor,
        ImageEditor,
        SkewHeadEditor,
        ZXingEditor,
        BarcodeEditor,
        ChartEditor,
        ExpressionEditor
    },
    computed: {
        ...mapState(['context', 'tenantId'])
    },
    methods: {
        afterSelection(cellDef, rowIndex, colIndex, row2Index, col2Index) {
            this.cellDef = cellDef;
            this.rowIndex = rowIndex;
            this.colIndex = colIndex;
            this.row2Index = row2Index;
            this.col2Index = col2Index;

            this.buildParentCellNamesOptions();
            this.buildParentCellRowsOptions();
            this.refreshProps();
        },

        /*Event Start*/
        changeLeftParentCell() {
            if (this.leftParentCellType == '自定义') {
                if (this.leftParentCellName == 'root') {
                    this.cellDef.leftParentCellName = 'root';
                    this.leftParentCellRow = '';
                } else {
                    this.cellDef.leftParentCellName = this.leftParentCellName + this.leftParentCellRow;
                }
            }
        },
        changeLeftParentCellType() {
            if (this.leftParentCellType == '默认') {
                this.cellDef.leftParentCellName = undefined;
            }
        },
        changeTopParentCell() {
            if (this.topParentCellType == '自定义') {
                if (this.topParentCellName == 'root') {
                    this.cellDef.topParentCellName = 'root';
                    this.topParentCellRow = '';
                } else {
                    this.cellDef.topParentCellName = this.topParentCellName + this.topParentCellRow;
                }
            }
        },
        changeTopParentCellType() {
            if (this.leftParentCellType == '默认') {
                this.cellDef.topParentCellName = undefined;
            }
        },
        changeLinkUrl() {
            this.cellDef.linkUrl = this.linkUrl;
        },

        changeLinkTargetWindow() {
            this.cellDef.linkTargetWindow = this.linkTargetWindow;
        },

        showUrlParamsDlg() {
            if (!this.linkUrl) {
                this.$Modal.error({
                    title: '错误',
                    content: '<p>请先配置URL</p>'
                });

                return;
            }

            this.isShowUrlParamsDlg = true;

        },
        saveUrlParams() {
            this.cellDef.linkParameters = this.linkParameters;
        },

        addParam() {
            this.currParam = {};
            this.isShowAddUrlParamsDlg = true;
        },

        editParam(index) {
            this.currParam = this.linkParameters[index];
            this.isShowAddUrlParamsDlg = true;
        },

        delParam(index) {
            this.linkParameters.splice(index, 1);
        },

        saveAddUrlParams() {
            if (!~this.linkParameters.indexOf(this.currParam)) {
                this.linkParameters.push(this.currParam);
            }
        },

        changeCellType() {
            this.cellDef.value.type = this.cellType;
            this.context.hot.render();
        },
        /*Event End*/

        buildParentCellNamesOptions() {
            const hot = this.context.hot;
            const countCols = hot.countCols();

            this.parentCellNames = [];
            for (let i = 0; i < countCols; i++) {
                let name = this.context.getCellName(null, i);
                this.parentCellNames.push(name);
            }
        },

        buildParentCellRowsOptions() {
            const hot = this.context.hot;
            const countRows = hot.countRows();

            this.parentCellRows = [];
            for (let i = 0; i < countRows; i++) {
                this.parentCellRows.push(`${i + 1}`);
            }
        },

        refreshProps() {
            this.refreshLeftParentCellName();
            this.refreshTopParentCellName();
            this.refreshLinkInfo();
            this.refreshCelltype();
        },

        refreshLeftParentCellName() {
            const leftParentCellName = this.cellDef.leftParentCellName;
            if (leftParentCellName) {
                this.leftParentCellType = '自定义';

                let data = this.parseCellName(leftParentCellName);
                this.leftParentCellName = data.name;
                this.leftParentCellRow = data.num;
            } else {
                this.leftParentCellType = '默认';
                if (this.colIndex == 0) {
                    this.leftParentCellName = '';
                    this.leftParentCellRow = '';
                } else {
                    let row = this.rowIndex,
                        col = this.colIndex - 1;
                    let td = this.context.hot.getCell(row, col);
                    if ($(td).css('display') === 'none') {
                        let mergeCells = this.context.hot.getSettings().mergeCells;
                        for (let item of mergeCells) {
                            let rowStart = item.row,
                                rowspan = item.rowspan,
                                colStart = item.col,
                                colspan = item.colspan;
                            let rowEnd = rowStart + rowspan - 1,
                                colEnd = colStart + colspan - 1;
                            if (row >= rowStart && row <= rowEnd && col >= colStart && col <= colEnd) {
                                row = rowStart, col = colStart;
                                break;
                            }
                        }
                    }

                    let cellName = this.context.getCellName(row, col);
                    let data = this.parseCellName(cellName);
                    this.leftParentCellName = data.name;
                    this.leftParentCellRow = data.num;
                }
            }
        },

        refreshTopParentCellName() {
            const topParentCellName = this.cellDef.topParentCellName;
            if (topParentCellName) {
                this.topParentCellType = '自定义';

                let data = this.parseCellName(topParentCellName);
                this.topParentCellName = data.name;
                this.topParentCellRow = data.num;
            } else {
                this.topParentCellType = '默认';
                if (this.rowIndex === 0) {
                    this.topParentCellName = '';
                    this.topParentCellRow = '';
                } else {
                    let row = this.rowIndex - 1,
                        col = this.colIndex;
                    let td = this.context.hot.getCell(row, col);
                    if ($(td).css('display') === 'none') {
                        let mergeCells = this.context.hot.getSettings().mergeCells;
                        for (let item of mergeCells) {
                            let rowStart = item.row,
                                rowspan = item.rowspan,
                                colStart = item.col,
                                colspan = item.colspan;
                            let rowEnd = rowStart + rowspan - 1,
                                colEnd = colStart + colspan - 1;
                            if (row >= rowStart && row <= rowEnd && col >= colStart && col <= colEnd) {
                                row = rowStart, col = colStart;
                                break;
                            }
                        }
                    }

                    let cellName = this.context.getCellName(row, col);
                    let data = this.parseCellName(cellName);
                    this.topParentCellName = data.name;
                    this.topParentCellRow = data.num;
                }
            }
        },

        refreshLinkInfo() {
            this.linkUrl = this.cellDef.linkUrl;
            this.linkTargetWindow = this.cellDef.linkTargetWindow;
            this.linkParameters = this.cellDef.linkParameters || [];
        },

        refreshCelltype() {
            this.cellType = this.cellDef.value.type;
        },

        parseCellName(cellName) {
            if (cellName == 'root') {
                return {
                    name: 'root',
                    num: ''
                }
            }

            let pos = -1;
            for (let i = 0; i < cellName.length; i++) {
                let char = cellName.charAt(i);
                let num = parseInt(char);
                if (!isNaN(num)) {
                    pos = i;
                    break;
                }
            }
            const name = cellName.substring(0, pos);
            const num = cellName.substring(pos, cellName.length);
            return {
                name,
                num
            };
        }
    },
    mounted() {
        var that = this;
        Hub.$on('after-selection-end', function(param) {
            that.afterSelection.apply(that, param);
        });
    }
};

</script>
<style lang="less" scoped>
.prop {
    margin: 0;
    padding: 0 10px 10px 10px;
    overflow: hidden;
}

</style>
