<template>
    <Modal 
        class="in-store" 
        width="700" 
        v-model="showModal"
        @on-cancel="modalCancel"
        title="添加到入库单">
        <div class="in-store-content">
            <p class="notice">* 请选择要添加的入库单</p>
            <Table 
                ref="table" 
                v-if="loadingOk" 
                height="300"
                no-data-text="正在加载..."
                :data="tableData" 
                :columns="tableColumn" 
                @on-row-click="tableRowClick"></Table>
        </div>
        <div slot="footer">
            <Button type="text" size="large" @click="modalCancel">取消</Button>
            <Button type="primary" size="large" @click="modalOK">确认</Button>
        </div>
    </Modal>
</template>
<script>
import _ from 'lodash';
import InvoiceService from 'services/repository/invoice-service';
import timeFormat from 'filters/time-format';

export default {
    name: 'modal-invoice',
    props: {
        value: {
            type: Number,
            default: 0
        },
        brand: {
            type: Number,
            default: 0
        }
    },
    created() {
        this.invoiceService = new InvoiceService();
    },
    data() {
        return {
            showModal: false,
            loadingOk: true,
            tableData: [],
            tableColumn: [{
                title: '#',
                width: 80,
                render: (h, params) => {
                    return h('Radio', {
                        props: {
                            value: params.row.selected
                        },
                        on: {
                            input: val => {
                                params.row.selected = val;
                            },
                            'on-change': () => {
                                this.rowSelect(params.row);
                            }
                        }
                    });
                }
            }, {
                title: '入库单号',
                width: 120,
                key: 'id'
            }, {
                title: '创建时间',
                width: 155,
                render: (h, params) => {
                    return (
                        <span>{timeFormat(params.row.createTime)}</span>
                    );
                }
            }, {
                title: '品牌',
                width: 155,
                key: 'brandName'
            }, {
                title: '到货仓库',
                width: 155,
                key: 'storeroomName'
            }]
        };
    },
    methods: {
        show() {
            this.loadingData();
            this.showModal = true;
        },
        loadingData() {
            return this.invoiceService.listOrder({
                auditStatus: 10,
                brandIds: [this.brand]
            }).then(res => {
                if (res.code === 200) {
                    this.tableData = _.get(res, 'data.records', []);
                    this.loadingOk = true;
                }
            });
        },
        rowSelect(row) {
            this.tableData = this.$refs.table.rebuildData;
            _.each(this.tableData, item => {
                if (row.id !== item.id) {
                    item.selected = false;
                } else {
                    item.selected = true;
                }
            });
        },
        tableRowClick(row) {
            this.rowSelect(row);
        },
        modalOK() {
            let selectRow = this.$refs.table.rebuildData.find(row => row.selected);

            if (!selectRow) {
                this.$Message.error('请选择一个入库单');
                return;
            }
            this.$emit('save', selectRow.id);
            this.showModal = false;
            this.loadingOk = false;
        },
        modalCancel() {
            this.showModal = false;
            this.loadingOk = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.in-store-content {
    .notice {
        color: #f30;
        font-size: 14px;
        line-height: 30px;
    }
}
</style>