<template>
    <view class="card-detail">
        <view class="cd-box cb-card">
            <view class="cc-stadium">
                <view class="cs-txt">{{ water_card.stadium_name || '' }}</view>
            </view>
            <view class="cc-lines">
                <kv-line label-style="color: #1A1A1A;" label="水阀卡卡号：">{{ water_card.water_card_no || '' }}</kv-line>
                <kv-line label-style="color: #1A1A1A;" label="手机号码：">{{ water_card.mobile || '' }}</kv-line>
                <kv-line label-style="color: #1A1A1A;" label="微信昵称：">{{ water_card.nick_name || '' }}</kv-line>
                <kv-line label-style="color: #1A1A1A;font-weitht: 500;" label="可用时长："><text class="cl-orange">{{ water_card.valid_duration_text || '' }}</text></kv-line>
            </view>
            <view class="cc-btns">
                <view class="cb-item" @click="toRecords">消费记录</view>
                <view class="cb-item red" @click="deductionBtn">扣费</view>
                <view class="cb-item orange" @click="rechargeBtn">充值</view>
            </view>
        </view>
        <view class="cd-box cd-record">
            <view class="cr-tit">购卡记录</view>
            <view class="cr-time">购卡  {{ water_card_order.pay_time || '-' }}</view>
            <view class="cr-lines">
                <kv-line label="名称：">{{ water_card.water_card_name || '-' }}</kv-line>
                <kv-line label="时长：">{{ water_card_order.duration_text || '-' }}</kv-line>
                <kv-line label="售价：">￥{{ water_card_order.amount || '0' }}</kv-line>
                <kv-line label="支付金额：">￥{{ water_card_order.pay_amount || '0' }}</kv-line>
                <kv-line label="途径：">{{ water_card.resource_text || '-' }}</kv-line>
            </view>
        </view>

        <recharge-popup ref="rechangePopup"></recharge-popup>
        <deduction-popup ref="deductionPopup"></deduction-popup>
    </view>
</template>

<script>
import kv_line from "@/components/kv_line.vue";
import rechargePopup from "../../components/popup/recharge.vue";
import deductionPopup from "../../components/popup/deduction.vue";

import { SHOWER_API } from "../../js/api";
import server from "../../js/server";
import { routeTo, showLoad, hideLoad, showNone, formatDate, jsonStr, showModal } from "@/utils/util";
export default {
    components: {
        'kv-line': kv_line,
        'recharge-popup': rechargePopup,
        'deduction-popup': deductionPopup
    },
    computed: {
        water_card(){
            let { cardInfo } = this;
            return cardInfo?.water_card || {};
        },
        water_card_order(){
            let { cardInfo } = this;
            return cardInfo?.water_card_order || {};
        }
    },
    data(){
        return {
            cardInfo: {}
        }
    },
    onLoad(options){
        let { id, brand_id } = options;
        this.getCardInfo({ id, brand_id });
    },
    methods: {
        rechargeBtn(){
            let { water_card } = this;
            this.$refs.rechangePopup.init({
                water_card_no: water_card?.water_card_no || '',
                mobile: water_card?.mobile || '',
                valid_duration_text: water_card?.valid_duration_text || '',
                success: rData => {
                    let _query = {
                        type: 5,
                        brand_id: water_card?.brand_id || '',
                        amount: rData?.pay_amount || 0,
                        stadiumInfo: {
                            id: water_card?.stadium_id || '',
                            name: water_card?.stadium_name || '',
                            logo: water_card?.stadium_logo || '',
                        },
                    };
                    uni.navigateTo({
                        url: `/subpackage/common/pages/pay_type_select?query=${jsonStr(_query)}`,
                        events: { payConfirm: pData => this.rechargePayConfirm({ rData, pData }) },
                    })
                }
            });
        },
        async rechargePayConfirm({ rData, pData }){
            let { water_card } = this;
            let _reqData = {
                brand_id: water_card?.brand_id || '',
                stadium_id: water_card?.stadium_id || '',
                water_card_no: water_card?.water_card_no || '',
                duration: rData?.duration || 0,
                mobile: water_card?.mobile || '',
                pay_type: this.getTextForType(pData?.payTypeName || ''),
                pay_amount: pData?.amount || 0,
                // 后端：都要传，，，（我也不知道什么原因
                card_no: pData?.selectedCardNo || '',
                order_no: pData?.selectedCardNo || ''
            }
            let _rechargeRes = await this.rechargePayReq(_reqData);
            if(_rechargeRes === 'SUCCESS'){
                setTimeout(_=>{
                    this.getCardInfo({ id: water_card?.id, brand_id: water_card?.brand_id });
                }, 1200)
            }
        },
        rechargePayReq(data){
            showLoad();
            return server.post({
                url: SHOWER_API.CardRecharge,
                data,
                isDefaultGet: false,
            })
            .then(res => {
                hideLoad();
                let _data = res?.data || {};
                if(_data.code === 0){
                    showModal({
                        title: '提示',
                        content: _data.message || '操作成功！'
                    })
                    return "SUCCESS";
                    // this.initData?.success?.('SUCCESS');
                }else{
                    return Promise.reject(_data);
                }
                
            })
            .catch(err => {
                hideLoad();
                showModal({
                    title: '提示',
                    content: err.message || '操作失败！'
                })
                console.warn('deduction deductionReq err --->', err);
            })
        },

        // // 0: 微信支付 1: 支付宝支付 2: 储值卡支付 3:商家主动 4:押金抵扣 5：任务奖品 6：抖音团购兑换 7：付款码支付
        getTextForType(payTxt){
            switch(payTxt){
                case '微信支付': return 0;
                case '支付宝支付': return 1;
                case '储值卡支付': return 2;
                case '商家主动': return 3;
                case '押金抵扣': return 4;
                case '任务奖品': return 5;
                case '抖音团购兑换': return 6;
                case '付款码支付': return 7;
                default: return 8;
            }
        },
        deductionBtn(){
            let { water_card } = this;
            this.$refs.deductionPopup.init({
                water_card_no: water_card?.water_card_no || '',
                mobile: water_card?.mobile || '',
                valid_duration_text: water_card?.valid_duration_text || '',
                valid_duration: water_card?.valid_duration || '',
                // 扣减提交参数
                brand_id: water_card?.brand_id || '',
                stadium_id: water_card?.stadium_id || '',

                success: () => {
                    this.getCardInfo({ id: water_card?.id, brand_id: water_card?.brand_id });
                }
            });
        },
        toRecords(){
            let { water_card } = this;
            let _qryStr = `brand_id=${water_card?.brand_id || ''}&water_card_no=${water_card?.water_card_no || ''}`;
            routeTo(`/subpackage/shower/pages/card/use_record?${_qryStr}`, 'nT');
        },
        getCardInfo({
            id = '', brand_id = ''
        }){
            showLoad();
            return server.get({
                url: SHOWER_API.CardDetails,
                data: { brand_id, id },
                failMsg: '获取用水卡信息失败'
            })
            .then(res => {
                hideLoad();
                this.cardInfo = res || {};
                
            })
            .catch(err => {
                hideLoad();
                console.warn('card detail getCardInfo err --->', err);
                // return Promise.reject(err);
            })
        },
    }
}
</script>

<style lang="scss">
    .card-detail{
        padding: 24upx;
        @include isPd(24upx);
        .cd-box{
            position: relative;
            padding: 30upx;
            background: #fff;
            border-radius: 10upx;
            &+.cd-box{
                margin-top: 24upx;
            }
        }
        .cb-card{
            .cc-stadium{
                .cs-txt{
                    @include flcw(28upx, 40upx, #333333, 500);
                    @include tHide;
                }
                &::after{
                    content: '';
                    display: block;
                    margin-top: 26upx;
                    height: 1px;
                    background: #D8D8D8;
                }
            }
            .cc-lines{
                padding-top: 20upx;
                .cl-orange{
                    color: #FF873D;
                    font-weight: 500;
                }
            }
            .cc-btns{
                margin-top: 30upx;
                @include ctf;
                .cb-item{
                    width: 176upx;
                    text-align: center;
                    border: 2upx solid #9A9A9D;
                    border-radius: 10upx;
                    @include flcw(32upx, 76upx, #9a9a9d, 500);
                    &.red{
                        color: #EA5061;
                        border-color: #EA5061;
                    }
                    &.orange{
                        color: #FF873D;
                        border-color: #FF873D;
                    }
                    &+.cb-item{
                        margin-left: 58upx;
                    }
                }
            }
        }
        .cd-record{
            .cr-tit{
                @include flcw(28upx, 40upx, #9C9C9F);
            }
            .cr-time{
                margin-top: 20upx;
                @include flcw(28upx, 52upx, #1A1A1A, 500);
            }
        }
        
    }
</style>