<template>
    <Modal
        v-model="showModal"
        width="500">
        <div class="deliver-modal">
            <div class="deliver-info">
                <Row class-name="info-row">
                    <Col span="4" class-name="info-col">收货仓库：</Col>
                    <Col span="20">{{storeInfo.storeName}}</Col>
                </Row>
                <Row class-name="info-row">
                    <Col span="4">物流公司：</Col>
                    <Col span="20">
                        <Select v-model="expressId">
                            <Option v-for="item in expresses"
                                    :value="item.id"
                                    :key="item.id">
                                {{ item.companyName }}
                            </Option>
                        </Select>
                    </Col>
                </Row>
                <Row class-name="info-row">
                    <Col span="4">物流单号：</Col>
                    <Col span="20">
                        <Input v-model="expressNumber" placeholder="请填写发货商品对应的唯一物流单号"></Input>
                    </Col>
                </Row>
                <p class="info-tip">
                    发往：{{storeInfo.storeName}}{{storeInfo.address}}{{storeInfo.adminName}}{{storeInfo.phone}}
                </p>
            </div>
        </div>
        <div slot="footer">
            <Button type="text" size="large" @click="hide">取消</Button>
            <Button type="primary" size="large" :loading="showLoading" @click="deliver">提交</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: 'modal-deliver',
    props: {
        expresses: {
            type: Array,
            default() {
                return [];
            }
        },
        storeInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            showModal: false,
            showLoading: false,
            expressId: '',
            expressNumber: '',
        };
    },
    methods: {
        show() {
            this.showModal = true;
            this.expressId = '';
            this.expressNumber = '';
        },
        hide() {
            this.showLoading = false;
            this.showModal = false;
        },
        deliver() {
            if (!this.expressId) {
                this.$Message.error('请选择物流公司');
                return;
            }
            if (!this.expressNumber) {
                this.$Message.error('请填写物流单号');
                return;
            }
            if (!/^[a-zA-Z\d]{6,20}$/.test(this.expressNumber)) {
                this.$Message.error('物流单号不符合规则');
                return;
            }
            this.showLoading = true;
            this.$emit('deliver', {expressId: this.expressId, expressNumber: this.expressNumber});
        }
    }
};
</script>

<style lang="scss">
.deliver-modal {
    padding: 30px;

    .info-row {
        line-height: 40px;
    }

    .info-tip {
        margin-top: 20px;
        color: #f00;
        text-align: center;
    }

    .ivu-modal {
        width: 50%;
    }
}
</style>