<template>
    <div class="app-container">
        <el-row type="flex" justify="space-between">
            <!-- 右侧内容 -->
            <el-col :span="24">
                <el-tabs type="border-card">
                    <!-- 客户 -->
                    <el-tab-pane label="客户">
                        <el-col>
                            <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddMember">添加会员
                            </el-button>
                        </el-col>
                        <el-table :data="memberGroupList" stripe style="width: 100%" v-loading="loading">
                            <el-table-column label="会员id" align="center" prop="memberId" />
                            <el-table-column label="昵称" align="center" prop="nickName" />
                            <el-table-column label="状态" align="center" prop="status">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.member_status" :value="scope.row.status" />
                                </template>
                            </el-table-column>
                            <el-table-column label="头像" align="center" prop="avatarUrl">

                                <template slot-scope="scope">
                                    <el-image style="height: 50px;width: 50px"
                                        :src="scope.row.avatarUrl === null ? defaultImg[0].img : scope.row.avatarUrl"
                                        :preview-src-list='[scope.row.avatarUrl === null ? defaultImg[0].img : scope.row.avatarUrl]' />
                                </template>
                            </el-table-column>
                            <el-table-column label="手机号" align="center" prop="mobileNumber" />
                            <el-table-column label="操作" align="center" width="200">

                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                        @click="deleteMember(scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="getMemberList"
                            style="margin-bottom: 20px" />
                    </el-tab-pane>

                    <!-- 交易明细 -->
                    <el-tab-pane label="交易明细">
                        <!--搜索条件-->
                        <el-form :model="from" ref="queryForm" size="small" :inline="true" v-show=true
                            @submit.native.prevent>
                            <el-form-item label="订单编号" prop="orderCode" style="width: 300px">
                                <el-input v-model="from.orderCode" placeholder="请输入订单编号" clearable
                                    @keyup.enter.native="handleQuery" />
                            </el-form-item>

                            <el-form-item label="订单状态" prop="orderStatus" style="width: 230px">
                                <el-select v-model="from.orderStatus" placeholder="请选择订单状态" clearable
                                    style="width: 140px">
                                    <el-option v-for="dict in dict.type.order_status" :key="dict.value"
                                        :label="dict.label" :value="dict.value" />
                                </el-select>
                            </el-form-item>

                            <el-form-item label="手机号码" prop="mobileNumber" style="width: 300px">
                                <el-input v-model="from.mobileNumber" placeholder="请输入手机号码" clearable
                                    @keyup.enter.native="handleQuery" />
                            </el-form-item>

                            <el-form-item label="创建时间" style="width: 330px">
                                <el-date-picker v-model="createTimeRange" style="width: 240px"
                                    value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                                    type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                    :clearable="true" />
                            </el-form-item>

                            <el-form-item label="结算时间" style="width: 330px">
                                <el-date-picker v-model="settleTimeRange" style="width: 240px"
                                    value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                                    type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                    :clearable="true"></el-date-picker>
                            </el-form-item>
                        </el-form>

                        <el-row :gutter="10" class="mb8">
                            <el-col :span="1.5">
                                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                                </el-button>
                            </el-col>
                            <el-col :span="1.5">
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置
                                </el-button>
                            </el-col>
                            <el-col :span="1.5">
                                <el-button type="warning" plain icon="el-icon-download" size="mini"
                                    @click="handleExport" v-hasPermi="['order:order:export']">导出
                                </el-button>
                            </el-col>
                        </el-row>
                        <ul class="uls">
                            <li v-for="totalDate in totalDateList">
                                {{ totalDate.dateDescription }}期间，总用电量{{ totalDate.sumUsedElectricity }}度，总消费金额{{
                totalDate.sumOrderAmount
            }}元，总结算金额{{ totalDate.sumSettleAmount }}元
                            </li>
                        </ul>

                        <!--结果展示-->
                        <el-table :data="orderListResult" stripe style="width: 100%" v-loading="loading">
                            <el-table-column label="订单编号" align="center" prop="orderCode" width="280px">

                                <template slot-scope="scope">
                                    <router-link :to="'/order/index/orderDetail/' + scope.row.orderCode"
                                        class="link-type">
                                        <span>{{ scope.row.orderCode }}</span>
                                    </router-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe" />
                            <el-table-column label="会员昵称" align="center" prop="nickName" width="120px" />
                            <el-table-column label="电话号码" align="center" prop="mobileNumber" width="120px" />
                            <el-table-column label="站点" align="center" prop="stationName" />
                            <el-table-column label="充电桩枪口号" align="center" prop="pileConnectorCode" width="200px" />
                            <el-table-column label="微信商户订单号" align="center" prop="outTradeNo" width="165px" />
                            <el-table-column label="启动方式" align="center" prop="startMode" width="100px">

                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.start_mode" :value="scope.row.startMode" />
                                </template>
                            </el-table-column>
                            <el-table-column label="支付方式" align="center" prop="payMode">

                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.pay_mode" :value="scope.row.payMode" />
                                </template>
                            </el-table-column>
                            <el-table-column label="支付状态" align="center" prop="payStatus">

                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.pay_status" :value="scope.row.payStatus" />
                                </template>
                            </el-table-column>
                            <el-table-column label="支付金额" align="center" prop="payAmount" />
                            <el-table-column label="充电度数" align="center" prop="chargingDegree" width="100px" />
                            <el-table-column label="起始soc" align="center" prop="startSoc" />
                            <el-table-column label="终止soc" align="center" prop="endSoc" />
                            <el-table-column label="开始充电时间" align="center" prop="chargeStartTime" width="180" />
                            <el-table-column label="结束充电时间" align="center" prop="chargeEndTime" width="180" />
                            <el-table-column label="订单总金额" align="center" prop="orderAmount" width="100px" />
                        </el-table>
                        <!--分页-->
                        <pagination v-show="getTotal > 0" :total="getTotal" :page.sync="from.pageNum"
                            :limit.sync="from.pageSize" @pagination="getOrderList" style="margin-bottom: 20px" />
                    </el-tab-pane>

                    <!-- 站点 -->
                    <el-tab-pane label="站点">
                        <el-col>
                            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addasite">添加站点
                            </el-button>
                        </el-col>
                        <el-table :data="sitesList" stripe style="width: 100%" v-loading="loading">
                            <el-table-column label="站点名称" align="center" prop="stationName" width="300" />
                            <el-table-column label="备注" align="center" prop="templateRemark" />
                            <el-table-column label="描述" align="center" prop="templateDesc" />
                            <el-table-column label="操作" align="center" width="200">

                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-edit"
                                        @click="addasite(scope.row)">修改
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                        @click="handleDelete(scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <pagination v-show="stationTotal > 0" :total="stationTotal" :page.sync="queryStation.pageNum"
                            :limit.sync="queryStation.pageSize" @pagination="getStationList"
                            style="margin-bottom: 20px" />
                    </el-tab-pane>

                    <!-- 车辆列表 -->
                    <el-tab-pane label="车辆列表">
                        <el-table :data="carList" stripe style="width: 100%" v-loading="loading">
                            <el-table-column label="车牌号" align="center" prop="licensePlateNumber" />
                            <el-table-column label="VIN码" align="center" prop="vinCode" />
                            <el-table-column label="总消费金额" align="center" prop="totalConsumptionAmount" />
                            <el-table-column label="更新时间" align="center" prop="lastDate" />
                            <el-table-column label="操作" align="center" width="200">

                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="details(scope.row)">明细</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <pagination v-show="consumptionTotal > 0" :total="consumptionTotal"
                            :page.sync="queryCar.pageNum" :limit.sync="queryCar.pageSize"
                            @pagination="getQueryMemberGroupConsumptionList" style="margin-bottom: 20px" />
                    </el-tab-pane>

                </el-tabs>
            </el-col>
        </el-row>
        <!--添加会员-->
        <el-dialog title="添加会员" :visible.sync="openAddMember" :before-close="cancel" width="500px" append-to-body>
            <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加修改站点 -->
        <el-dialog :title="getTitle" :visible.sync="getSite" :before-close="getCancel" width="1000px" append-to-body>
            <el-form ref="exchangeRateB" :model="exchangeRateB" :rules="dialogRules">
                <el-form-item label="请选择站点">
                    <el-select v-model="selectSite" placeholder="请选择站点" filterable :disabled="getDisabled"
                        style="width:300px" @change="queryInfo">
                        <el-option v-for="(station, index) in stationList" :key="index" :label="station.stationName"
                            :value="station.id" />
                    </el-select>
                </el-form-item>
                <el-row :gutter="20" style="margin-top: 15px;">
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="padding-left: 25px;"> 时段</div>
                    </el-col>
                    <el-col :span="4">
                        <div style="text-align: center;" class="grid-content bg-purple">原电费(元/度)</div>
                    </el-col>
                    <el-col :span="4">
                        <div style="text-align: center;" class="grid-content bg-purple">原服务费(元/度)</div>
                    </el-col>
                    <el-col :span="4">
                        <div style="text-align: center;" class="grid-content bg-purple">电费(元/度)</div>
                    </el-col>
                    <el-col :span="4">
                        <div style="text-align: center;" class="grid-content bg-purple">服务费(元/度)</div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 15px;">
                    <el-col :span="4">
                        <el-button type="danger">尖时段</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="electricityPriceA">
                            <el-input v-model="exchangeRate.electricityPriceA" type="number" class="clearInputScore"
                                placeholder="0" clearable disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="servicePriceA">
                            <el-input v-model="exchangeRate.servicePriceA" placeholder="0" clearable type="number"
                                class="clearInputScore" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyServiceA">
                            <el-input v-model="exchangeRateB.modifyServiceA" type="number" class="clearInputScore"
                                placeholder="0" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyElectricityA">
                            <el-input v-model="exchangeRateB.modifyElectricityA" placeholder="0" clearable type="number"
                                class="clearInputScore" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 峰 -->
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-button type="warning">峰时段</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="electricityPriceB">
                            <el-input v-model="exchangeRate.electricityPriceB" type="number" class="clearInputScore"
                                placeholder="0" clearable disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="servicePriceB">
                            <el-input v-model="exchangeRate.servicePriceB" placeholder="0" clearable type="number"
                                class="clearInputScore" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyServiceB">
                            <el-input v-model="exchangeRateB.modifyServiceB" type="number" class="clearInputScore"
                                placeholder="0" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyElectricityB">
                            <el-input v-model="exchangeRateB.modifyElectricityB" placeholder="0" clearable type="number"
                                class="clearInputScore" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 平 -->
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-button type="success">平时段</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="electricityPriceC">
                            <el-input v-model="exchangeRate.electricityPriceC" type="number" class="clearInputScore"
                                placeholder="0" clearable disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="servicePriceC">
                            <el-input v-model="exchangeRate.servicePriceC" placeholder="0" clearable type="number"
                                class="clearInputScore" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyServiceC">
                            <el-input v-model="exchangeRateB.modifyServiceC" type="number" class="clearInputScore"
                                placeholder="0" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyElectricityC">
                            <el-input v-model="exchangeRateB.modifyElectricityC" placeholder="0" clearable type="number"
                                class="clearInputScore" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 谷 -->
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-button type="info">谷时段</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="electricityPriceD">
                            <el-input v-model="exchangeRate.electricityPriceD" type="number" class="clearInputScore"
                                placeholder="0" clearable disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="servicePriceD">
                            <el-input v-model="exchangeRate.servicePriceD" placeholder="0" clearable type="number"
                                class="clearInputScore" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyServiceD">
                            <el-input v-model="exchangeRateB.modifyServiceD" type="number" class="clearInputScore"
                                placeholder="0" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="modifyElectricityD">
                            <el-input v-model="exchangeRateB.modifyElectricityD" placeholder="0" clearable type="number"
                                class="clearInputScore" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <span>24小时尖峰平谷分布设置</span>
                <div>
                    <el-tag v-for="item in tagsTime" :key="item.label" :type="item.type"
                        style="margin: 10px 10px 10px 0; width: 160px; height: 30px ;line-height:30px;text-align: center;"
                        effect="dark">
                        {{ item.label }}
                    </el-tag>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="getCancel">取 消</el-button>
                <el-button type="primary" @click="siteConfirmation">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 车辆列表明细 -->
        <el-dialog title="订单明细" :visible.sync="vehicleDetails" :before-close="closeDetails" width="1800px"
            append-to-body>
            <el-table :data="closeList" stripe style="width: 100%" v-loading="loading">
                <el-table-column label="订单编号" align="center" prop="orderCode" />
                <el-table-column label="站点名称" align="center" prop="stationName" />
                <el-table-column label="昵称" align="center" prop="nickName" />
                <el-table-column label="手机号" align="center" prop="mobileNumber" />
                <el-table-column label="实时充电度数" align="center" prop="realTimeChargingDegree" />
                <el-table-column label="实时消费金额" align="center" prop="realTimeAmount" />
                <el-table-column label="起始SOC" align="center" prop="startSoc" />
                <el-table-column label="终止SOC" align="center" prop="endSoc" />
                <el-table-column label="开始时间" align="center" prop="chargeStartTime" />
                <el-table-column label="结束充电时间" align="center" prop="chargeEndTime" />
            </el-table>
            <!--分页-->
            <pagination v-show="closeTotal > 0" :total="closeTotal" :page.sync="detailParameters.pageNum"
                :limit.sync="detailParameters.pageSize" @pagination="getQueryConsumptionDetailListByVinCode"
                style="margin-bottom: 20px" />
        </el-dialog>
    </div>
</template>

<script>
import { addMember, queryMemberList, preferentialTemplates, queryStationList, removeStationFromMemberGroup, removeMemberFromMemberGroup, queryMemberGroupConsumptionList, queryConsumptionDetailListByVinCode } from "@/api/member/memberGroup";
import { listOrder, totalData } from "@/api/order/order";
import { getStationListByMerchantId } from "@/api/pile/station";
import { queryStationBillingTemplateList, getTemplate, queryStationPreferentialBillingTemplateList, updateBillingTemplate } from "@/api/billing/template.js";
import { getDay } from "@/utils/common";

export default {
    name: 'JsowellUiDetail',
    dicts: ['member_status', 'start_mode', 'pay_mode', 'pay_status', "order_status"],
    data() {
        // 自定义校验
        var validatePassA = (rule, value, callback) => {
            if (value > this.exchangeRate.electricityPriceA) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        var validatePassB = (rule, value, callback) => {
            if (value > this.exchangeRate.servicePriceA) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        var validatePassC = (rule, value, callback) => {
            if (value > this.exchangeRate.electricityPriceB) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        var validatePassD = (rule, value, callback) => {
            if (value > this.exchangeRate.servicePriceB) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        var validatePassE = (rule, value, callback) => {
            if (value > this.exchangeRate.electricityPriceC) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        var validatePassF = (rule, value, callback) => {
            if (value > this.exchangeRate.servicePriceC) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        var validatePassG = (rule, value, callback) => {
            if (value > this.exchangeRate.electricityPriceD) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        var validatePassH = (rule, value, callback) => {
            if (value > this.exchangeRate.servicePriceD) {
                callback(new Error('输入金额不能大于原金额'));
            } else {
                callback();
            }
        };
        return {
            // 遮罩
            loading: false,
            openAddMember: false,
            from: {
                pageNum: 1,
                pageSize: 10,
                groupCode: this.$route.params.groupCode.split('&')[0],
                orderCode: null,
                pileSn: null,
                transactionCode: null,
                mobileNumber: null,
                orderStatus: null,
                stationId: null,
                merchantId: null,
                startTime: null,
                endTime: null,
                startSettleTime: null,
                endSettleTime: null,
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                groupCode: this.$route.params.groupCode.split('&')[0],
                merchantId: null,
                stationId: null,
                groupLevel: null,
                groupType: null,
                discount: null,
                phoneNumber: null
            },
            // 订单结果集
            orderListResult: [],
            total: 0,
            memberGroupList: [],
            getTotal: 0,
            defaultImg: [{ img: require('../../../assets/images/headPort.png') }],//默认头像
            getSite: false, //添加站点框状态
            stationList: [], //站点列表
            selectSite: '',//选中的站点
            open: false, //修改费率
            exchangeRate: {
                electricityPriceA: '',
                servicePriceA: '',
                electricityPriceB: '',
                servicePriceB: '',
                electricityPriceC: '',
                servicePriceC: '',
                electricityPriceD: '',
                servicePriceD: '',
            },
            exchangeRateB: {
                modifyServiceA: '',
                modifyElectricityA: '',
                modifyServiceB: '',
                modifyElectricityB: '',
                modifyServiceC: '',
                modifyElectricityC: '',
                modifyServiceD: '',
                modifyElectricityD: '',
            },
            // 校验
            dialogRules: {
                modifyServiceA: [
                    { validator: validatePassA, trigger: 'blur' }
                ],
                modifyElectricityA: [
                    { validator: validatePassB, trigger: 'blur' }
                ],
                modifyServiceB: [
                    { validator: validatePassC, trigger: 'blur' }
                ],
                modifyElectricityB: [
                    { validator: validatePassD, trigger: 'blur' }
                ],
                modifyServiceC: [
                    { validator: validatePassE, trigger: 'blur' }
                ],
                modifyElectricityC: [
                    { validator: validatePassF, trigger: 'blur' }
                ],
                modifyServiceD: [
                    { validator: validatePassG, trigger: 'blur' }
                ],
                modifyElectricityD: [
                    { validator: validatePassH, trigger: 'blur' }
                ],
            },
            sitesList: [],//站点列表
            stationId: '',//站点id
            tagsTime: [],
            queryStation: {
                pageNum: 1,
                pageSize: 10,
                groupCode: this.$route.params.groupCode.split('&')[0],
            },
            stationTotal: 0,
            getDisabled: false,
            getTitle: '',
            stationBillingTemplate: null,
            carList: [], //车辆列表
            consumptionTotal: 0,
            queryCar: {
                pageNum: 1,
                pageSize: 10,
                groupCode: this.$route.params.groupCode.split('&')[0],
            },
            // 订单创建时间范围
            createTimeRange: [],
            // 订单创建结束范围
            settleTimeRange: [],
            totalDateList: [],
            // 明细列表
            vehicleDetails: false,
            closeList: [],
            closeTotal: 0,
            detailParameters: {
                pageNum: 1,
                pageSize: 10,
                groupCode: this.$route.params.groupCode.split('&')[0],
                vinCode: null
            }
        };
    },
    async mounted() {
        console.log(this.$route.params.groupCode, this.$route.params.groupCode.split('&')[0], this.$route.params.groupCode.split('&')[1]);
        this.getMemberList();
        this.getStationList();
        await this.defaultDate();
        this.handleQuery();
        this.getQueryMemberGroupConsumptionList();
    },
    computed: {},
    watch: {
        createTimeRange(newValue, oldValue) {
            console.log("createTimeRange发生变化", newValue, oldValue);
            if (newValue != null && newValue.length > 0) {
                this.from.startTime = newValue[0];
                this.from.endTime = newValue[1];
            } else {
                this.from.startTime = null;
                this.from.endTime = null;
            }
        },
        settleTimeRange(newValue, oldValue) {
            console.log("settleTimeRange发生变化", newValue, oldValue);
            if (newValue != null && newValue.length > 0) {
                this.from.startSettleTime = newValue[0];
                this.from.endSettleTime = newValue[1];
            } else {
                this.from.startSettleTime = null;
                this.from.endSettleTime = null;
            }
        },
    },
    methods: {
        handleAddMember() {
            this.openAddMember = true
        },
        /** 添加会员按钮 */
        submitForm() {
            console.log(this.queryParams);
            var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!reg_tel.test(this.queryParams.phoneNumber)) {
                this.$modal.msgError("请正确填写您的手机号码！");
                this.queryParams.phoneNumber = ''
                return false;
            }
            addMember(this.queryParams).then(response => {
                console.log(response);
                this.$modal.msgSuccess("添加成功");
                this.openAddMember = false;
                this.queryParams.phoneNumber = '';
                this.getMemberList();
            });
        },
        cancel() {
            this.openAddMember = false;
            this.queryParams.phoneNumber = '';
        },
        getMemberList() {
            this.loading = true;
            console.log(this.queryParams);
            queryMemberList(this.queryParams).then(response => {
                console.log(response);
                this.memberGroupList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        getOrderList() {
            this.loading = true;
            console.log("this.from", this.from);
            listOrder(this.from).then((response) => {
                this.orderListResult = response.rows;
                console.log("response", response);
                this.getTotal = response.total;
                this.loading = false;
            });
        },
        //添加站点
        addasite(row) {
            console.log(this.$route.params.groupCode.split('&')[1], row);
            // 判断是修改站点还是添加站点
            if (row.stationName) {
                this.selectSite = row.stationName;
                this.getTitle = '修改站点'
                this.getSite = true;
                this.getDisabled = true;
                this.queryInfo(row.stationId);
                // 查询vip计费模板详情
                queryStationPreferentialBillingTemplateList(row.stationId).then((response) => {
                    console.log("通过站点id查询vip计费模板 result: ", response.rows, response.rows[0].templateId);
                    this.stationBillingTemplate = response.rows[0].templateId;
                    getTemplate(response.rows[0].templateId).then((response) => {
                        console.log("查询vip计费模板详情", response);
                        this.exchangeRateB = {
                            modifyServiceA: response.data.electricityPriceA,
                            modifyElectricityA: response.data.servicePriceA,
                            modifyServiceB: response.data.electricityPriceB,
                            modifyElectricityB: response.data.servicePriceB,
                            modifyServiceC: response.data.electricityPriceC,
                            modifyElectricityC: response.data.servicePriceC,
                            modifyServiceD: response.data.electricityPriceD,
                            modifyElectricityD: response.data.servicePriceD,
                        }
                    });
                });
            } else {
                let value = this.$route.params.groupCode.split('&')[1]
                this.getTitle = '添加站点'
                this.getSite = true;
                getStationListByMerchantId(value).then((response) => {
                    console.log('站点', response);
                    this.stationList = response.data;
                });
            }
        },
        // 站点弹框取消重置
        getCancel() {
            this.getSite = false;
            this.selectSite = '';
            this.tagsTime = [];
            this.exchangeRate = {
                electricityPriceA: "",
                servicePriceA: "",
                electricityPriceB: "",
                servicePriceB: "",
                electricityPriceC: "",
                servicePriceC: "",
                electricityPriceD: "",
                servicePriceD: "",
            };
            this.exchangeRateB = {
                modifyServiceA: "",
                modifyElectricityA: "",
                modifyServiceB: "",
                modifyElectricityB: "",
                modifyServiceC: "",
                modifyElectricityC: "",
                modifyServiceD: "",
                modifyElectricityD: "",
            }
            this.$refs["exchangeRateB"].resetFields();
            this.getDisabled = false;
            this.stationBillingTemplate = null;
        },
        // 站点弹框确认
        siteConfirmation() {
            this.$refs["exchangeRateB"].validate(valid => {
                if (valid) {
                    let newOffers = {
                        billingTemplateId: this.stationBillingTemplate,
                        groupCode: this.$route.params.groupCode.split('&')[0],
                        stationId: this.stationId,
                        electricityPriceA: this.exchangeRateB.modifyServiceA,
                        servicePriceA: this.exchangeRateB.modifyElectricityA,
                        electricityPriceB: this.exchangeRateB.modifyServiceB,
                        servicePriceB: this.exchangeRateB.modifyElectricityB,
                        electricityPriceC: this.exchangeRateB.modifyServiceC,
                        servicePriceC: this.exchangeRateB.modifyElectricityC,
                        electricityPriceD: this.exchangeRateB.modifyServiceD,
                        servicePriceD: this.exchangeRateB.modifyElectricityD,
                        timeArray: this.exchangeRate.timeArray
                    }
                    console.log('验证成功', newOffers);
                    if (this.stationBillingTemplate) {
                        updateBillingTemplate(newOffers).then((response) => {
                            console.log("接口返回", response);
                            this.$message.success("修改成功");
                            this.getStationList();
                            this.getCancel() //重置
                        });
                    } else {
                        preferentialTemplates(newOffers).then((response) => {
                            console.log("添加站点优惠模板", response);
                            this.$modal.msgSuccess("添加成功");
                            this.getCancel() //重置
                            this.getStationList();
                        });
                    }
                } else {
                    console.log('验证失败');
                }
            });
        },
        // 查计费模板详情
        queryInfo(stationId) {
            console.log(stationId);
            this.stationId = stationId;
            queryStationBillingTemplateList(stationId).then((response) => {
                console.log("通过站点id查询计费模板 result: ", response.rows, response.rows[0].templateId);
                getTemplate(response.rows[0].templateId).then((response) => {
                    console.log("查询计费模板详情", response);
                    this.exchangeRate = response.data;
                    this.dynamicTags();
                });
            });
        },
        dynamicTags() {
            let tags = [];
            this.exchangeRate.timeArray.map((x) => {
                let type;
                let desc;
                if (x.type === "1") {
                    type = "danger";
                    desc = "尖";
                } else if (x.type === "2") {
                    type = "warning";
                    desc = "峰";
                } else if (x.type === "3") {
                    type = "success";
                    desc = "平";
                } else {
                    type = "info";
                    desc = "谷";
                }
                let label = desc + " - " + x.startTime + " - " + x.endTime;
                let tag = {
                    type: type,
                    label: label,
                };
                tags.push(tag);
            });
            this.tagsTime = tags
            console.log(this.tagsTime);
        },
        // 站点列表
        getStationList() {
            this.loading = true;
            queryStationList(this.queryStation).then(response => {
                console.log('站点列表', response);
                this.sitesList = response.rows;
                this.stationTotal = response.total;
                this.loading = false;
            });
        },
        // 删除站点
        handleDelete(row) {
            console.log(row);
            this.$modal.confirm('是否确认删除"' + row.stationName + '"').then(function () { }).then(() => {
                let remove = {
                    groupCode: this.$route.params.groupCode.split('&')[0],
                    stationId: row.stationId
                }
                removeStationFromMemberGroup(remove).then(response => {
                    console.log('删除站点', response);
                    this.$message.success("删除成功");
                    this.getStationList();
                });
            }).catch(() => { });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.from.pageNum = 1;
            // 获取订单列表
            this.getOrderList();
            // 获取订单总金额
            this.getOrderTotalData();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        //设置默认日期
        defaultDate() {
            //字符串拼接，开始时间，结束时间
            let beg = getDay(-7) + " 00:00:00"; //当月第一天
            let end = getDay(0) + " 23:59:59"; //当天
            this.createTimeRange = [beg, end];
        },
        // 删除会员
        deleteMember(row) {
            console.log(row);
            this.$modal.confirm('是否确认删除昵称为"' + row.nickName + '"会员').then(function () { }).then(() => {
                let remove = {
                    groupCode: this.$route.params.groupCode.split('&')[0],
                    memberId: row.memberId
                }
                removeMemberFromMemberGroup(remove).then(response => {
                    console.log('删除站点', response);
                    this.$message.success("删除成功");
                    this.getMemberList();
                });
            }).catch(() => { });
        },
        // 获取订单总金额数据
        getOrderTotalData() {
            totalData(this.from).then((response) => {
                console.log("getOrderTotalData", response);
                this.totalDateList = response.data;
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "order/order/export",
                {
                    ...this.from,
                },
                `order_${new Date().getTime()}.xlsx`
            );
        },
        // 获取订单总金额数据
        getQueryMemberGroupConsumptionList() {
            console.log(this.queryCar, 'this.queryCar');
            queryMemberGroupConsumptionList(this.queryCar).then((response) => {
                console.log("queryMemberGroupConsumptionList ", response);
                this.carList = response.data;
                this.consumptionTotal = response.total;
            });
        },
        // 打开车辆列表明细
        details(row) {
            console.log(row);
            this.vehicleDetails = true;
            this.detailParameters.vinCode = row.vinCode;
            this.getQueryConsumptionDetailListByVinCode();
        },
        getQueryConsumptionDetailListByVinCode() {
            console.log(this.detailParameters, 'detailParameters');
            queryConsumptionDetailListByVinCode(this.detailParameters).then((response) => {
                console.log("queryConsumptionDetailListByVinCode ", response);
                this.closeList = response.rows;
                this.closeTotal = response.total;
            });
        },
        // 关闭明细弹框
        closeDetails() {
            this.vehicleDetails = false;
            this.closeList = [];
        },
    },
};
</script>

<style lang="scss" scoped>
.uls {
    padding: 0;
    list-style: none;
}
</style>
