<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <div class="page__content">
            <div class="row">
                <div class="row__title row__title--must">快递公司</div>
                <picker
                    mode="selector"
                    :range="logisticsNameList"
                    range-key="name"
                    @change="logisticsHandle"
                >
                    <div class="row__select">
                        <div class="row__text">
                            {{ logisticsName || "请选择快递公司" }}
                        </div>
                        <img
                            class="row__arrows"
                            src="/static/icon/arrows_bottom.png"
                            alt=""
                        />
                    </div>
                </picker>
            </div>
            <div class="row">
                <div class="row__title row__title--must">快递单号</div>
                <input
                    class="row__input"
                    type="text"
                    v-model="logisticsNo"
                    placeholder="请填写快递单号"
                />
            </div>
        </div>
        <div class="submit" :class="{ 'submit--iphoneX': iphoneX }">
            <div class="submit__btn" @click="submit">提交</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",

    // 数据
    data() {
        return {
            applyId: "",
            logisticsName: "",
            logisticsNameList: [],
            logisticsNo: "",
        };
    },

    onShow() {
        const self = this;

        self.applyId = self.$mp.query.applyId;
        self.GetDeliveries();
    },

    // 函数
    methods: {
        // 获取快递公司
        GetDeliveries() {
            const self = this;

            self.api.get("/AfterSale/GetExpressCompanyList").then((res) => {
                let arr = [];
                for (let item of res.data) {
                    arr.push({
                        label: item.name,
                        value: item.name,
                        name: item.name,
                        reg_mail_no: item.reg_mail_no,
                    });
                }
                self.logisticsNameList = arr;
            });
        },

        // 快递公司处理
        logisticsHandle(e) {
            const self = this;
            let index = e.detail.value;

            self.logisticsName = self.logisticsNameList[index].name;
        },

        // 提交申请
        submit() {
            const self = this;

            if (!self.logisticsName) {
                return self.fn.showToast("请选择快递公司");
            } else if (!self.logisticsNo) {
                return self.fn.showToast("请填写快递单号");
            }
            // 判断快递单号正则
            let curExpress = {};
            for (let item of this.logisticsNameList) {
                if (item.name === self.logisticsName) {
                    curExpress = item;
                }
            }
            if (curExpress.reg_mail_no) {
                let reg = new RegExp(curExpress.reg_mail_no);
                if (!reg.test(self.logisticsNo)) {
                    return self.fn.showToast("快递单号不正确");
                }
            }
            self.api
                .post("/AfterSale/SubmitLogisticsInfo", {
                    id: self.applyId,
                    logisticsName: self.logisticsName,
                    logisticsNo: self.logisticsNo,
                })
                .then(() => {
                    self.router.back();
                });
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(200);

    &__content {
        padding: px(50) 0;
        border-top: solid px(25) #f8f8f8;
        background-color: #fff;
    }

    &--iphoneX {
        padding-bottom: px(230);
    }
}

.row {
    padding: px(40);

    &__title {
        display: flex;
        align-items: center;
        font-size: px(36);
        color: #333;

        &--must:after {
            content: "*";
        }
    }

    &__select {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(85);
        padding: 0 px(40);
        margin-top: px(20);
        border-radius: px(10);
        background-color: #f5f5f5;
    }

    &__text {
        font-size: px(36);
        color: #333;
    }

    &__arrows {
        width: px(40);
        height: px(40);
    }

    &__explain {
        margin-top: px(20);
        font-size: px(36);
        color: #999;
    }

    &__input {
        height: px(85);
        padding: 0 px(40);
        margin-top: px(20);
        border-radius: px(10);
        background-color: #f5f5f5;
    }

    &__content {
        width: 100%;
        height: px(230);
    }

    &__textarea {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: px(40);
        margin-top: px(20);
        font-size: px(36);
        color: #333;
        border-radius: px(10);
        background-color: #f5f5f5;
    }
}

.title {
    display: flex;
    align-items: center;
    height: px(100);
    padding: 0 px(40);
    font-size: px(36);
    color: #999;
    background-color: #f8f8f8;
}

.bottom {
    padding: px(50) px(40);

    &__title {
        font-size: px(36);
        color: #333;
    }

    &__text {
        font-size: px(36);
        color: #999;
    }
}

.upload {
    display: flex;
    flex-wrap: wrap;
    margin-top: px(20);

    &__item {
        position: relative;
        width: px(180);
        height: px(180);
        margin: 0 0 px(25) px(25);

        &:nth-child(5n + 1) {
            margin-left: 0;
        }
    }

    &__img {
        width: 100%;
        height: 100%;
    }

    &__close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: px(50);
        height: px(50);
        transform: translate(50%, -50%);
    }

    &__add {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
    }

    &__camera {
        width: px(60);
        height: px(60);
    }

    &__text {
        margin-top: px(20);
        font-size: px(36);
        color: #999;
    }
}

.submit {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 995;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: px(170);
    background-color: #fff;

    &--iphoneX {
        padding-bottom: px(30);
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(970);
        height: px(110);
        font-size: px(42);
        color: #fff;
        border-radius: px(55);
        background-color: #27a34f;
    }
}
</style>