<template>
    <div class="ht-base-table-editable-line-demo">
        <ht-base-table :columns="columns" :data="data">
            <template v-for="col in ['name', 'age', 'address']" slot-scope="{ row,column,index }" :slot="col">
                <div :key="col">
                    <ht-base-input v-if="row.editable" style="margin: -5px 0" :value="row[column.slot]" @on-change="handleChange(row,column,index,$event)"/>
                    <template v-else>{{row[column.slot]}}</template>
                </div>
            </template>

            <template slot="action" slot-scope="{row, column, index}">
                <div class='demo-editable-row-operations'>
                    <span v-if="row.editable">
                      <a @click="handleSave(row)">保存</a>
                      <ht-base-poptip style="text-align:left;" confirm title="确定取消编辑？" @on-ok="ok(row)">
                          <span style="color:#2d8cf0; cursor:pointer; margin:0 10px;">取消</span>
                      </ht-base-poptip>
                    </span>
                    <span v-else @click="handleEdit(row)" style="color:#2d8cf0; cursor:pointer;">编辑</span>
                </div>
            </template>
        </ht-base-table>
    </div>
</template>

<script type="text/jsx">

    const columns = [
        {
            title: '姓名',
            slot: 'name',
            align: 'center',
        },
        {
            title: '年龄',
            slot: 'age',
            align: 'center',
        },
        {
            title: '地址',
            slot: 'address',
            align: 'center',
        },
        {
            title: '操作',
            slot: 'action',
            align: 'center',
        },
    ]
    const data = [];
    for (let i = 0; i < 10; i++) {
        data.push({
            key: i.toString(),
            name: `Edrward ${i}`,
            age: 32,
            address: `London Park no. ${i}`,
            editable: false
        })
    }

    export default {
        name: 'HtBaseTableEditableLineDemo',
        data() {
            this.cacheData = data.map(item => ({...item}))
            return {
                columns,
                data,
            }
        },
        methods: {
            handleChange(row, column, index, $event) {
                const newData = [...this.data]
                const target = newData.filter(item => row.key === item.key)[0]
                if (target) {
                    target[column.slot] = $event.target.value
                    this.data = newData
                }
            },
            handleEdit(row) {
                const newData = [...this.data]
                const target = newData.filter(item => row.key === item.key)[0]
                if (target) {
                    target.editable = true
                    this.data = newData
                }
            },
            handleSave(row) {
                const newData = [...this.data]
                const target = newData.filter(item => row.key === item.key)[0]
                if (target) {
                    delete target.editable
                    this.data = newData
                    this.cacheData = newData.map(item => ({...item}))
                }
            },
            ok(row) {
                const newData = [...this.data]
                const target = newData.filter(item => row.key === item.key)[0]
                if (target) {
                    Object.assign(target, this.cacheData.filter(item => row.key === item.key)[0])
                    delete target.editable
                    this.data = newData
                }
            }
        }
    }
</script>
<style lang="less">
    .ht-base-table-editable-line-demo {
        .ht-base-table {
            overflow: visible;
            .ht-base-input {
                margin: 0 !important;
            }
        }
        .demo-editable-row-operations a {
            margin-right: 8px;
        }
    }
</style>

