<template>
    <div class="ht-base-table-multicolor-demo">
        <p>自定义行样式：</p>
        <ht-base-table :row-class-name="rowClassName" :columns="columns1" :data="data1">
            <template slot-scope="{ row }" slot="href">
                <a :href="row.url" target="_black" style="cursor:pointer;color:#595959;">{{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">
                <div>¥{{row.money.toLocaleString()}}</div>
            </template>
        </ht-base-table>
        <p>自定义列样式：</p>
        <ht-base-table :columns="columns2" :data="data2">
            <template slot-scope="{ row }" slot="href">
                <a :href="row.url" target="_black" style="cursor:pointer;color:#595959;">{{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">
                <div>¥{{row.money.toLocaleString()}}</div>
            </template>
        </ht-base-table>
        <p>自定义任意单元格样式：</p>
        <ht-base-table :columns="columns3" :data="data3">
            <template slot-scope="{ row }" slot="href">
                <a :href="row.url" target="_black" style="cursor:pointer;color:#595959;">{{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">
                <div>¥{{row.money.toLocaleString()}}</div>
            </template>
        </ht-base-table>
    </div>
</template>

<script type="text/jsx">
    export default {
        name: 'HtBaseTableMulticolorDemo',
        data() {
            return {
                columns1: [
                    {
                        title: '链接',
                        slot: 'href'
                    },
                    {
                        title: '列名',
                        key: 'name',
                    },
                    {
                        title: '数字',
                        slot: 'number',
                        align: 'right'
                    },
                    {
                        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: 1234567890,
                        money: 123456789,
                        date: '2016-10-03'
                    },
                    {
                        href: 'Poptip',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-01'
                    },
                    {
                        href: 'Menu',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: 123456789,
                        date: '2016-10-02'
                    },
                    {
                        href: 'Page',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-04'
                    }
                ],
                columns2: [
                    {
                        title: '链接',
                        slot: 'href'
                    },
                    {
                        title: '列名',
                        key: 'name',
                    },
                    {
                        title: '数字',
                        slot: 'number',
                        align: 'right',
                        className: 'demo-table-info-column'
                    },
                    {
                        title: '金额',
                        slot: 'money',
                        align: 'right'
                    },
                    {
                        title: '时间',
                        key: 'date',
                        align: 'center',
                    },
                ],
                data2: [
                    {
                        href: 'Button',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: 123456789,
                        date: '2016-10-03'
                    },
                    {
                        href: 'Poptip',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-01'
                    },
                    {
                        href: 'Menu',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: 123456789,
                        date: '2016-10-02'
                    },
                    {
                        href: 'Page',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-04'
                    }
                ],
                columns3: [
                    {
                        title: '链接',
                        slot: 'href'
                    },
                    {
                        title: '列名',
                        key: 'name',
                    },
                    {
                        title: '数字',
                        slot: 'number',
                        align: 'right'
                    },
                    {
                        title: '金额',
                        slot: 'money',
                        align: 'right'
                    },
                    {
                        title: '时间',
                        key: 'date',
                        align: 'center',
                    },
                ],
                data3: [
                    {
                        href: 'Button',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: 123456789,
                        date: '2016-10-03'
                    },
                    {
                        href: 'Poptip',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-01',
                        cellClassName: {
                            name: 'demo-table-info-cell-age',
                            date: 'demo-table-info-cell-address'
                        }
                    },
                    {
                        href: 'Menu',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: 123456789,
                        date: '2016-10-02'
                    },
                    {
                        href: 'Page',
                        url: 'http://39.106.250.14:8082/base-components/#/component/base-button-demo',
                        name: '列表值',
                        number: 1234567890,
                        money: -123456789,
                        date: '2016-10-04',
                        cellClassName: {
                            name: 'demo-table-info-cell-name'
                        }
                    }
                ],
            }
        },
        methods: {
            rowClassName(row, index) {
                if (index === 1) {
                    return 'demo-table-info-row';
                } else if (index === 3) {
                    return 'demo-table-error-row';
                }
                return '';
            }
        }
    }
</script>
<style lang="less">
    .ht-base-table-multicolor-demo {
        .ht-base-table {
            .demo-table-info-row td {
                background-color: #228ef8;
                color: #fff;

                a {
                    color: #fff!important;
                }
            }

            .demo-table-error-row td {
                background-color: #ff9900;
                color: #fff;

                a {
                    color: #fff!important;
                }
            }

            td.demo-table-info-column {
                background-color: #228ef8;
                color: #fff;
            }

            .demo-table-info-cell-name {
                background-color: #228ef8;
                color: #fff;
            }

            .demo-table-info-cell-age {
                background-color: #ff9900;
                color: #fff;
            }

            .demo-table-info-cell-address {
                background-color: #187;
                color: #fff;
            }
        }
    }
</style>

