<template>
    <div class="cash-cloth-container">
        <div v-loading="dialogLoading" :element-loading-text="loadingText">
            <el-form
                ref="payForm"
                :model="orderForm"
                :rules="rules"
                label-width="100px"
                @submit.native.prevent.capture
            >
                <div class="cash-container">
                    <!-- 左侧核对信息区域 -->
                    <div class="info-section">
                        <el-card class="info-card">
                            <div class="card-header">
                                <span class="title">订单信息</span>
                                <el-tag v-if="orderForm.isAppointment === 'Y'" type="success" style="margin-left: 10px;">预约订单</el-tag>
                            </div>

                            <!-- 订单基本信息 -->
                            <div class="order-info">
                                <div class="info-item">
                                    <span class="label">衣物件数:</span>
                                    <span class="value highlight">{{ orderClothItemDTOS.length }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">衣物总价:</span>
                                    <span class="value price">¥{{ calculateTotalPrice() }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">配送费用:</span>
                                    <span class="value">¥{{ calculateDeliveryPrice() }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">运费优惠:</span>
                                    <span class="value discount">-¥{{ deliveryFreeAmount }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">优惠金额:</span>
                                    <span class="value discount">-¥{{ calculateTotalDiscountAmount() }}</span>
                                </div>
                                <div class="info-item total">
                                    <span class="label">应付金额:</span>
                                    <span class="value price">¥{{ calculateTotalPrice() + calculateDeliveryPrice() - calculateTotalDiscountAmount() }}</span>
                                </div>
                            </div>

                            <!-- 客户信息 -->
                            <div class="customer-info" v-if="appUserInfo">
                                <div class="section-title">客户信息</div>
                                <div class="info-item">
                                    <span class="label">会员姓名:</span>
                                    <span class="value">{{ appUserInfo.realName }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">可用余额:</span>
                                    <span class="value balance">¥{{ Math.round((getBalance()) * 100) / 100  }}</span>
                                </div>
                            </div>
                        </el-card>

                        <!-- 支付方式选择 -->
                        <!-- v-if="orderForm.isAppointment === 'N'" -->
                        <el-card class="payment-card" >
                            <div class="card-header">
                                <span class="title">收款方式</span>
                            </div>

                            <div class="payment-methods" v-if="orderForm.isAppointment!= 'Y'">
                                <el-radio-group v-model="orderForm.payType" size="large" @change="changePayType" >
                                    <el-radio-button label="3" style="width: 80px"> <i class="el-icon-wallet"></i> 余额 </el-radio-button>
                                    <el-radio-button label="2" style="width: 80px"> <i class="el-icon-money"></i> 现金 </el-radio-button>
                                    <el-radio-button label="0" style="width: 80px"> <i class="el-icon-mobile-phone"></i> 扫码 </el-radio-button>
                                </el-radio-group>
                            </div>

                            <span style="margin-left: 10px; font-size: 12px; color: #f56c6c;" v-if="orderForm.payType == 3 && getOtherPayPrice() > 0">余额不足，需要额外支付￥{{ Math.round((getOtherPayPrice()) * 100) / 100 }}</span>
                            <div v-if="orderForm.payType == 3 && getOtherPayPrice() > 0" style="margin-top: 10px; margin-left: 10px;">
                                <div class="card-header" style="margin-bottom: 10px">
                                    <span class="title" style="font-size: 15px;">额外支付方式</span>
                                </div>
                                <el-radio-group v-model="otherPayType" @input="changeOtherPayType">
                                    <el-radio :label="2">现金</el-radio>
                                    <el-radio :label="0">微信/支付宝</el-radio>
                                </el-radio-group>
                            </div>
                             <!-- 扫码支付输入框 -->
                             <div class="scan-input" v-if="otherPayType == 0 && getOtherPayPrice() > 0">
                                <el-input ref="authOtherCode" v-model="orderForm.authCode" placeholder="请扫描客户付款码" prefix-icon="el-icon-camera" clearable autofocus> </el-input>
                            </div>

                            <!-- 扫码支付输入框 -->
                            <div class="scan-input" v-if="orderForm.payType == '0'">
                                <el-input ref="autoFocus" v-model="orderForm.authCode" placeholder="请扫描客户付款码" prefix-icon="el-icon-camera" clearable autofocus> </el-input>
                            </div>

                            <!-- 支付按钮 -->
                            <div class="payment-actions">
                                <el-button type="primary" size="large" icon="el-icon-shopping-cart-2" style="width: 180px" @click="submitForm(0)" v-if="orderForm.isAppointment!= 'Y'"> 立即收款 </el-button>
                                <el-button type="warning" size="large" icon="el-icon-time" style="width: 180px" @click="submitForm(1)"> 取衣付款 </el-button>
                            </div>
                        </el-card>
                    </div>

                    <!-- 右侧优惠信息区域 -->
                    <div class="discount-section" style="width: 600px">
                        <el-card class="discount-card">
                            <el-tabs v-model="confirmCouponTabIndex" type="border-card">
                                <!-- 优惠券 tab -->
                                <el-tab-pane label="优惠券" name="0">
                                    <div class="coupon-actions">
                                        <el-button type="primary" plain @click="onSelectCoupon"> <i class="el-icon-ticket"></i> 选择优惠券 </el-button>
                                    </div>
                                    <!-- 已选优惠券列表 -->
                                    <div class="selected-coupons">
                                        <el-table :data="selectCoupons" size="small" border height="calc(100vh - 400px)" style="width: 100%">
                                            <el-table-column label="优惠券" align="center" prop="couponTypeTitle" width="80" />
                                            <el-table-column label="类型" align="center" width="80">
                                                <template slot-scope="scope">
                                                    <el-tag size="mini" :type="getTagType(scope.row.discountWay)">
                                                        {{ getDiscountTypeLabel(scope.row.discountWay) }}
                                                    </el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="优惠内容" align="center" width="120">
                                                <template slot-scope="scope">
                                                    <div class="discount-content">
                                                        <template v-if="scope.row.discountWay == '0'">
                                                            <span class="amount">-¥{{ scope.row.deductAmount }}</span>
                                                        </template>
                                                        <template v-if="scope.row.discountWay == '1'">
                                                            <div>满{{ scope.row.minAmount }}件</div>
                                                            <div>减{{ scope.row.deductAmount }}件</div>
                                                        </template>
                                                        <template v-if="scope.row.discountWay == '2'">
                                                            <div>{{ getDiscountStr(scope.row.discountRate) }}</div>
                                                            <div>最多减{{ scope.row.deductAmount }}元</div>
                                                        </template>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="优惠衣服" align="center">
                                                <template slot-scope="scope">
                                                    <el-popover placement="top" width="200" trigger="hover">
                                                        <div class="cloth-list">
                                                            <div v-for="(item, index) in scope.row.orderCouponClothDTOS" :key="index" class="cloth-item">
                                                                <span class="index">#{{ item.clothIndex + 1 }}</span>
                                                                <span class="name">{{ item.clothName }}</span>
                                                                <span class="amount">-¥{{ item.deductAmount }}</span>
                                                            </div>
                                                        </div>
                                                        <div slot="reference" class="cloth-summary">
                                                            已选{{ scope.row.orderCouponClothDTOS.length }}件
                                                            <i class="el-icon-more"></i>
                                                        </div>
                                                    </el-popover>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" align="center" width="100" fixed="right">
                                                <template slot-scope="scope">
                                                    <el-button type="text" @click="changeCouponDiscountCloth(scope.$index)" v-if="canModifyCoupon(scope.row, scope.$index)"> 修改 </el-button>
                                                    <el-button type="text" style="color: #ff4949" @click="removeSelectCoupon(scope.$index)" v-if="scope.$index == selectCoupons.length - 1"> 删除 </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                        </el-tab-pane>
                                        <el-tab-pane label="平台折扣活动" name="1">
                        <!-- <el-form-item label="折扣" prop="discountCouponId">
                            <el-select v-model="orderForm.discountCouponId" placeholder="请选择" clearable @change="onDiscountCouponSelect">
                                <template v-for="(item, i) in discountCouponVOS">
                                    <el-option :key="i" :label="item.couponTypeTitle + '（' + item.deductAmount * 10 + '折）'" :value="item.id"> </el-option>
                                </template>
                            </el-select>
                        </el-form-item> -->
                        <el-table :data="discountCouponVOS" style="width: 100%">
                            <el-table-column label="序号" type="index" align="center" fixed="left" width="80"> </el-table-column>
                            <el-table-column label="活动名称" align="center" prop="title"> </el-table-column>
                            <el-table-column label="适用衣服" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.clothScope == 0">全部衣服 折扣{{ getDiscountStr(scope.row.discount * 100) }}</span>
                                    <div v-if="scope.row.clothScope == 1">
                                        <div v-for="(item, i) in scope.row.activityClothItemVOList" :key="i">#{{ i + 1 }} {{ item.clothItemName }} 折扣{{ getDiscountStr(item.discount * 100) }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="适用支付方式" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.payScope == 0">全部</span>
                                    <span v-if="scope.row.payScope == 1">现金</span>
                                    <span v-if="scope.row.payScope == 2">余额</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="可优惠金额(元)" align="center">
                                <template slot-scope="scope">
                                    <span>{{ calculateTotalDiscountByActivity(scope.row, scope.row.title) }}</span>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="衣服品牌" align="center" prop="name" width="120"> -->
                            <!-- <template slot-scope="scope"> -->
                            <!-- <span>{{ scope.row.clothBrandName }}</span> -->
                            <!-- </template> -->
                            <!-- </el-table-column> -->
                            <!-- <el-table-column label="瑕疵" align="center"> -->
                            <!-- <template slot-scope="scope"> -->
                            <!-- <span> -->
                            <!-- <template v-for="(color, index) in scope.row.orderClothFlawDTOS"> -->
                            <!-- {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }} -->
                            <!-- </template> -->
                            <!-- </span> -->
                            <!-- </template> -->
                            <!-- </el-table-column> -->
                            <!-- <el-table-column label="洗涤方式" align="center" width="80"> -->
                            <!-- <template slot-scope="scope"> -->
                            <!-- <span>{{ scope.row.clothWashModeName }}</span> -->
                            <!-- </template> -->
                            <!-- </el-table-column> -->
                            <!-- <el-table-column label="原价（元）" align="center" prop="totalPrice" width="100" /> -->
                            <!-- <el-table-column label="抵扣金额（元）" align="center" prop="deductAmount" width="130" /> -->
                            <!-- <el-table-column label="折扣金额（元）" align="center" width="130">
                                <template slot-scope="scope">
                                    <span>{{ parseInt((scope.row.totalPrice - scope.row.deductAmount) * 100 * parseInt(100 - orderForm.discountCoupon.deductAmount * 100)) / 10000 }}</span>
                                </template>
                            </el-table-column> -->
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" style="color: #67c23a" @click="onSelectActivityItem({})" v-if="activity.id === scope.row.id">不使用</el-button>
                                    <el-button type="text" @click="onSelectActivityItem(scope.row)" v-else>使用</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="现金券" name="2">
                        <el-form-item label="现金券" prop="cashDeductAmount">
                            <el-input-number
                                style="text-align: left"
                                v-model="orderForm.cashDeductAmount"
                                placeholder="请输入现金券金额"
                                :precision="2"
                                clearable
                                :controls="false"
                                :max="(parseInt(calculateTotalPrice() * 100) + parseInt(calculateDeliveryPrice() * 100) - parseInt(calculateTotalDiscountAmountWithoutCashAmount() * 100)) / 100"
                            />
                        </el-form-item>
                        <el-form-item label="是否特殊" prop="isSpecial">
                            <el-checkbox v-model="orderForm.isSpecial"></el-checkbox>
                        </el-form-item>
                    </el-tab-pane>
                                </el-tabs>
                        </el-card>
                    </div>
                </div>
            </el-form>
        </div>

        <!-- 弹窗区域 -->
        <div class="dialog-container">
            <!-- 选择优惠券弹窗 -->
            <el-dialog title="选择优惠券" :visible.sync="setCouponOpen" append-to-body width="55%" :close-on-click-modal="false">
                <el-table :data="deductCouponVOS" style="width: 100%">
                    <el-table-column label="优惠券" align="center" prop="couponTypeTitle" />
                    <el-table-column label="优惠券类型" align="center" prop="discountType">
                        <template slot-scope="scope">
                            <span v-if="scope.row.discountWay == '0'">抵扣券</span>
                            <span v-if="scope.row.discountWay == '1'">满减券</span>
                            <span v-if="scope.row.discountWay == '2'">折扣券</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="优惠内容" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.discountWay == '0'">抵扣{{ scope.row.deductAmount }}元</span>
                            <span v-if="scope.row.discountWay == '1'">满{{ parseInt(scope.row.minAmount) }}件减{{ scope.row.deductAmount }}件</span>
                            <span v-if="scope.row.discountWay == '2'">优惠{{ getDiscountStr(scope.row.discountRate) }}，最多折扣{{ scope.row.deductAmount }}元</span>
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="是否单件" align="center" prop="isUnique">-->
<!--                        <template slot-scope="scope">-->
<!--                            <span v-if="scope.row.discountWay == '2'">-->
<!--                                <span v-if="scope.row.isUnique == 'Y'">单件</span>-->
<!--                                <span v-if="scope.row.isUnique == 'N'">非单件</span>-->
<!--                            </span>-->
<!--                            <span v-else>&#45;&#45;</span>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="适用衣服" align="center">
                        <template slot-scope="scope">
                            <template v-for="(item, index) in scope.row.appCouponTypeApplyClothVOS" v-key="index">
                                <span>{{ index > 0 ? '、' : '' }}{{ item.clothItemName }}</span>
                            </template>
                            <span v-if="!scope.row.appCouponTypeApplyClothVOS">全部衣服</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="onSelectCouponItem(scope.$index)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>

            <!-- 修改优惠券弹窗 -->
            <el-dialog :title="changeDiscountCouponTitle" :visible.sync="changeDiscountCouponOpen" width="70%" append-to-body :close-on-click-modal="false">
                <div class="discount-cloth-dialog">
                    <div class="dialog-header">可选择衣物</div>
                    <el-table :data="changeDiscountCouponCanSelectCloths">
                        <el-table-column label="序号" align="center" fixed="left" width="80">
                            <template slot-scope="scope">
                                <span>#{{ scope.row.index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣物名称" align="center" prop="name" width="250">
                            <template slot-scope="scope">
                                <span>{{ calculateClothNameByInfo(scope.row) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="颜色" align="center" width="120">
                            <template slot-scope="scope">
                                <span>
                                    <template v-for="(color, index) in scope.row.orderClothColorDTOS">
                                        {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
                                    </template>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服品牌" align="center" prop="name" width="120">
                            <template slot-scope="scope">
                                <span>{{ scope.row.clothBrandName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="瑕疵" align="center">
                            <template slot-scope="scope">
                                <span>
                                    <template v-for="(color, index) in scope.row.orderClothFlawDTOS">
                                        {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
                                    </template>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="洗涤方式" align="center" width="80">
                            <template slot-scope="scope">
                                <span>{{ scope.row.clothWashModeName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格（元）" align="center" prop="totalPrice" width="100" />
                        <el-table-column label="待优惠金额（元）" align="center" prop="deductAmount" width="130" />
                        <el-table-column label="还需支付（元）" align="center" width="130">
                            <template slot-scope="scope">
                                <span>{{ scope.row.totalPrice - scope.row.deductAmount }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" style="color: #67c23a" v-if="scope.row.isSelected">已选择</el-button>
                                <el-button type="text" style="color: #ff4949" @click="addCouponRelateCloth(scope.$index)" v-else>选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="dialog-footer">
                        <el-button @click="changeDiscountCouponOpen = false">取 消</el-button>
                        <el-button type="primary" @click="submitChangeCouponRelateCloth">确 定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>

        <!-- 修改支付状态弹窗的位置和样式 -->
        <div class="payment-status-container">
            <pay-status-popup
                ref="payStatusPopup"
                :hide-pointer="false"
                :hide-user="false"
                @pay-success="handlePaySuccess"
                @confirm="handleConfirm"
                @close="handleConfirm"
            />
        </div>
    </div>
</template>

<script>
import PayStatusPopup from '@/components/payStatusPopup'
import { collectCloth } from '../../../../api/order/cloth'

export default {
    name: 'cashCloth',
    components: {
        PayStatusPopup
    },
    props: {
        appUserInfo: {
            type: Object
        },
        orderForm: {
            type: Object
        },
        orderClothItemDTOS: {
            type: Array,
            default: []
        },
        clothSpeeds: {
            type: Array,
            default: []
        },
        deductCouponVOS: {
            type: Array,
            default: []
        },
        discountCouponVOS: {
            //可选择的折扣券
            type: Array,
            default: []
        },
        deliveryFree: {
            //运费优惠
            type: Array,
            default: []
        }, 
        deliveryAmount: {
            //运费
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            dialogLoading: false,
            setCouponOpen: false, //是否选择优惠券
            otherPayType: 2,
            loadingText: '',
            confirmCouponTabIndex: '0',
            confirmDeductTabIndex: '0',
            selectCoupons: [],
            changeDiscountCouponIndex: -1,
            changeDiscountCouponOpen: false,
            changeDiscountCouponTitle: '',
            changeDiscountCouponSelectCloths: [],
            changeDiscountCouponCanSelectCloths: [],
            activity: {},
            rules: {
                payType: [
                    { required: true, message: '请选择支付方式', trigger: 'change' }
                ],
                authCode: [
                    { required: true, message: '请输入付款码', trigger: 'blur',
                        validator: (rule, value, callback) => {
                            if (this.orderForm.payType === '0' && !value) {
                                callback(new Error('请输入付款码'));
                            } else {
                                callback();
                            }
                        }
                    }
                ],
                cashDeductAmount: [
                    {
                        validator: (rule, value, callback) => {
                            if (value && value > this.calculateTotalPrice()) {
                                callback(new Error('抵扣金额不能大于订单金额'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'change'
                    }
                ]
            },
            deliveryFreeAmount: 0
        }
    },
    mounted() {
        if (process.env.ENV != 'production') {
            window.cashClothDialog = this
        }
    },
    methods: {
        getDiscountStr(e) {
            return Math.round((e / 10) * 100) / 100 + '折'
        },
        changePayType() {
            if (this.orderForm.payType == 0) {
                this.orderForm.authCode = ''
                this.$nextTick((_) => {
                    this.$refs.autoFocus.focus()
                })
            }
        },

        changeOtherPayType() {
            if (this.otherPayType == 0) {
                this.orderForm.authOtherCode = ''
                this.$nextTick((_) => {
                    this.$refs.autoFocus.focus()
                })
            }
        },
        getOtherPayPrice() {
            let payAmount =  this.calculateTotalPrice() + this.calculateDeliveryPrice() - this.calculateTotalDiscountAmount()
            console.log(payAmount, this.getBalance())
            return payAmount - this.getBalance()
        },
        getBalance() {
            return this.appUserInfo.rechargeBalance + this.appUserInfo.giveBalance + this.appUserInfo.welfareBalance
        },
        // 处理现金金额
        handelPrice(e) {
            return Math.round(e * 100) / 100
        },
        calculateTotalPrice() {
            var price = 0
            for (let i = 0; i < this.orderClothItemDTOS.length; i++) {
                price += this.calculateClothSpecialPrice(i) + this.orderClothItemDTOS[i].defaultPrice
            }
            return price
        },
        calculateClothSpecialPrice(index) {
            var specialPrice = 0
            if (this.orderClothItemDTOS[index].orderClothCraftDTOS && this.orderClothItemDTOS[index].orderClothCraftDTOS.length > 0) {
                for (let i = 0; i < this.orderClothItemDTOS[index].orderClothCraftDTOS.length; i++) {
                    specialPrice += this.orderClothItemDTOS[index].orderClothCraftDTOS[i].price
                }
            }

            if (this.orderClothItemDTOS[index].isHedging == 'Y') {
                specialPrice += this.orderClothItemDTOS[index].hedgingPrice * 0.01
            }
            for (let i = 0; i < this.clothSpeeds.length; i++) {
                if (this.orderClothItemDTOS[index].clothSpeedId == this.clothSpeeds[i].id) {
                    specialPrice += this.orderClothItemDTOS[index].defaultPrice * (this.clothSpeeds[i].multiple - 1)
                    break
                }
            }
            return specialPrice
        },
        calculateDeliveryPrice() {
            let totalPrice = this.calculateTotalPrice()
            let freeAmount = 0
            for (let i = 0; i < this.deliveryFree.length; i++) {
                if (totalPrice > this.deliveryFree[i].min && totalPrice <= this.deliveryFree[i].max) {
                    freeAmount = this.deliveryFree[i].value
                    break
                }
            }
            // if (this.calculateTotalPrice() >= 100) {
            //     return 0
            // }
            var delivery = 0
            if (this.orderForm.isAppointment === 'Y') {
                delivery += this.deliveryAmount
            }
            // if (this.orderForm.takeClothWay && this.orderForm.takeClothWay == '1') {
            //     delivery += this.deliveryAmount
            // }
            // if (this.orderForm.sendClothWay && this.orderForm.sendClothWay == '1') {
            //     delivery += this.deliveryAmount
            // }
            this.deliveryFreeAmount = freeAmount
            return delivery - freeAmount
        },
        //计算当前所有优惠金额
        calculateTotalDiscountAmount() {
            var totalDiscountAmount = this.orderForm.cashDeductAmount ? this.orderForm.cashDeductAmount : 0
            this.orderClothItemDTOS.forEach((cloth) => {
                totalDiscountAmount = totalDiscountAmount + cloth.deductAmount
            })
            if (this.activity.id) {
                totalDiscountAmount = totalDiscountAmount + this.calculateTotalDiscountByActivity(this.activity, 'A1')
            }
            return Math.round(totalDiscountAmount * 100) / 100
        },
        // 计算优惠券优惠金额
        calculateTotalDiscountAmountByCoupon() {
            var totalDiscountAmount = 0
            this.orderClothItemDTOS.forEach((cloth) => {
                totalDiscountAmount = Math.round((totalDiscountAmount + cloth.deductAmount) * 100) / 100
            })
            return totalDiscountAmount
        },

        // 计算平台活动优惠金额
        calculateTotalDiscountByActivity(e) {
            if (e.payScope == 2 && this.orderForm.payType && this.orderForm.payType != 3) {
                return 0
            }
            if (e.payScope == 1 && this.orderForm.payType && this.orderForm.payType == 3) {
                return 0
            }
            let activityAmount = 0
            if (e.clothScope == 0) {
                let total = this.calculateTotalPrice() + this.calculateDeliveryPrice() - this.calculateTotalDiscountAmountByCoupon()
                activityAmount = total * (1 - e.discount)
            }
            console.log('平台活动', this.orderClothItemDTOS, e.activityClothItemVOList)

            if (e.clothScope == 1) {
                for (let i = 0; i < e.activityClothItemVOList.length; i++) {
                    let cloth = e.activityClothItemVOList[i]
                    for (let j = 0; j < this.orderClothItemDTOS.length; j++) {
                        let goods = this.orderClothItemDTOS[j]
                        console.log(goods.id, Number(cloth.clothId))
                        if (goods.id === cloth.clothId) {
                            activityAmount += goods.totalPrice * (1 - cloth.discount)
                        }
                    }
                }
                // let total = this.calculateTotalPrice() + this.calculateDeliveryPrice() - this.calculateTotalDiscountAmountByCoupon()
                // activityAmount = total * e.discount
                console.log('折扣金额', activityAmount)
            }
            return Math.round(activityAmount * 100) / 100
        },

        //计算出去现金券其余的优惠金额
        calculateTotalDiscountAmountWithoutCashAmount() {
            var totalDiscountAmount = 0
            this.orderClothItemDTOS.forEach((cloth) => {
                totalDiscountAmount = totalDiscountAmount + cloth.deductAmount
            })
            if (this.activity.id) {
                totalDiscountAmount = totalDiscountAmount + this.calculateTotalDiscountByActivity(this.activity)
            }

            return Math.round(totalDiscountAmount * 100) / 100
        },
        /**
         * 计算当前优惠券抵扣明细
         */
        calculateCouponDiscountInfo() {
            var deductAmount = 0
            this.changeDiscountCouponSelectCloths.forEach((item) => {
                deductAmount += item.deductAmount
            })
            return deductAmount
        },

        onCouponTabChange(tab, event) {
            console.log('tab.index:' + tab.index)
            // if(tab.index == '1'){
            //   this.$refs['couponRef'].focus()
            // }
        },
        onSelectCoupon() {
            if (this.deductCouponVOS.length == 0) {
                this.$message.error('没有可选择的优惠券')
                return
            }
            this.setCouponOpen = true
        },
        // 选择可优惠金额
        changeCouponDiscountCloth(index) {
            this.changeDiscountCouponCanSelectCloths = this.selectCoupons[index].applyCloths.concat()
            this.changeDiscountCouponCanSelectCloths.forEach((item) => {
                let deductAmount1 = this.handelPrice(item.totalPrice * (1 - this.selectCoupons[index].discountRate / 100))
                let deductAmount = deductAmount1 > this.selectCoupons[index].deductAmount ? this.selectCoupons[index].deductAmount : deductAmount1
                item.deductAmount = deductAmount
                item.isSelected = item.id == this.selectCoupons[index].orderCouponClothDTOS[0].id
            })
            this.changeDiscountCouponTitle = '修改『' + this.selectCoupons[index].couponTypeTitle + '』可抵扣衣物'
            this.changeDiscountCouponOpen = true
        },
        onDiscountCouponSelect(e) {
            this.orderForm.discountCoupon = this.discountCouponVOS.find((item) => item.id == e)
        },
        getDiscountClothList() {
            var cloths = []
            if (!this.orderForm.discountCoupon) {
                return cloths
            }
            this.orderClothItemDTOS.forEach((cloth) => {
                if (this.orderForm.discountCoupon.appCouponTypeApplyClothVOS) {
                    if (this.orderForm.discountCoupon.appCouponTypeApplyClothVOS.find((item) => item.clothItemId == cloth.id)) {
                        cloths.push(cloth)
                    }
                }
            })
            return cloths
        },
        calculateClothName(index) {
            var clothName = this.orderClothItemDTOS[index].name
            this.orderClothItemDTOS[index].orderClothTypeDTOS.forEach((item) => {
                if (item.clothTypeCode == '0') {
                    clothName += ' - 加厚'
                }
                if (item.clothTypeCode == '0') {
                    clothName += ' - 羊绒'
                }
                if (item.clothTypeCode == '0') {
                    clothName += ' - 真丝'
                }
                if (item.clothTypeCode == '0') {
                    clothName += ' - 儿童'
                }
            })
            return clothName
        },
        calculateClothNameByInfo(cloth) {
            var clothName = cloth.name
            cloth.orderClothTypeDTOS.forEach((item) => {
                if (item.clothTypeCode == '0') {
                    clothName += ' - 加厚'
                }
                if (item.clothTypeCode == '0') {
                    clothName += ' - 羊绒'
                }
                if (item.clothTypeCode == '0') {
                    clothName += ' - 真丝'
                }
                if (item.clothTypeCode == '0') {
                    clothName += ' - 儿童'
                }
            })
            return clothName
        },

        onSelectActivityItem(e) {
            if (e.id) {
                let activityAmount = 0
                if (e.clothScope == 0) {
                    let total = this.calculateTotalPrice() + this.calculateDeliveryPrice() - this.calculateTotalDiscountAmountByCoupon()
                    activityAmount = total * (1 - e.discount)
                }
                if (e.clothScope == 1) {
                    let total = this.calculateTotalPrice() + this.calculateDeliveryPrice() - this.calculateTotalDiscountAmountByCoupon()
                    activityAmount = total * (1 - e.discount)
                }
                e.activityAmount = Math.round(activityAmount * 100) / 100
            }
            console.log(e)
            this.activity = e
        },

        onSelectCouponItem(index) {
            var coupon = this.deductCouponVOS[index]
            if (this.selectCoupons.length) {
                this.removeSelectCoupon(0)
            }
            console.log('优惠券', coupon)

            // 折扣券
            coupon.orderCouponClothDTOS = []

            //找出优惠券适配优惠的衣服
            var applyCloths = []
            if (coupon.applyCloths) {
                coupon.applyCloths.forEach((item) => {
                    for (let i = 0; i < this.orderClothItemDTOS.length; i++) {
                        var cloth = this.orderClothItemDTOS[i]
                        if (cloth.id != item.clothItemId || cloth.totalPrice <= 0) {
                            continue
                        }
                        applyCloths.push(cloth)
                    }
                })
            }

            //排序，按照订单剩余需要支付的金额降序
            applyCloths.sort((a, b) => {
                return b.totalPrice - a.totalPrice
            })
            this.orderClothItemDTOS.sort((a, b) => {
                return b.totalPrice - a.totalPrice
            })

            coupon.applyCloths = coupon.useScope == 2 ? applyCloths : this.orderClothItemDTOS

            if (coupon.useScope == 2 && !applyCloths.length) {
                this.$message.error('没有指定衣物，无法使用该优惠券')
                return
            }
            if (coupon.discountWay == 2) {
                if (coupon.isUnique == 'Y') {
                    // 单件
                    let cloth = coupon.applyCloths[coupon.applyCloths.length - 1]
                    // 获取可用衣物里的最小价格
                    let deductAmount1 = cloth.totalPrice * (1 - coupon.discountRate / 100)
                    let deductAmount = deductAmount1 > coupon.deductAmount ? coupon.deductAmount : deductAmount1
                    coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
                    cloth.deductAmount = deductAmount
                } else {
                    // 全部
                    let list = coupon.applyCloths
                    for (let i = 0; i < list.length; i++) {
                        let cloth = list[i]
                        let deductAmount1 = this.handelPrice(cloth.totalPrice * (1 - coupon.discountRate / 100))
                        let deductAmount = deductAmount1 > coupon.deductAmount ? coupon.deductAmount : deductAmount1
                        coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
                        cloth.deductAmount = deductAmount
                    }
                }
            }
            if (coupon.discountWay == '0') {
                //抵扣
                if (coupon.isUnique == 'Y') {
                    //单件，只减一件
                    var cloth = applyCloths[0]
                    //抵扣所有衣服里金额最大的
                    if (cloth.totalPrice - cloth.deductAmount >= coupon.deductAmount) {
                        coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: coupon.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
                        cloth.deductAmount += coupon.deductAmount
                    } else {
                        coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice - cloth.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
                        cloth.deductAmount = cloth.totalPrice
                    }
                } else {
                    //非单件，可减多件
                    var deductAmount = coupon.deductAmount
                    for (let i = 0; i < coupon.applyCloths.length; i++) {
                        //如果优惠券可抵扣金额用完
                        if (deductAmount <= 0) {
                            break
                        }
                        var cloth = coupon.applyCloths[i]
                        if (cloth.totalPrice - cloth.deductAmount >= deductAmount) {
                            coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
                            cloth.deductAmount += deductAmount
                            deductAmount = 0
                        } else {
                            coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice - cloth.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
                            cloth.deductAmount = cloth.totalPrice
                            deductAmount -= cloth.totalPrice - cloth.deductAmount
                        }
                    }
                }
            }
            // else
            if (coupon.discountWay == '1') {
                //满减
                //       console.log(applyCloths, coupon.minAmount)
                // if (coupon.useScope === 2 && applyCloths.length < parseInt(coupon.minAmount)) {
                //     //未满足满减条件
                //     this.$message.error('未满足满减条件')
                //     return
                // }
                if (coupon.applyCloths.length < parseInt(coupon.minAmount)) {
                    this.$message.error('未满足满减条件')
                    return
                }

                if (coupon.isUnique !== 'Y') {
                    //单件，只减一件
                    var cloth = coupon.applyCloths[coupon.applyCloths.length - 1]
                    coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice, clothName: this.calculateClothNameByInfo(cloth) })
                    cloth.deductAmount = cloth.totalPrice
                } else {
                    //非单件，可减多件
                    var count = parseInt(coupon.applyCloths.length / parseInt(coupon.minAmount)) * parseInt(coupon.deductAmount)
                    for (let i = 0; i < count; i++) {
                        var cloth = coupon.applyCloths[coupon.applyCloths.length - 1 - i]
                        coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice, clothName: this.calculateClothNameByInfo(cloth) })
                        cloth.deductAmount = cloth.totalPrice
                    }
                }
            }
            //     this.deductCouponVOS.splice(index, 1)
            this.selectCoupons = [coupon]
            this.setCouponOpen = false
            this.$emit('initOrderList', this.orderClothItemDTOS)
        },
        //去除已选择的优惠券
        removeSelectCoupon(index) {
            var coupon = this.selectCoupons[index]
            //将优惠券放回未选择的数组中
            // if (coupon.discountWay == '2') {
            //     this.discountCouponVOS.push(coupon)
            // } else {
            //     this.deductCouponVOS.push(coupon)
            // }
            this.selectCoupons.splice(index, 1)

            //重置这条优惠券给衣服的优惠信息
            var orderCouponClothDTOS = coupon.orderCouponClothDTOS
            coupon.orderCouponClothDTOS = []
            orderCouponClothDTOS.forEach((selectItem) => {
                this.calculateClothDiscountAmount(selectItem.clothIndex)
            })
        },
        /** 提交按钮 */
        submitForm(payTimeType) {
            if (!this.$refs.payForm) {
                this.$message.error('表单实例不存在');
                return;
            }

            if (!this.orderForm.payType && payTimeType == 0 && this.orderForm.isAppointment!= 'Y') {
                this.$message.error('请选择收款方式');
                return;
            }

            this.$refs.payForm.validate(valid => {
                if (valid) {
                    const params = { ...this.orderForm };
                    params.appUserId = this.appUserInfo?.id;
                    params.orderClothItemDTOS = this.orderClothItemDTOS.concat();
                    params.orderClothItemDTOS.forEach(item => {
                        item.clothItemName = item.name;
                    });

                    params.orderCouponDTOS = this.selectCoupons.concat();
                    params.isSpecial = params.isSpecial ? 'Y' : 'N';
                    params.payTimeType = payTimeType;

                    if (payTimeType === 1) {
                        params.payType = 0;
                    }

                    if (this.calculateTotalDiscountByActivity(this.activity, 'A3')) {
                        params.activityId = this.activity.id;
                        params.activityDiscountAmount = this.calculateTotalDiscountByActivity(this.activity, 'A4');
                    }

                    params.sendClothWay = this.orderForm.sendClothWay;

                    if (this.orderForm.payType == 3) {
                        if (this.getBalance() == 0) {
                            this.$message.error('余额不足');
                            return
                        }
                        if (this.getOtherPayPrice() > 0) {
                            params.memberPayAmount = this.getBalance()
                            params.payType = 8
                            params.otherPayType = this.otherPayType
                        }
                    }

                    // 修改 loading 配置，只覆盖表单区域
                    const loading = this.$loading({
                        target: '.cash-container', // 指定 loading 覆盖的目标元素
                        lock: true,
                        text: '正在处理支付...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    collectCloth(params)
                        .then(res => {
                            loading.close();
                            // 直接打开支付状态弹窗，不需要延时
                          //0=微信，1=支付宝，2=现金，3=余额
                        //   && this.orderForm.isAppointment != 'Y'
                          if (payTimeType == 0) {
                            if (this.orderForm.payType === '0') {
                                res.data.authCode = this.orderForm.authCode
                                this.$refs.payStatusPopup.open(0, {...params, ...res.data}, this.appUserInfo);
                            } else if (this.orderForm.payType === '2') {
                                this.$refs.payStatusPopup.open(2, {...params, ...res.data}, this.appUserInfo);
                            } else if (this.orderForm.payType === '3') {
                              this.$refs.payStatusPopup.open(3, {...params, ...res.data}, this.appUserInfo);
                            }
                          } else {
                            this.$refs.payStatusPopup.open(6, {...params, ...res.data}, this.appUserInfo);
                          }
                           
                        })
                        .catch(e => {
                            console.log("下单异常",e);
                            loading.close();
                            this.$refs.payStatusPopup.open(4, { payMsg: e.data.msg || '支付失败' });
                        });
                }
            });
        },
        removeCouponRelateCloth(index) {
            var cloth = this.changeDiscountCouponSelectCloths[index].cloth
            cloth.deductAmount = cloth.deductAmount - this.changeDiscountCouponSelectCloths[index].deductAmount
            this.changeDiscountCouponCanSelectCloths.push(cloth)
            this.changeDiscountCouponSelectCloths.splice(index, 1)
        },
        //选择优惠券关联的衣服
        addCouponRelateCloth(index) {
            this.changeDiscountCouponCanSelectCloths.forEach((item, i) => {
                item.clothIndex = item.index
                ;(item.clothName = this.calculateClothNameByInfo(item)), (item.isSelected = i === index)
            })
            this.changeDiscountCouponCanSelectCloths = JSON.parse(JSON.stringify(this.changeDiscountCouponCanSelectCloths))
            // var hasDeductAmount = this.calculateCouponDiscountInfo()
            // if (this.selectCoupons[this.changeDiscountCouponIndex].deductAmount - hasDeductAmount <= 0) {
            //     this.$message.error('抵扣金额已用完，无法抵扣其他衣物')
            //     return
            // }
            // if (this.selectCoupons[this.changeDiscountCouponIndex].isUnique == 'Y' && this.changeDiscountCouponSelectCloths.length > 0) {
            //     this.$message.error('该优惠券为单件抵扣，无法抵扣第二件衣物')
            // }
            // var coupon = this.selectCoupons[this.changeDiscountCouponIndex]
            // var cloth = this.changeDiscountCouponCanSelectCloths[index]

            // if (coupon.isUnique == 'Y') {
            //     //单件，只减一件
            //     //抵扣所有衣服里金额最大的
            //     if (cloth.totalPrice - cloth.deductAmount >= coupon.deductAmount) {
            //         this.changeDiscountCouponSelectCloths.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: coupon.deductAmount, clothName: this.calculateClothNameByInfo(cloth), cloth: cloth })
            //         cloth.deductAmount += coupon.deductAmount
            //     } else {
            //         this.changeDiscountCouponSelectCloths.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice - cloth.deductAmount, clothName: this.calculateClothNameByInfo(cloth), cloth: cloth })
            //         cloth.deductAmount = cloth.totalPrice
            //     }
            // } else {
            //     //非单件，可减多件
            //     var deductAmount = this.selectCoupons[this.changeDiscountCouponIndex].deductAmount - hasDeductAmount
            //     if (cloth.totalPrice - cloth.deductAmount >= deductAmount) {
            //         this.changeDiscountCouponSelectCloths.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: deductAmount, clothName: this.calculateClothNameByInfo(cloth), cloth: cloth })
            //         cloth.deductAmount += deductAmount
            //     } else {
            //         this.changeDiscountCouponSelectCloths.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice - cloth.deductAmount, clothName: this.calculateClothNameByInfo(cloth), cloth: cloth })
            //         cloth.deductAmount = cloth.totalPrice
            //     }
            // }

            // this.changeDiscountCouponCanSelectCloths.splice(index, 1)
        },
        submitChangeCouponRelateCloth() {
            // let changeDiscountCouponSelectCloths = [];
            let item = this.changeDiscountCouponCanSelectCloths.find((object) => object.isSelected)
            this.selectCoupons[0].orderCouponClothDTOS = [item]
            // this.changeDiscountCouponCanSelectCloths.forEach((item) => {
            //     this.calculateClothDiscountAmount(item.index)
            // })
            // this.changeDiscountCouponSelectCloths.forEach((item) => {
            //     this.calculateClothDiscountAmount(item.clothIndex)
            // })
            this.orderClothItemDTOS.forEach((e) => {
                e.deductAmount = item.clothItemId == e.id ? item.deductAmount : 0
            })
            this.selectCoupons = this.selectCoupons.concat()
            // this.orderClothItemDTOS = this.orderClothItemDTOS.concat()
            this.changeDiscountCouponOpen = false
        },
        //计算某一件衣服的优惠金额，并配置到orderClothItemDTOS中
        calculateClothDiscountAmount(index) {
            var cloth = this.orderClothItemDTOS[index]
            cloth.deductAmount = 0
            this.selectCoupons.forEach((i) => {
                var selectCloth = i.orderCouponClothDTOS.find((item) => item.clothIndex == cloth.index)
                if (selectCloth) {
                    cloth.deductAmount = cloth.deductAmount + selectCloth.deductAmount
                }
            })
            this.orderClothItemDTOS[index] = cloth
            this.$emit('initOrderList', this.orderClothItemDTOS)
            // this.orderClothItemDTOS = this.orderClothItemDTOS.concat()
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        getTagType(discountWay) {
            switch (discountWay) {
                case '0':
                    return 'success'
                case '1':
                    return 'warning'
                case '2':
                    return 'info'
                default:
                    return ''
            }
        },
        getDiscountTypeLabel(discountWay) {
            switch (discountWay) {
                case '0':
                    return '抵扣券'
                case '1':
                    return '满减券'
                case '2':
                    return '折扣券'
                default:
                    return ''
            }
        },
        canModifyCoupon(coupon, index) {
            return index === this.selectCoupons.length - 1 && coupon.discountWay === '2' && coupon.isUnique === 'Y'
        },
        // 处理支付成功
        handlePaySuccess() {
            // 通知父组件支付成功，但不关闭收银台
            // this.$emit('onPaySuccess', {
            //     keepDialogOpen: true
            // });
        },
        // 处理确认
        handleConfirm(orderInfo) {
            console.log("SAAAS")
            // 处理确认事件
            this.$emit('confirm', orderInfo);
        }
    }
}
</script>

<style>


</style>

<style lang="scss" scoped>
.cash-cloth-container {
    height: 100%;
    .dialog-container {
        .discount-cloth-dialog {
            .dialog-header {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 15px;
            }
        }
    }

    .cash-container {
        display: flex;
        gap: 20px;
        height: 100%;
        padding: 5px;

        .info-section {
            width: 300px; /* 减小左侧宽度 */
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .discount-section {
            flex: 1;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            .title {
                font-size: 18px;
                font-weight: bold;
            }
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;

            .label {
                color: #606266;
            }

            .value {
                font-weight: bold;

                &.price {
                    color: #f56c6c;
                    font-size: 20px;
                }

                &.discount {
                    color: #67c23a;
                }

                &.balance {
                    color: #409eff;
                }
            }
        }

        .total {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px dashed #dcdfe6;

            .label {
                font-size: 16px;
            }
        }

        .payment-methods {
            margin: 10px 0;
            text-align: center;
        }

        .payment-actions {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;
        }

        .scan-input {
            margin: 20px 0;
        }

        .coupon-actions {
            margin-bottom: 20px;
            text-align: right;
        }
    }

    .selected-coupons {
        .discount-content {
            font-size: 13px;
            .amount {
                color: #f56c6c;
                font-weight: bold;
            }
        }

        .cloth-list {
            max-height: 300px;
            overflow-y: auto;

            .cloth-item {
                display: flex;
                align-items: center;
                padding: 5px 0;
                border-bottom: 1px solid #ebeef5;

                .index {
                    width: 40px;
                    color: #909399;
                }

                .name {
                    flex: 1;
                    margin: 0 10px;
                }

                .amount {
                    color: #f56c6c;
                }
            }
        }

        .cloth-summary {
            cursor: pointer;
            color: #409eff;

            &:hover {
                opacity: 0.8;
            }
        }
    }

    .payment-status-container {
        position: relative;
        z-index: 3000;
    }
}
</style>

<style>
.payStatusPopup {
    .el-dialog__wrapper {
        z-index: 3000 !important;
    }
    .el-dialog {
        z-index: 3001 !important;
    }
    .v-modal {
        z-index: 2999 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        opacity: 1 !important;
    }
}
</style>

<style>
/* 主题色定义 */
:root {
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
}

/* 表格视觉优化 */
.el-table {
  /* 表头样式 */
  th {
    background-color: #F5F7FA !important;
    color: #606266;
    font-weight: 600;
    height: 48px;
  }

  /* 斑马纹 */
  .el-table__row--striped {
    background-color: #FAFAFA;
  }

  /* 悬停效果 */
  .el-table__row:hover {
    background-color: #F5F7FA;
  }
}

/* 按钮样式优化 */
.el-button {
  &--primary {
    font-weight: 500;
  }

  &--text {
    padding: 4px 8px;

    &:hover {
      background: rgba(64,158,255,0.1);
      border-radius: 4px;
    }
  }
}
</style>
