<template>
    <Tabs size="small" name="dsTab">
        <TabPane label="数据集配置" tab="dsTab">
            <Form :label-width="60">
                <FormItem label="数据集">
                    <Select v-model="datasetName" @on-change="changeDatasetName">
                        <Option v-for="item in getDatasets" :value="item" :key="item">{{item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="属性">
                    <Select v-model="property" @on-change="onChangeProperty">
                        <Option v-for="item in properties" :value="item" :key="item">{{item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="聚合方式">
                    <Select v-model="aggregate" @on-change="onChangeAggregate">
                        <Option value="select" key="select">列表</Option>
                        <Option value="group" key="group">分组</Option>
                        <Option value="customgroup" key="customgroup">自定义分组</Option>
                        <Option value="sum" key="sum">汇总</Option>
                        <Option value="count" key="count">统计数量</Option>
                        <Option value="max" key="max">最大值</Option>
                        <Option value="min" key="min">最小值</Option>
                        <Option value="avg" key="avg">平均值</Option>
                        <Option value="rownum" key="rownum">行计数</Option>
                    </Select>
                </FormItem>
                <FormItem label="排序方式">
                    <RadioGroup v-model="order" @on-change="onChangeOrder">
                        <Radio label="none">不排序</Radio>
                        <Radio label="asc">正序</Radio>
                        <Radio label="desc">倒序</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="展开方向">
                    <RadioGroup v-model="expand" @on-change="onChangeExpand">
                        <Radio label="Down">向下</Radio>
                        <Radio label="Right">向右</Radio>
                        <Radio label="None">不展开</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="换行计算">
                    <RadioGroup>
                        <Radio label="打开"></Radio>
                        <Radio label="关闭"></Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="格式化">
                    <FormatSelector v-model="format" @on-change="onChangeFormat"></FormatSelector>
                </FormItem>
                <FormItem label="补充空行">
                    <RadioGroup v-model="fillBlankRows" @on-change="changeFillBlakRows">
                        <Radio label="True">打开</Radio>
                        <Radio label="False">关闭</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="条件属性">
                    <DatasetConditionEditor :cellDef="currCellDef"></DatasetConditionEditor>
                </FormItem>
            </Form>
        </TabPane>
        <TabPane label="过滤条件" tab="dsTab">
            <div>
                <a @click="addCondtion">添加</a>
            </div>
            <div>
                <div v-for="(c, index) in conditions" :key="index">
                    <div>
                        <span>{{c.join}}{{c.left}}{{c.operation}}{{c.right}}</span>
                        <a @click="editCondition(c, index)">编辑</a>
                        <a @click="delCodition(index)">删除</a>
                    </div>
                </div>
            </div>
        </TabPane>
        <TabPane label="数据映射" tab="dsTab">
            <div>
                <a @click="addMappingItem">添加</a>
            </div>
            <div>
                <div v-for="(c, index) in mappingItems" :key="index">
                    <div>
                        <span>{{c.value}}-->{{c.label}}</span>
                        <a @click="editMappingItem(c, index)">编辑</a>
                        <a @click="delMappingItem(index)">删除</a>
                    </div>
                </div>
            </div>
        </TabPane>
        <Modal title="条件配置" v-model="showConditionDialog">
            <Form :label-width="60" class="iui-style-from">
                <FormItem v-show="showRelation" label="与上一条件的关系">
                    <Select v-model="join">
                        <Option value="and" key="and">与</Option>
                        <Option value="or" key="or">或</Option>
                    </Select>
                </FormItem>
                <FormItem label="属性名">
                    <Select v-model="left">
                        <Option v-for="item in properties" :value="item" :key="item">{{item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="操作符">
                    <Select v-model="op">
                        <Option value="==" key="k5">等于</Option>
                        <Option value="in" key="k7">在集合中</Option>
                        <Option value=">" key="k1">大于</Option>
                        <Option value=">=" key="k2">大于等于</Option>
                        <Option value="<" key="k3">小于</Option>
                        <Option value="<=" key="k4">小于等于</Option>
                        <Option value="!=" key="k6">不等于</Option>
                        <Option value="like" key="k8">包含</Option>
                    </Select>
                </FormItem>
                <FormItem label="值表达式">
                    <Input v-model="right"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancelConditionDialog" type="text">取消</Button>
                <Button @click="saveCondition" type="primary">确定</Button>
            </div>
        </Modal>
        <Modal title="数据映射" v-model="showMappingDialog">
            <Form :label-width="60" class="iui-style-from">
                <FormItem label="值">
                    <Input v-model="mapValue"></Input>
                </FormItem>
                <FormItem label="显示值">
                    <Input v-model="mapLabel"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancelMappingItemDialog" type="text">取消</Button>
                <Button @click="saveMappingItem" type="primary">确定</Button>
            </div>
        </Modal>
    </Tabs>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import uuid from 'uuid'

import DatasetConditionEditor from './DatasetConditionEditor'
import FormatSelector from '../../../components/format_selector'
export default {
    name: 'DatasetEditor',
    data() {
        return {
            datasetName: '',
            property: '',
            aggregate: '',
            order: '',
            expand: '',
            format: '',

            properties: [],
            // cellValue: {},
            // cellStyle: {},
            fillBlankRows: 'False',
            conditions: undefined,
            showConditionDialog: false,
            join: '',
            left: '',
            op: '',
            right: '',
            currCondition: {},
            isAdd: undefined,
            mappingItems: undefined,
            mapValue: '',
            mapLabel: '',
            showMappingDialog: false,
        }
    },
    components: {
        DatasetConditionEditor,
        FormatSelector,
    },
    watch: {
        currCellDef() {
            this.refresh()
        },
    },
    computed: {
        ...mapState(['context', 'currCellDef', 'currRowIndex', 'currColIndex']),
        ...mapGetters(['getDatasets']),
        showRelation() {
            return this.conditions && this.conditions.length > 0
        },
    },
    methods: {
        onChange() {
            const cellValue = this.currCellDef.value
            const value = `${cellValue.datasetName}.${cellValue.aggregate}(${cellValue.property})`

            this.context.hot.setDataAtCell(
                this.currRowIndex,
                this.currColIndex,
                value
            )
        },
        /*Events*/
        changeDatasetName() {
            let f = []
            let find = false
            for (let ds of this.context.reportDef.datasources) {
                if (find) {
                    break
                }
                for (let item of ds.datasets) {
                    if (item.name == this.datasetName) {
                        for (let field of item.fields) {
                            f.push(field.name)
                        }

                        find = true
                        break
                    }
                }
            }

            let cellValue = this.currCellDef.value
            cellValue.datasetName = this.datasetName
            this.properties = f

            if (!~this.properties.indexOf(this.property)) {
                this.property = ''
                this.onChangeProperty()
            } else {
                this.onChange()
            }
        },

        onChangeProperty() {
            this.currCellDef.value.property = this.property
            this.onChange()
        },

        onChangeAggregate() {
            this.currCellDef.value.aggregate = this.aggregate
            this.onChange()
        },

        onChangeOrder() {
            this.currCellDef.value.order = this.order
        },

        onChangeExpand() {
            this.currCellDef.expand = this.expand
            this.onChange()
        },

        onChangeFormat() {
            this.currCellDef.cellStyle.format = this.format
        },

        changeFillBlakRows() {
            this.currCellDef.fillBlankRows = this.fillBlankRows = 'True'
        },

        /*Events*/
        refresh() {
            let cellValue = this.currCellDef.value

            this.datasetName = cellValue.datasetName
            this.property = cellValue.property
            this.aggregate = cellValue.aggregate
            this.order = cellValue.order
            this.expand = this.currCellDef.expand
            this.format = this.currCellDef.cellStyle.format

            this.conditions = cellValue.conditions
            this.mappingItems = cellValue.mappingItems

            this.datasetName = cellValue.datasetName
            this.fillBlankRows = this.currCellDef.fillBlankRows
                ? 'True'
                : 'False'

            this.changeDatasetName()
        },

        cancelConditionDialog() {
            this.showConditionDialog = false
        },

        saveCondition() {
            this.showConditionDialog = false

            if (this.isAdd == true) {
                const c = {
                    left: this.left,
                    operation: this.op,
                    right: this.right,
                    join: this.join,
                    id: uuid.v4(),
                }

                if (!this.conditions) {
                    this.conditions = this.currCellDef.value.conditions = []
                }
                this.conditions.push(c)
            } else if (this.isAdd == false) {
                this.currCondition.left = this.left
                this.currCondition.operation = this.op
                this.currCondition.right = this.right
                this.currCondition.join = this.join
            }
        },

        addCondtion() {
            this.join = ''
            this.left = ''
            this.op = ''
            this.right = ''
            this.showConditionDialog = true
            this.isAdd = true
        },

        editCondition(c) {
            this.currCondition = c
            this.join = c.join
            this.left = c.left
            this.op = c.operation
            this.right = c.right
            this.isAdd = false
            this.showConditionDialog = true
        },

        delCodition(index) {
            this.conditions.splice(index, 1)
        },

        addMappingItem() {
            this.mapValue = ''
            this.mapLabel = ''

            this.showMappingDialog = true
        },

        editMappingItem(item) {
            this.mapValue = item.value
            this.mapLabel = item.label

            this.showMappingDialog = true
        },

        delMappingItem(index) {
            this.mappingItems.splice(index, 1)
        },

        cancelMappingItemDialog() {
            this.showMappingDialog = false
        },

        saveMappingItem() {
            if (!this.mapValue || !this.mapLabel) {
                alert('不能空')

                return
            }

            if (!this.mappingItems) {
                this.mappingItems = this.currCellDef.value.mappingItems = []
            }

            let item = this.mappingItems.find((it) => {
                return it.value === this.mapValue
            })

            if (item) {
                item.label = this.mapLabel
            } else {
                this.mappingItems.push({
                    value: this.mapValue,
                    label: this.mapLabel,
                })
            }

            this.showMappingDialog = false
        },
    },
    mounted() {
        this.refresh()
    },
}
</script>
<style>
</style>
