<template>
   <LayoutBody>
       <div>
          <Button type="primary" @click="back">返回发货物流列表</Button>
          <span>物流单号：{{id}}</span>
          <span>发货时间：{{sendTime}}</span>
       </div>

      <LayoutAction>
         发往：{{storeroomName}} {{address}} {{adminName}}
      </LayoutAction>

      <LayoutList>
         <Table border :columns="tableCols" :data="tableData"></Table>
         <Page :total="pageData.total" :current="pageData.current"
               @on-change="pageChange" :page-size="20" show-total></Page>
      </LayoutList>

   </LayoutBody>
</template>

<script>
    import service from 'services/express-service';
    import moment from 'moment';
    import _ from 'lodash';

    export default {
        props: ['id'],
        data() {
            return {
                tableCols: [
                    {
                        title: 'sku',
                        key: 'sku',
                        align: 'center'
                    },
                    {
                        title: '条码',
                        key: 'skuFactoryCode',
                        align: 'center'
                    },
                    {
                        title: '商品图片',
                        align: 'center',
                        render: (h, params) => {
                            return (
                                <div>
                                    <img v-prod-img={params.row.skn}></img>
                                </div>
                            );
                        }
                    },
                    {
                        title: '商品名称',
                        key: 'productName',
                        align: 'center'
                    },
                    {
                        title: '规格',
                        align: 'center',
                        render: (h, params) => {
                            return (
                                <div>{params.row.colorName}/{params.row.size}</div>
                            );
                        }
                    },
                    {
                        title: '订单号/已发数',
                        align: 'center',
                        render: (h, params) => {
                            return (
                                <div>{params.row.boList.map((i) => {
                                    return (
                                        <div>{i.proRequisitionFormId}/{i.num}</div>
                                    );
                                })}</div>
                            );
                        }
                    }
                ],
                tableData: [],
                pageData: {
                    current: 1,
                    pageSize: 20,
                    total: 0
                },
                id: null,
                time: null,
                storeroomName: null,
                address: null,
                adminName: null
            };
        },
        mounted() {
            this.id = this.$route.params.id;
            this.time = this.$route.query.time;
            this.getExpress(this.id);
        },
        computed: {
            sendTime() {
                return moment.unix(this.time).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        methods: {
            pageChange(num) {
                this.pageData.current = num;
            },
            getExpress(id) {
                return service.show({expressNumber: id}).then((result) => {
                    if (result.code === 200) {
                        this.tableData = result.data;
                        this.storeroomName = _.first(this.tableData || {}).storeroomName;
                        this.address = _.first(this.tableData || {}).address;
                        this.adminName = _.first(this.tableData || {}).adminName;
                    }
                });
            },
            back() {
                this.$router.push({
                    name: 'repository.express.list'
                });
            }

        }
    };
</script>

<style>

</style>