<template>
    <div>
        <Row>
            <Col span="8">
                <Form
                    label-position="right"
                    ref="formData"
                    :model="formData"
                    :label-width="100"
                    :rules="ruleValidate"
                >
                    <FormItem label="查询项">
                        <Select
                            size="small"
                            v-model="formData.columnId"
                            @on-change="formData.fastQueryType=null;formData.value=null;"
                        >
                            <Option
                                v-for="(item,index) in queryContent"
                                :value="item.key"
                                :key="index"
                            >{{item.title}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="查询类型">
                        <Select
                            v-model="formData.fastQueryType"
                            @on-change="formData.value=null;"
                            size="small"
                        >
                            <Option
                                v-for="(value,index) in queryTypes"
                                :value="value"
                                :key="index"
                            >{{queryTypeTranslate[value]}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="查询值" v-if="currentColumn">
                        <Select
                            v-model="formData.value"
                            v-if="currentColumn.dict"
                            :multiple="formData.fastQueryType === 'in' "
                            size="small"
                        >
                            <Option
                                v-for="(item,key) in dicts[currentColumn.dict]"
                                :value="key"
                                :key="key"
                            >{{item}}</Option>
                        </Select>
                        <Select
                            v-model="formData.value"
                            v-else-if="currentColumn.type === 'boolean'"
                            size="small"
                        >
                            <Option :value="'1'">是</Option>
                            <Option :value="'1'">否</Option>
                        </Select>
                        <Date-picker
                            v-model="formData.value"
                            type="datetime"
                            :format="currentColumn.format?currentColumn.format:'yyyy-MM-dd 00:00:00'"
                            placeholder="选择日期和时间"
                            v-else-if="currentColumn.type === 'date'"
                            size="small"
                        ></Date-picker>
                        <Input
                            v-model="formData.value"
                            placeholder="请输入查询值"
                            v-else-if="currentColumn.type==='string'"
                            size="small"
                        ></Input>
                    </FormItem>
                </Form>
                <Button type="primary" icon="md-add" @click="add">添加</Button>
            </Col>
            <Col span="14" offset="1">
                <table class="query-list">
                    <thead>
                        <tr>
                            <th>查询项</th>
                            <th>查询类型</th>
                            <th>查询值</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="query" v-for="(item,index) in queryList" :key="index">
                            <td>{{item.title}}</td>
                            <td>{{ queryTypeTranslate[item.fastQueryType]}}</td>
                            <td>{{item.value}}</td>
                            <td>
                                <Icon type="md-close" @click="remove(index)" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <Button type="warning" icon="md-trash" @click="queryList = []">清空</Button>
                <Button type="primary" icon="md-search" @click="submit">查询</Button>
            </Col>
        </Row>
    </div>
</template>
<script>
import { createColumnListWithTemplate } from "./../../hongqi-table/src/columnsFormat";
import { tools } from 'hq-tools';
const queryType = {
    'string': ['eq', 'lk'],
    'dict': ['eq', 'in'],
    'number': ['eq', 'lt', 'le', 'gt', 'ge'],
    'boolean': ['eq'],
    'date': ['eq', 'lt', 'le', 'gt', 'ge'],
}
const queryTypeTranslate = {
    'eq': '等于',
    'ne': '不等于',
    'lk': '包含',
    'rl': '右包含',
    'll': '左包含',
    'gt': '大于',
    'ge': '大于等于',
    'lt': '小于',
    'le': '小于等于',
    'in': '包含于',
    'sn': '空值',
    'su': '非空'
}
const notEmpty = {
    required: true,
    whitespace: true,
    message: '不能为空',
    trigger: 'blur'
};
const dataTypeTranslate = {
    'boolean': 'string',
    'dict': 'string',
    'string': 'string',
    'number': 'number',
    'date': 'date',
}
export default {
    name: 'EditableSearch',
    props: {
        type: {
            required: true,
            type: 'fastquery' | 'custom ',
            default: () => {
                return 'fastquery';
            }
        },
        type: {
            type: 'fastquery' | 'custom ',
            default: () => {
                return 'fastquery';
            }
        },
        dicts: {
            type: Object,
            default: () => {
                return {};
            }
        },
        columns: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            queryList: [],
            queryTypeTranslate,
            formData: {
                columnId: null,
                fastQueryType: null,
                value: null,
                dataType: null
            },
            ruleValidate: {
                columnId: [notEmpty],
                fastQueryType: [notEmpty],
                value: [notEmpty],
                dataType: [notEmpty]
            }
        }
    },
    watch: {

    },
    computed: {
        queryContent() {
            return createColumnListWithTemplate(this.columns).filter(column => column.fastqueryType)
        },
        queryTypes() {
            if (this.formData.columnId && this.currentColumn.type) {
                if (this.currentColumn.dict) {
                    return queryType['dict'];
                } else {
                    return queryType[this.currentColumn.type];
                }
            } else {
                return {}
            }
        },
        currentColumn() {
            if (this.formData.columnId) {
                let currentColumn = null;
                for (let column of this.queryContent) {
                    if (column.key === this.formData.columnId) {
                        currentColumn = column;
                        break;
                    }
                }
                return currentColumn
            } else {
                return null;
            }
        }
    },
    methods: {
        add() {
            if (!this.formData.columnId) {
                return this.$Message.warning('请填写查询项');
            }
            if (!this.formData.fastQueryType) {
                return this.$Message.warning('请填写查询类型');
            }
            if (!this.formData.value) {
                return this.$Message.warning('请填写查询值');
            }
            let clone = tools.clone(this.formData);
            clone.title = this.currentColumn.title;
            clone.dataType = dataTypeTranslate[this.currentColumn.type];
            if (this.currentColumn.type === 'date') {
                clone.value = tools.dateFormat(clone.value, 'yyyy-MM-dd HH:mm:ss')
            }

            this.queryList.push(clone)
            this.$emit('on-change', this.formData);
        },
        remove(index) {
            this.queryList.splice(index, 1)
        },
        submit() {
            this.$emit('on-search', tools.clone(this.queryList).map(item => {
                if (item.fastQueryType === 'lk') {
                    item.value = `%${item.value}%`
                }
                return item;
            }))
        }
    }
}
</script>

<style lang="less" scoped>
.query-list {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    margin-bottom: 4px;
    td,
    th {
        border: 1px solid #ddd;
        padding: 4px 8px;
        font-size: 14px;
    }
}
</style>