<template>
    <div>
        <Button @click="editCondition">配置条件</Button>
        <Modal title="条件属性配置" width="800" v-model="showCoditionDialog" @on-ok="save">
            <Row>
                <Col span="6">
                    <span>条件项配置</span>
                    <div>
                        <a href="#" @click="showAddCatagory">添加</a>
                    </div>
                    <div
                        v-for="(item, index) in conditionPropertyItems"
                        class="item-catagory"
                        :class="getActiveClass(index)"
                        @click="selectCatagory(index)"
                    >
                        <span>{{item.name}}</span>
                        <a class="iui-catagory-tool-delete" @click="delCatagory(index)" title="删除"></a>
                        <a class="iui-catagory-tool-edit" @click="editCatagory(index)" title="编辑"></a>
                    </div>
                </Col>
                <Col span="6">
                    <span>条件配置</span>
                    <div>
                        <a href="#" @click="showAddConditionItem" :disabled="locked">添加</a>
                    </div>
                    <div
                        v-for="(item, index) in currConditions"
                        class="item-catagory"
                        :key="index"
                        :class="getActiveClass(index)"
                    >
                        <span>{{item.type}}</span>
                        <a
                            class="iui-catagory-tool-delete"
                            @click="delConditionItem(index)"
                            title="删除"
                        ></a>
                        <a
                            class="iui-catagory-tool-edit"
                            @click="editConditionItem(index)"
                            title="编辑"
                        ></a>
                    </div>
                </Col>
                <Col span="12">
                    <Tabs name="dcTab">
                        <TabPane label="样式配置" tab="dcTab">
                            <Form>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.showForecolor"
                                                :disabled="locked"
                                            >
                                                <span>前景色</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCellStyle.showForecolor">
                                            <ColorPicker
                                                v-model="currCellStyle.forecolor"
                                                placement="bottom-start"
                                                recommend
                                            ></ColorPicker>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.showForecolor">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.showForecolor">
                                            <Select v-model="currCellStyle.forecolorScope">
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.showBgcolor"
                                                :disabled="locked"
                                            >
                                                <span>背景色</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCellStyle.showBgcolor">
                                            <ColorPicker
                                                v-model="currCellStyle.bgcolor"
                                                placement="bottom-start"
                                                recommend
                                            ></ColorPicker>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.showBgcolor">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.showBgcolor">
                                            <Select v-model="currCellStyle.bgcolorScope">
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.showFontFamily"
                                                :disabled="locked"
                                            >
                                                <span>字体</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCellStyle.showFontFamily">
                                            <Select
                                                v-model="currCellStyle.fontFamily"
                                                :clearable="true"
                                            >
                                                <Option
                                                    v-for="item in fontFamilies"
                                                    :value="item"
                                                    :key="item"
                                                >{{item}}</Option>
                                            </Select>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.showFontFamily">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.showFontFamily">
                                            <Select v-model="currCellStyle.fontFamilyScope">
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.showFontSize"
                                                :disabled="locked"
                                            >
                                                <span>文字尺寸</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCellStyle.showFontSize">
                                            <Select v-model="currCellStyle.fontSize">
                                                <Option v-for="i in 100" :value="i" :key="i">{{i}}</Option>
                                            </Select>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.showFontSize">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.showFontSize">
                                            <Select
                                                v-model="currCellStyle.fontSizeScope"
                                                :clearable="true"
                                            >
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.bold"
                                                :disabled="locked"
                                            >
                                                <span>文字加粗</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.bold">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.bold">
                                            <Select v-model="currCellStyle.boldScope">
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.italic"
                                                :disabled="locked"
                                            >
                                                <span>文字倾斜</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.italic">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.italic">
                                            <Select v-model="currCellStyle.italicScope">
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.underline"
                                                :disabled="locked"
                                            >
                                                <span>文字下划线</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.underline">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.underline">
                                            <Select v-model="currCellStyle.underlineScope">
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.showAlign"
                                                :disabled="locked"
                                            >
                                                <span>水平对齐</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCellStyle.showAlign">
                                            <Select
                                                v-model="currCellStyle.align"
                                                placement="top"
                                                :clearable="true"
                                            >
                                                <Option value="left" key="left">靠左</Option>
                                                <Option value="center" key="center">居中</Option>
                                                <Option value="right" key="right">靠右</Option>
                                            </Select>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.showAlign">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.showAlign">
                                            <Select
                                                v-model="currCellStyle.alignScope"
                                                placement="top"
                                            >
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCellStyle.showValign"
                                                :disabled="locked"
                                            >
                                                <span>垂直对齐</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCellStyle.showValign">
                                            <Select
                                                v-model="currCellStyle.valign"
                                                placement="top"
                                                :clearable="true"
                                            >
                                                <Option value="top" key="top">顶部对齐</Option>
                                                <Option value="middle" key="middle">中部对齐</Option>
                                                <Option value="bottom" key="bottom">底部对齐</Option>
                                            </Select>
                                        </Col>
                                        <Col span="4" v-show="currCellStyle.showValign">
                                            <span>作用范围</span>
                                        </Col>
                                        <Col span="8" v-show="currCellStyle.showValign">
                                            <Select
                                                v-model="currCellStyle.valignScope"
                                                placement="top"
                                            >
                                                <Option value="cell" key="cell">当前单元格</Option>
                                                <Option value="row" key="row">当前行</Option>
                                                <Option value="column" key="column">当前列</Option>
                                            </Select>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <!--                                 <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox>
                                                <span>边框</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6">
                                            <Button size="small">边框配置</Button>
                                        </Col>
                                    </Row>
                                </FormItem>-->
                            </Form>
                        </TabPane>
                        <TabPane label="其它配置" tab="dcTab">
                            <Form :model="currCatagory">
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCatagory.showNewValue"
                                                :disabled="locked"
                                            >
                                                <span>新值</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCatagory.showNewValue">
                                            <Input v-model="currCatagory.newValue"></Input>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCatagory.showFormat"
                                                :disabled="locked"
                                            >
                                                <span>格式化</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCatagory.showFormat">
                                            <Input v-model="currCatagory.format"></Input>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCatagory.showRowHeight"
                                                :disabled="locked"
                                            >
                                                <span>行高</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCatagory.showRowHeight">
                                            <Input v-model="currCatagory.rowHeight"></Input>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCatagory.showColWidth"
                                                :disabled="locked"
                                            >
                                                <span>列宽</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCatagory.showColWidth">
                                            <Input v-model="currCatagory.colWidth"></Input>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCatagory.paging"
                                                :disabled="locked"
                                            >
                                                <span>分页</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="6" v-show="currCatagory.paging">
                                            <Select v-model="currCatagory.position">
                                                <Option value="before">当前行前</Option>
                                                <Option value="after">当前行后</Option>
                                            </Select>
                                            <Input :value="0" style="display:none"></Input>
                                        </Col>
                                        <Col span="6" v-show="currCatagory.paging"></Col>
                                    </Row>
                                </FormItem>
                                <FormItem>
                                    <Row>
                                        <Col span="6">
                                            <Checkbox
                                                v-model="currCatagory.showLinkUrl"
                                                :disabled="locked"
                                            >
                                                <span>链接</span>
                                            </Checkbox>
                                        </Col>
                                        <Col span="12" v-show="currCatagory.showLinkUrl">
                                            <Input v-model="currCatagory.linkUrl"></Input>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem v-show="currCatagory.showLinkUrl">
                                    <Row>
                                        <Col span="6">
                                            <i>&nbsp</i>
                                        </Col>
                                        <Col span="6">
                                            <Select v-model="currCatagory.linkTargetWindow">
                                                <Option value="_blank" key="_blank">新窗口</Option>
                                                <Option value="_self" key="_self">当前窗口</Option>
                                            </Select>
                                        </Col>
                                        <Col span="6" v-show="!!currCatagory.linkUrl">
                                            <Button>参数配置</Button>
                                        </Col>
                                    </Row>
                                </FormItem>
                            </Form>
                        </TabPane>
                    </Tabs>
                </Col>
            </Row>
        </Modal>
        <Modal title="条件项" v-model="showCoditionCatagoryDialog">
            <Form ref="currCatagory" :label-width="80" :model="currCatagory" :rules="ruleCatagory">
                <FormItem label="名称" prop="name">
                    <Input v-model="currCatagory.name"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancelCatagory" type="text">取消</Button>
                <Button @click="saveCatagory" type="primary">确定</Button>
            </div>
        </Modal>
        <Modal title="条件配置" v-model="showConditionItemDialog">
            <Form ref="currConditionItem" :label-width="100" :model="currConditionItem">
                <FormItem label="与上一条件关系">
                    <Select v-model="currConditionItem.join">
                        <Option value="and" key="and">与</Option>
                        <Option value="or" key="or">或</Option>
                    </Select>
                </FormItem>
                <FormItem label="条件左值">
                    <Row>
                        <Col span="6">
                            <Select v-model="currConditionItem.type">
                                <Option value="current" key="current">当前值</Option>
                                <Option value="property" key="property">属性</Option>
                                <Option value="expression" key="expression">表达式</Option>
                            </Select>
                        </Col>
                        <Col span="6">
                            <span v-show="currConditionItem.type == 'property'">属性名</span>
                            <span v-show="currConditionItem.type == 'expression'">表达式</span>
                        </Col>
                        <Col span="12">
                            <Select
                                v-show="currConditionItem.type == 'property'"
                                v-model="currConditionItem.left"
                            ></Select>
                            <Input
                                v-show="currConditionItem.type == 'expression'"
                                v-model="currConditionItem.left"
                            ></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="操作符">
                    <Select v-model="currConditionItem.operation">
                        <Option value=">" key=">">大于</Option>
                        <Option value=">=" key=">=">大于等于</Option>
                        <Option value="<" key="<">小于</Option>
                        <Option value="<=" key="<=">小于等于</Option>
                        <Option value="==" key="==">等于</Option>
                        <Option value="!=" key="!=">不等于</Option>
                        <Option value="in" key="in">在集合中</Option>
                        <Option value="like" key="like">相似</Option>
                    </Select>
                </FormItem>
                <FormItem label="表达式">
                    <Input v-model="currConditionItem.right"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancelConditionItemDialog" type="text">取消</Button>
                <Button @click="saveConditionItem" type="primary">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import Vue from 'vue'
export default {
    name: 'DatasetConditionEditor',
    data() {
        return {
            conditionPropertyItems: [],
            showCoditionCatagoryDialog: false,
            currCatagory: {},
            currCatagoryIndex: -1,
            currCellStyle: {
                bgcolor: '#ffffff',
                forecolor: '#000000',
            },
            ruleCatagory: {
                name: [
                    {
                        required: true,
                        message: '名称不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            showCoditionDialog: false,
            fontFamilies: [
                '宋体',
                '仿宋',
                '黑体',
                '楷体',
                '微软雅黑',
                'Arial',
                'Impact',
                'Times New Roman',
                'Comic Sans MS',
                'Courier New',
            ],

            showConditionItemDialog: false,
            currConditions: [],
            currConditionItem: {},
            currConditionIndex: null,
        }
    },
    props: {
        cellDef: {
            type: Object,
        },
    },
    computed: {
        ...mapState(['context', 'tenantId']),
        ...mapGetters(['getDatasets']),
        locked() {
            return this.currCatagoryIndex == -1
        },
    },
    methods: {
        editCondition() {
            this.conditionPropertyItems = JSON.parse(
                JSON.stringify(this.cellDef.conditionPropertyItems || [])
            )
            this.currCellStyle = {
                bgcolor: '#ffffff',
                forecolor: '#000000',
            }
            this.currConditions = []
            this.currCatagoryIndex = -1
            this.showCoditionDialog = true
        },

        showAddCatagory() {
            this.currCatagoryIndex = -1
            this.currCatagory = {
                cellStyle: {
                    bgcolor: '#ffffff',
                    forecolor: '#000000',
                },
                conditions: [],
            }
            this.currCellStyle = this.currCatagory.cellStyle
            this.currConditions = this.currCatagory.conditions
            this.showCoditionCatagoryDialog = true
        },

        getActiveClass(index) {
            return {
                'item-catagory-active': this.currCatagoryIndex == index,
            }
        },

        selectCatagory(index) {
            this.currCatagoryIndex = index

            this.currCatagory = this.conditionPropertyItems[index]
            this.setCatagoryValues(this.currCatagory)

            this.currCellStyle = this.currCatagory.cellStyle
            this.setCellStyleValues(this.currCellStyle)

            this.currConditions = this.currCatagory.conditions
        },

        setCatagoryValues(catagory) {
            Vue.set(catagory, 'showNewValue', !!catagory.newValue)
            Vue.set(catagory, 'showFormat', !!catagory.format)
            Vue.set(catagory, 'showRowHeight', !!catagory.rowHeight)
            Vue.set(catagory, 'showColWidth', !!catagory.colWidth)
            Vue.set(catagory, 'showLinkUrl', !!catagory.linkUrl)
            Vue.set(catagory, 'paging', !!catagory.paging)
        },

        setCellStyleValues(styles) {
            Vue.set(styles, 'showForecolor', !!styles.forecolor)
            Vue.set(styles, 'showBgcolor', !!styles.bgcolor)
            Vue.set(styles, 'showFontFamily', !!styles.fontFamily)
            Vue.set(styles, 'showFontSize', !!styles.fontSize)
            Vue.set(styles, 'showAlign', !!styles.align)
            Vue.set(styles, 'showValign', !!styles.valign)
            Vue.set(styles, 'bold', !!styles.bold)
            Vue.set(styles, 'italic', !!styles.italic)
            Vue.set(styles, 'underline', !!styles.underline)
        },
        editCatagory(index) {
            this.selectCatagory(index)
            this.showCoditionCatagoryDialog = true
        },

        delCatagory(index) {
            this.$nextTick(() => {
                this.conditionPropertyItems.splice(index, 1)
                this.currCatagoryIndex = -1
            })
        },

        cancelCatagory() {
            this.showCoditionCatagoryDialog = false
        },

        saveCatagory() {
            this.$refs['currCatagory'].validate((valid) => {
                if (valid) {
                    if (this.currCatagoryIndex == -1) {
                        this.conditionPropertyItems.push(this.currCatagory)
                        this.currCatagoryIndex =
                            this.conditionPropertyItems.length - 1
                    }

                    this.showCoditionCatagoryDialog = false
                }
            })
        },

        showAddConditionItem() {
            this.currConditionItem = {}
            this.currConditionIndex = -1
            this.showConditionItemDialog = true
        },

        editConditionItem(index) {
            this.currConditionItem = this.currConditions[index]
            this.currConditionIndex = index
            this.showConditionItemDialog = true
        },

        delConditionItem(index) {
            this.$nextTick(() => {
                this.currConditions.splice(index, 1)
                this.showConditionItemDialog = false
            })
        },

        cancelConditionItemDialog() {
            this.showConditionItemDialog = false
        },

        saveConditionItem() {
            if (this.currConditionIndex == -1) {
                this.currConditions.push(this.currConditionItem)
            }
            this.showConditionItemDialog = false
        },
        save() {
            this.cellDef.conditionPropertyItems = this.conditionPropertyItems
        },
    },
    mounted() {},
}
</script>
<style>
.ivu-color-picker-picker {
    line-height: 12px !important;
}

.item-catagory {
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}

.item-catagory-active,
.item-catagory:hover {
    background-color: #f8f8f9;
}

.item-catagory:hover .iui-catagory-tool-edit,
.item-catagory:hover .iui-catagory-tool-delete {
    display: inline-block;
}

.iui-catagory-tool-edit {
    float: right;
    height: 24px;
    width: 24px;
    display: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../../../assets/icons/edit_16.png);
}

.iui-catagory-tool-delete {
    float: right;
    height: 24px;
    width: 24px;
    display: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../../../assets/icons/delete_16.png);
}
</style>