<template>
   <layout-body>
          <div class="order-info">
              <div>物流单号：<span>{{id}}</span> 发货时间：<span>{{sendTime || '-'}}</span></div>
              <div>发往：<span>{{storeroomName || '-'}} &nbsp;{{address || '-'}} &nbsp;{{adminName || '-'}} </span></div>
          </div>

       <layout-action>
           <Button type="primary" @click="back">返回入库物流列表</Button>
       </layout-action>

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

   </layout-body>
</template>

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

    export default {
        props: ['id'],
        created() {
            this.expressService = new ExpressService();
        },
        data() {
            return {
                tableCols: [
                    {
                        title: 'sku',
                        key: 'sku',
                        align: 'center'
                    },
                    {
                        title: '条码',
                        key: 'skuFactoryCode',
                        align: 'center'
                    },
                    {
                        title: '商品图片',
                        align: 'center',
                        render: (h, params) => {
                            let directives = [
                                {name: 'prod-img', value: params.row.skn, modifiers: {skn: true}}
                            ];

                            return (
                                <div>
                                    <img {...{directives}}></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 this.expressService.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 lang="scss" scoped>
.order-info {
    div {
        display: block;
        margin-bottom: 10px;
    }

    span {
        padding: 5px;
        color: #f00;
        background-color: #f9f3f5;
        border-radius: 2px;
        margin-right: 5px;
    }
}
</style>