<template>
    <i>
        <a href="javascript:void(0)"
            @click="setUpOptions"
            class="iui-toolbar-icon-options"
            title="设置"></a>
        <Modal v-model="isShowReportOptionsDialog"
            title="报表配置"
            @on-ok="saveConfig"
            :width="680">
            <Form :label-width="60">
                <Tabs>
                    <TabPane label="页面设置">
                        <Form :model="paper">
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="4">页面类型</Col>
                                    <Col span="4">
                                    <Select v-model="paper.paperType"
                                        @on-change="changePaperType">
                                        <Option value="A0"
                                            key="A0">A0</Option>
                                        <Option value="A1"
                                            key="A1">A1</Option>
                                        <Option value="A2"
                                            key="A2">A2</Option>
                                        <Option value="A3"
                                            key="A3">A3</Option>
                                        <Option value="A4"
                                            key="A4">A4</Option>
                                        <Option value="A5"
                                            key="A5">A5</Option>
                                        <Option value="A6"
                                            key="A6">A6</Option>
                                        <Option value="A7"
                                            key="A7">A7</Option>
                                        <Option value="A8"
                                            key="A8">A8</Option>
                                        <Option value="A9"
                                            key="A9">A9</Option>
                                        <Option value="A10"
                                            key="A10">A10</Option>
                                        <Option value="B0"
                                            key="B0">B0</Option>
                                        <Option value="B1"
                                            key="B1">B1</Option>
                                        <Option value="B2"
                                            key="B2">B2</Option>
                                        <Option value="B3"
                                            key="B3">B3</Option>
                                        <Option value="B4"
                                            key="B4">B4</Option>
                                        <Option value="B5"
                                            key="B5">B5</Option>
                                        <Option value="B6"
                                            key="B6">B6</Option>
                                        <Option value="B7"
                                            key="B7">B7</Option>
                                        <Option value="B8"
                                            key="B8">B8</Option>
                                        <Option value="B9"
                                            key="B9">B9</Option>
                                        <Option value="B10"
                                            key="B10">B10</Option>
                                        <Option value="CUSTOM"
                                            key="CUSTOM">自定义</Option>
                                    </Select>
                                    </Col>
                                    <Col span="4">页面宽度(mm)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.width"
                                        :disabled="paper.paperType!='CUSTOM'"></Input>
                                    </Col>
                                    <Col span="4">页面高度(mm)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.height"
                                        :disabled="paper.paperType!='CUSTOM'"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="4">左边距(mm)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.leftMargin"></Input>
                                    </Col>
                                    <Col span="4">右边距(mm)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.rightMargin"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="4">上边距(mm)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.topMargin"></Input>
                                    </Col>
                                    <Col span="4">下边距(mm)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.bottomMargin"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="4">方向</Col>
                                    <Col span="12">
                                    <Select v-model="paper.orientation">
                                        <Option value="portrait"
                                            key="portrait">纵向</Option>
                                        <Option value="landscape"
                                            key="landscape">横向</Option>
                                    </Select>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="8">HTML报表输出时对齐方式</Col>
                                    <Col span="4">
                                    <Select v-model="paper.htmlReportAlign"
                                        placement="top">
                                        <Option value="left"
                                            key="left">靠左</Option>
                                        <Option value="center"
                                            key="center">居中</Option>
                                        <Option value="right"
                                            key="right">靠右</Option>
                                    </Select>
                                    </Col>
                                    <Col span="8">HTML报表定时刷新(s)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.htmlIntervalRefreshValue"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="4">套打背景图</Col>
                                    <Col span="20">
                                    <Input v-model="paper.bgImage"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="页脚页眉">
                        <Form>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="2">页眉</Col>
                                    <Col span="6">
                                    <a href="javascript:void(0)">字体样式设置</a>
                                    </Col>
                                    <Col span="6">页眉顶端距离(mm)</Col>
                                    <Col span="4">
                                    <Input></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="1">左</Col>
                                    <Col span="7">
                                    <Input type="textarea"></Input>
                                    </Col>
                                    <Col span="1">中</Col>
                                    <Col span="7">
                                    <Input type="textarea"></Input>
                                    </Col>
                                    <Col span="1">右</Col>
                                    <Col span="7">
                                    <Input type="textarea"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="2">页脚</Col>
                                    <Col span="6">
                                    <a href="javascript:void(0)">字体样式设置</a>
                                    </Col>
                                    <Col span="6">页脚底端距离(mm)</Col>
                                    <Col span="4">
                                    <Input></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="1">左</Col>
                                    <Col span="7">
                                    <Input type="textarea"></Input>
                                    </Col>
                                    <Col span="1">中</Col>
                                    <Col span="7">
                                    <Input type="textarea"></Input>
                                    </Col>
                                    <Col span="1">右</Col>
                                    <Col span="7">
                                    <Input type="textarea"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="分页配置">
                        <Form>
                            <FormItem>
                                <Row :gutter="6">
                                  <Col span="4">是否分页</Col>
                                  <Col span="8">
                                    <i-switch size="small" v-model="paper.isPaper" :true-value="1" :false-value="0"/>
                                  </Col>
                                </Row>
                                <Row :gutter="6">
                                    <Col span="4">分页方式</Col>
                                    <Col span="8">
                                    <RadioGroup size="small"
                                        v-model="paper.pagingMode">
                                        <Radio label="fitpage">自动</Radio>
                                        <Radio label="fixrows">固定行数</Radio>
                                    </RadioGroup>
                                    </Col>
                                    <Col span="4">每页行数</Col>
                                    <Col span="4">
                                    <Input v-model="paper.fixRows"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="分栏配置">
                        <Form>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="2">分栏</Col>
                                    <Col span="12">
                                    <RadioGroup size="small">
                                        <Radio label="False">禁用</Radio>
                                        <Radio label="True">启用</Radio>
                                    </RadioGroup>
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="2">栏数</Col>
                                    <Col span="4">
                                    <Select v-model="paper.columnCount">
                                        <Option value="2"
                                            key="2">2栏</Option>
                                        <Option value="3"
                                            key="3">3栏</Option>
                                        <Option value="4"
                                            key="4">4栏</Option>
                                        <Option value="5"
                                            key="5">5栏</Option>
                                        <Option value="6"
                                            key="6">6栏</Option>
                                        <Option value="7"
                                            key="7">7栏</Option>
                                        <Option value="8"
                                            key="8">8栏</Option>
                                    </Select>
                                    </Col>
                                    <Col span="4">栏间距(mm)</Col>
                                    <Col span="4">
                                    <Input v-model="paper.columnMargin"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="导出设置">
                        <Form>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="4">导出文件名</Col>
                                    <Col span="20">
                                    <Input v-model="paper.exportFileName"></Input>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="计算设置">
                        <Form>
                            <FormItem>
                                <Row :gutter="6">
                                    <Col span="5">强制按行计算</Col>
                                    <Col span="19">
                                    <i-switch  v-model="paper.calcAsTable"></i-switch >
                                    </Col>
                                </Row>
                            </FormItem>
                          <FormItem>
                            <Row :gutter="6">
                              <Col span="5">强制使用内部数据库</Col>
                              <Col span="19">
                                <i-switch  v-model="paper.useInnerDb" :true-value="1" :false-value="0"></i-switch >
                              </Col>
                            </Row>
                          </FormItem>
                        </Form>
                    </TabPane>
                </Tabs>
            </Form>
        </Modal>
    </i>
</template>
<script>
import { mapState } from 'vuex';
import { buildPageSizeList } from '../../utils/Utils';

export default {
    name: 'SetOptionsAction',
    data() {
        return {
            paper: {},
            isShowReportOptionsDialog: false
        };
    },
    computed: {
        ...mapState(['context'])
    },
    methods: {
        setUpOptions() {
            this.paper = this.context.reportDef.paper || {};
            this.isShowReportOptionsDialog = true;
        },
        changePaperType() {
            if (this.paper.paperType != 'CUSTOM') {
                let pageSize = this.pageSizeList[this.paper.paperType];

                this.paper.width = pageSize.width;
                this.paper.height = pageSize.height;
            }
        },
        saveConfig() {
            this.context.reportDef.paper = this.paper;
            console.log(this.context.reportDef.paper, this.paper, 'this.paper')
        }
    },
    mounted() {
        this.pageSizeList = buildPageSizeList();
    }
};
</script>
<style scoped>
.iui-toolbar-icon-options {
    width: 100%;
    height: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../../../assets/icons/options.png);
}
</style>
