<template>
    <view>
        <form @submit="sendSubmit">
            <view class="nickname">
                <view class="examineTitle">
                    选择发货方式
                </view>
                <view class="toExamine" v-if="send.sendWay[send.sendIndex]">
                    <picker mode="selector" :value="send.sendIndex" range-key="name" :range="send.sendWay" @change="wayChange">
                        <view>{{send.sendWay[send.sendIndex].name}}</view>
                    </picker> 
                    <image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
                </view>
            </view>
            <view class="nickname" v-if="send.sendIndex == 0">
                <view class="examineTitle">
                    选择物流公司
                </view>
                <view class="toExamine" v-if="state.array[state.index]">
                    <picker mode="selector" :value="state.index" range-key="name" :range="state.array" @change="sexChange">
                        <view>{{state.array[state.index].name}}</view>
                    </picker> 
                    <image class="toExamine-row" src="../../static/icons/goods_row.png" mode="aspectFill"></image>
                </view>
            </view>
            <view class="nickname" v-if="send.sendIndex == 0">
                <view class="examineTitle">
                    填写物流单号
                </view>
                <input class="remarks" @blur="bindExpressNo" auto-height placeholder="" />
            </view>
            
            <!-- 选择其他方式显示 -->
            <view class="nickname" v-if="send.sendIndex == 1">
                <view class="examineTitle">
                    送货人姓名
                </view>
                <input class="remarks" name="courier_name" auto-height placeholder="" />
            </view>
            <view class="nickname" v-if="send.sendIndex == 1">
                <view class="examineTitle">
                    送货人联系方式
                </view>
                <input class="remarks" name="courier_mobile" auto-height placeholder="" />
            </view>
            <button class="submit" form-type="submit" type="default">提交</button>
        </form>
    </view>
</template>

<script>
    import { deliverFront, deliverForm } from '@/apis/interfaces/store'
	export default {
		data() {
			return {
                send          : {
                    sendWay   : [{
                        id    : 'post',
                        name  : '邮寄'
                    },{
                        id    : 'other',
                        name  : '其他'
                    }],
                    sendIndex : 0,
                },
				state       : {
				    // 快递筛选
				    array   : [],
				    // 快递筛选默认下标
				    index   : 0,
				},
                expressNo      : '',
                courierName    : '',
                courierMobile  : ''
			}
		},
        created() {
            deliverFront(this.$Route.query.id).then(res=>{
                this.state.array = res
            })
        },
		methods: {
            // 选择发货方式
            wayChange(e) {
                this.send.sendIndex = e.detail.value
                this.expressNo = ''
                this.courierName = ''
                this.courierMobile = ''
            },
            
            // 筛选
            sexChange(e) {
                this.state.index = e.detail.value
            },
            
            // 物流单号
            bindExpressNo(val) {
                this.expressNo = val.detail.value
            },
            
            // 	送货人姓名
            bindCourierName(val) {
                this.courierName = val.detail.value
            },
            
            // 	送货人联系方式
            bindCourierMobile(val) {
                this.courierMobile = val.detail.value
            },
            
            // 提交表单
            sendSubmit() {
                deliverForm(this.$Route.query.id,{
                    type            :	this.send.sendWay[this.send.sendIndex].id || '',
                    express_id      :	this.state.array[this.state.index].id || '',
                    express_no      :	this.expressNo || '',
                    courier_name    :   this.courierName || '',
                    courier_mobile  :	this.courierMobile || ''
                }).then(res=>{
                    uni.showToast({
                        icon: 'none',
                        title: '发送成功'
                    })
                    this.$Router.back()
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .nickname {
        background-color: #FFFFFF;
        padding: $padding;
        margin-bottom: $margin;
        display: flex;
        position: relative;
        font-size: $title-size-lg;
        .examineTitle {
            width: 210rpx;
        }
        .remarks {
            width: calc(100% - 210rpx);
            font-size: $title-size-lg;
            color: $text-color;
        }
        .toExamine {
            position: absolute;
            top: $padding;
            right: $padding;
            display: flex;
            .toExamine-row {
                width: 32rpx;
                height: 32rpx;
                margin-top: 6rpx;
                filter: grayscale(100%);
            }
        }
    }
    .submit {
        background: $mian-color;
        color: white;
        border-color: $mian-color;
        margin: $margin;
    }
</style>
