<template>
    <view class="order-refund-modal">
        <view class="orm-mask" v-show="isShow">
            <view class="om-content">
                <image class="oc-close" mode="aspectFit" src="../../static/images/icon/x_close.png" @click="hide"></image>
                <view class="oc-title">退款</view>
                <view class="oc-section">
                    <view class="os-info">
                        <view class="oi-name">{{ refundInfo.stadium_name || '' }}</view>
                        <view class="oi-line">订单编号：{{ refundInfo.order_no || '' }}</view>
                        <view class="oi-line">手机号码：{{ refundInfo.mobile || '' }}</view>

                        <view class="os-ipts">
                            <view class="oi-item">
                                <view class="oi-name">
                                    <text class="on-txt">*</text>
                                    退款金额
                                </view>
                                <view class="oi-right">
                                    <input 
                                        class="or-ipt" 
                                        type="digit" 
                                        v-model="iptInfo.refund_amount"
                                        :disabled="refundInfo.refund_times > 0"
                                        :class="{ 'or-disabled': refundInfo.refund_times > 0 }"
                                    />
                                    <view class="or-tip">可退{{ refundInfo.refundable_amount || 0 }}元</view>
                                </view>
                            </view>
                            <view class="oi-item">
                                <view class="oi-name">
                                    <text class="on-txt">*</text>
                                    退款积分
                                </view>
                                <view class="oi-right">
                                    <input 
                                        class="or-ipt" type="digit"  
                                        v-model="iptInfo.refund_integral"
                                        :disabled="refundInfo.refund_times > 0"
                                        :class="{ 'or-disabled': refundInfo.refund_times > 0 }"
                                    />
                                    <view class="or-tip">可退{{ refundInfo.refundable_integral || 0 }}积分</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    
                </view>
                <view class="oc-btns">
                    <view class="ob-item" @click="cancelBtn">取消</view>
                    <view class="ob-item" @click="confirmBtn">确认</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * PM: 
 * 什么状态下都能退
 * 全部订单都能退两次, 所有订单最多只能退2次款
 * 只要订单金额是未全退的，都能退
 * 0元订单不能退
 * 
*/
import { mapState } from 'vuex';
import { showModal } from '@/utils/util';
export default {
    computed: {
        ...mapState([ 'brandInfo' ])
    },
    data() {
        return {
            isShow: false,
            refundInfo: {
                /**
                 * @param {String} stadium_name 店铺名称
                 * @param {String} order_no 订单编号
                 * @param {String} mobile 手机号码
                 * @param {String} refundable_amount 退款金额
                 * @param {String} refundable_integral 退款积分
                 * @param {Number} refund_times 退款次数
                 * @param {Function} cancel 取消回调
                 * @param {Function} confirm 确认回调
                */
            },
            iptInfo: {
                refund_amount: '',
                refund_integral: ''
            }
        }
    },
    methods: {
        show(initData){
            let { brandInfo } = this;
            if(brandInfo?.permission?.['1018']){
                this.isShow = true;
                this.init(initData);
            }else{
                showModal({
                    content: '您没有退款权限',
                })
            }
            
        },
        init(data){
            this.iptInfo.refund_amount = data?.refundable_amount || '0';
            this.iptInfo.refund_integral = data?.refundable_integral || '0';
            this.refundInfo = data;
        },
        hide(){
            this.isShow = false;
        },
        cancelBtn() {
            this.hide();
            this.$emit('click:cancel');
            this.refundInfo?.cancel?.(0);
        },
        confirmBtn() {
            let { iptInfo, refundInfo } = this;
            
            this.$emit('click:confirm');
            this.refundInfo?.confirm?.(iptInfo);
            this.hide();
        }
    }
}
</script>

<style lang="scss">
.order-refund-modal{}

.orm-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 10;
}
.om-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 80upx;
    width: 620upx;
    border-radius: 10px;
    background: #fff;
    .oc-close{
        position: absolute;
        top: 30upx;
        right: 30upx;
        width: 34upx;
        height: 34upx;
    }
    .oc-title{
        padding-top: 78upx;
        text-align: center;
        @include flcw(32upx, 44upx, #333, 500);
    }
    .oc-section{
        padding: 30upx 30upx 0;
        @include ctf(center);
        .os-info{
            .oi-name{
                @include flcw(28upx, 48upx, #333);
            }
            .oi-line{
                @include flcw(28upx, 48upx, #9C9C9F);
            }
            .os-ipts{
                padding-top: 34upx;
                .oi-item{
                    display: flex;
                    align-items: flex-start;
                    .oi-name{
                        @include flcw(28upx, 56upx, #333333);
                        .on-txt{
                            color: #EA5061;
                        }
                    }
                    .oi-right{
                        margin-left: 16upx;
                        flex-shrink: 0;
                        width: 312upx;
                        .or-ipt{
                            display: block;
                            box-sizing: border-box;
                            padding: 0 20upx;
                            width: 100%;
                            height: 56upx;
                            border-radius: 10upx;
                            border: 2upx solid #D8D8D8;
                            @include flcw(28upx, 48upx, #9C9C9F);
                            &.or-disabled{
                                background: #cecece;
                                color: #9C9C9F;
                            }
                        }
                        .or-tip{
                            padding-left: 8upx;
                            @include flcw(24upx, 48upx, #EA5061);
                            @include tHide;
                        }
                    }
                }
            }
        }
    }
    .oc-btns{
        margin-top: 32upx;
        padding: 0 54upx;
        @include ctf(space-between);
        .ob-item{
            width: 240upx;
            height: 88upx;
            text-align: center;
            border: 2upx solid $mColor;
            border-radius: 10upx;
            @include flcw(32upx, 84upx, $mColor, 500);
            &+.ob-item{
                background: $mColor;
                color: #fff;
            }
        }
    }
}
</style>