<template>
    <div class="ht-base-table-filters-search-demo">
        <ht-base-table class="demo-base-table-filter-search"
                       searchFilter="true"
                       border
                       :columns="columns1"
                       :data="data2">
            <template slot-scope="{ row }" slot="href">
                <a :href="row.url" target="_black" style="cursor:pointer;">{{row.name}}</a>
            </template>
            <template slot-scope="{ row }" slot="number">
                <div style="cursor:pointer;">{{row.number.toLocaleString()}}</div>
            </template>
            <template slot-scope="{ row }" slot="money">
                <template v-if="row.money < 0">
                    <icon style="color:#F85555;" type="logo-yen"/>
                    <div style="cursor:pointer;color:#F85555;display:inline-block;">{{row.money.toLocaleString()}}</div>
                </template>
                <template v-else>
                    <icon style="color:#3BAB78;" type="logo-yen"/>
                    <div style="cursor:pointer;color:#3BAB78;display:inline-block;">{{row.money.toLocaleString()}}</div>
                </template>
            </template>
        </ht-base-table>
    </div>
</template>

<script type="text/jsx">
    import Poptip from "view-design/src/components/poptip";

    export default {
        name: 'HtBaseTableFiltersSearchDemo',
        components: {
            Poptip
        },
        data() {
            return {
                visible: false,
                searchData: '',
                columns1: [
                    {
                        title: '序号',
                        align: 'center',
                        type: 'index',
                        width: '100'
                    },
                    {
                        title: '链接',
                        slot: 'href',
                        align: 'center'
                    },
                    {
                        title: '列名',
                        key: 'name',
                        renderHeader: (h, params) => {
                            return (
                                <div>
                                    <span style="margin:0 5px;">列名</span>
                                    <Poptip v-model={this.visible} placement="bottom-end" class="demo-poptip">
                                        <ht-base-icon class="demo-search-icon" type='LiRa_search'></ht-base-icon>
                                        <div class="demo-poptip-title" slot="title">
                                            <ht-base-input value={this.searchData} onOn-change={this.modelHandler.bind(this)}/>
                                        </div>
                                        <div class="demo-poptip-body-content" slot="content">
                                            <ht-base-button type="primary" nativeOnClick={this.handleSearch.bind(this, params.column.key)}>搜索</ht-base-button>
                                            <ht-base-button type="primary" nativeOnClick={this.handleReset.bind(this)}>重置</ht-base-button>
                                        </div>
                                    </Poptip>
                                </div>
                            )
                        }
                    },
                    {
                        title: '数字',
                        slot: 'number',
                        align: 'right',
                        filters: [
                            {
                                label: '0-40',
                                value: 1
                            },
                            {
                                label: '41-80',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value === 1) {
                                return row.number <= 40;
                            } else if (value === 2) {
                                return row.number >= 41;
                            }
                        }
                    },
                    {
                        title: '金额',
                        slot: 'money',
                        align: 'right'
                    },
                    {
                        title: '时间',
                        key: 'date',
                        align: 'center',
                    },
                ],
                data1: [
                    {
                        href: 'Button',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 8,
                        money: 123456789,
                        date: '2016-10-03'
                    },
                    {
                        href: 'Poptip',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '2列表值',
                        number: 40,
                        money: -123456789,
                        date: '2016-10-01'
                    },
                    {
                        href: 'Menu',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '3列表值',
                        number: 41,
                        money: 123456789,
                        date: '2016-10-02'
                    },
                    {
                        href: 'Page',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 77,
                        money: -123456789,
                        date: '2016-10-04'
                    }
                ],
                data2: []
            }
        },
        methods: {
            modelHandler(e) {
                this.searchData = e.target.value
            },
            handleSearch(key) {
                this.data2 = [...this.data1];
                this.data2 = this.search(this.data2, {[key]: this.searchData});
            },
            search(data, argumentObj) {
                let res = data;
                let dataClone = data;
                for (let item in argumentObj) {
                    if (argumentObj[item].length > 0) {
                        res = dataClone.filter(d => {
                            return d[item].indexOf(argumentObj[item]) > -1;
                        });
                        dataClone = res;
                    }
                }
                return res;
            },
            handleReset() {
                this.$set(this, 'searchData', '')
                this.data2 = [...this.data1]
            }
        },
        created() {
            this.data2 = [...this.data1]
        }
    }
</script>
<style lang="less">
    .ht-base-table-filters-search-demo {
        .demo-base-table-filter-search {
            overflow: visible;
            .demo-search-icon {
                color: #c5c8ce;
                transition: color .2s ease-in-out;
                cursor: pointer;
                line-height: 1px;
            }
            .demo-search-icon:hover {
                color: inherit;
            }
            .demo-poptip {
                .demo-poptip-title:after {
                    display: none;
                    border:none;
                }
                .demo-poptip-body-content {
                    text-align: center;
                    .ht-base-button {
                        margin: 0 10px;
                    }
                }
            }
        }
    }
</style>
