<template>
    <BaseModal title="图表配置"
        :width="800">
        <Tabs>
            <TabPane label="基本">
                <Form :label-width="80">
                    <FormItem label="图表类型">
                        <Select v-model="data.type"
                            style="width:100px"
                            transfer>
                            <Option value="bar">柱状图</Option>
                            <Option value="pie">饼图(还不支持)</Option>
                            <Option value="stripe">条状图(还不支持)</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="Padding">
                        <Row>
                            <Col :span="6">
                            <span>上</span>
                            <InputNumber v-model="data.padding.top"></InputNumber>
                            </Col>
                            <Col :span="6">
                            <span>右</span>
                            <InputNumber v-model="data.padding.right"></InputNumber>
                            </Col>
                            <Col :span="6">
                            <span>下</span>
                            <InputNumber v-model="data.padding.bottom"></InputNumber>
                            </Col>
                            <Col :span="6">
                            <span>左</span>
                            <InputNumber v-model="data.padding.left"></InputNumber>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="数据源">
                        <Select v-model="data.datasetName"
                            transfer
                            style="width:200px">
                            <Option v-for="item in datasets"
                                :value="item"
                                :key="item">{{item}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="列X">
                        <Row>
                            <Col :span="6">
                            <span>数据字段</span>
                            <Select style="width:100px"
                                v-model="data.x.name"
                                transfer>
                                <Option v-for="item in fields"
                                    :value="item"
                                    :key="item">{{item}}</Option>
                            </Select>
                            </Col>
                            <Col :span="6">
                            <span>别名</span>
                            <Input style="width:100px"
                                v-model="data.x.alias"></Input>
                            </Col>
                            <Col :span="6">
                            <span>类型</span>
                            <Select style="width:100px"
                                v-model="data.x.type"
                                transfer>
                                <Option value="identity">identity</Option>
                                <Option value="cat">cat</Option>
                                <Option value="timeCat">timeCat</Option>
                                <Option value="linear">linear</Option>
                                <Option value="log">log</Option>
                                <Option value="pow">pow</Option>
                                <Option value="time">time</Option>
                            </Select>
                            </Col>
                        </Row>
                        <Row>
                            <Col :span="6">
                            <span>min</span>
                            <Input style="width:100px"
                                v-model="data.x.min"></Input>
                            </Col>
                            <Col :span="6">
                            <span>max</span>
                            <Input style="width:100px"
                                v-model="data.x.max"></Input>
                            </Col>
                        </Row>
                        <Row>
                            <Col :span="2">
                            <span>formatter</span>
                            </Col>
                            <Col :span="12">
                            <Input type="textarea"
                                :rows="2"
                                v-model="data.x.formatter"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="列Y">
                        <Row>
                            <Col :span="6">
                            <span>数据字段</span>
                            <Select style="width:100px"
                                v-model="data.y.name"
                                transfer>
                                <Option v-for="item in fields"
                                    :value="item"
                                    :key="item">{{item}}</Option>
                            </Select>
                            </Col>
                            <Col :span="6">
                            <span>别名</span>
                            <Input style="width:100px"
                                v-model="data.y.alias"></Input>
                            </Col>
                            <Col :span="6">
                            <span>类型</span>
                            <Select style="width:100px"
                                v-model="data.y.type"
                                transfer>
                                <Option value="identity">identity</Option>
                                <Option value="cat">cat</Option>
                                <Option value="timeCat">timeCat</Option>
                                <Option value="linear">linear</Option>
                                <Option value="log">log</Option>
                                <Option value="pow">pow</Option>
                                <Option value="time">time</Option>
                            </Select>
                            </Col>
                        </Row>
                        <Row>
                            <Col :span="6">
                            <span>min</span>
                            <Input style="width:100px"
                                v-model="data.y.min"></Input>
                            </Col>
                            <Col :span="6">
                            <span>max</span>
                            <Input style="width:100px"
                                v-model="data.y.max"></Input>
                            </Col>
                        </Row>
                        <Row>
                            <Col :span="2">
                            <span>formatter</span>
                            </Col>
                            <Col :span="12">
                            <Input type="textarea"
                                :rows="2"
                                v-model="data.y.formatter"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="颜色">
                        <Row>
                            <Col :span="6">
                            <span>颜色字段</span>
                            <Select style="width:100px"
                                v-model="data.colorField"
                                transfer>
                                <Option v-for="item in fields"
                                    :value="item"
                                    :key="item">{{item}}</Option>
                            </Select>
                            </Col>
                            <Col :span="6">
                            <span>颜色值</span>
                            <Input style="width:100px"
                                v-model="data.colorValue"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
            </TabPane>
            <TabPane label="脚本">
                <Input type="textarea"
                    :rows="10"
                    v-model="data.script"></Input>
                </Col>
            </TabPane>
        </Tabs>
    </BaseModal>
</template>
<script>
export default {
    name: 'ChartEditorDialog',
    data() {
        return {
            data: {},
            fields: []
        };
    },
    components: {

    },
    props: {
        reportDef: {
            type: Object
        },
        datasets: {
            type: Array
        }
    },
    watch: {
        'data.datasetName': {
            handler(newVal) {
                this.changeDataset(newVal)
            },
            immediate: true
        }
    },
    computed: {},
    methods: {
        changeDataset(datasetName) {
            if (!datasetName) {
                this.fields = []
                this.data.x.name = ''
                this.data.y.name = ''

                return;
            }

            let dataset
            this.reportDef.datasources.some(dsItem => {
                dataset = dsItem.datasets.find(item => {
                    return item.name === datasetName
                })

                if (dataset) {
                    return true
                }
            })

            if (dataset) {
                this.fields = dataset.fields.map(item => { return item.name })
            }

            if (!~this.fields.indexOf(this.data.x.name)) {
                this.data.x.name = ''
            }

            if (!~this.fields.indexOf(this.data.y.name)) {
                this.data.y.name = ''
            }
        }
    },
    mounted() {}
};

</script>
<style>
</style>
