<template>
    <view>
        <form @submit="sendSubmit">
            <view class="nickname">
                <view class="examineTitle">
                    退换单操作
                </view>
                <view class="toExamine">
                    <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">
                <view class="examineTitle">
                    退换单备注：
                </view>
                <textarea class="remarks" @blur="bindTextAreaBlur" auto-height placeholder="请填写备注" />
            </view>
            
            <button class="submit" form-type="submit" type="default">提交</button>
        </form>
    </view>
</template>

<script>
    import { storeAudit } from '@/apis/interfaces/store'
	export default {
		data() {
			return {
				state      : {
				    // 退货单-筛选
				    array   : [{
				        id  : 'agree',
				        name: '审核通过'
				    },{
				        id  : 'refuse',
				        name: '审核驳回'
				    }],
				    
				    // 退货单筛选默认下标
				    index   : 0,
				},
                remarks : ''
			}
		},
        created() {
            
        },
		methods: {
			bindTextAreaBlur(val) {
                this.remarks = val.detail.value
            },
            
            // 筛选
            sexChange(e) {
                this.state.index = e.detail.value
            },
            
            sendSubmit(){
                let newState  = this.state.array[this.state.index].id,
                    newRemark = this.remarks
                storeAudit(this.$Route.query.id, {
                    state : newState,
                    remark: newRemark
                }).then(res=>{
					uni.showModal({
						title		: '提示',
						content		: '订单已审核',
						showCancel	: false,
						success   	: ()=> {
							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>
