<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>
                        <!--分页-->
                        <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-table :data="details" 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="memberId" />
                        </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-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="添加站点" :visible.sync="getSite" :before-close="getCancel" width="1000px" append-to-body>
            <el-form ref="exchangeRate" :model="exchangeRate" :rules="dialogRules">
                <el-form-item label="请选择站点">
                    <el-select v-model="selectSite" placeholder="请选择站点" filterable 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="exchangeRate.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="exchangeRate.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="exchangeRate.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="exchangeRate.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="exchangeRate.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="exchangeRate.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="exchangeRate.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="exchangeRate.modifyElectricityD" placeholder="0" clearable type="number"
                                class="clearInputScore" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </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>
    </div>
</template>

<script>
import { addMember, queryMemberList } from "@/api/member/memberGroup";
import { listOrder } from "@/api/order/order";
import { getStationListByMerchantId } from "@/api/pile/station";
import { queryStationBillingTemplateList, getTemplate } from "@/api/billing/template.js";
export default {
    name: 'JsowellUiDetail',
    dicts: ['member_status', 'start_mode', 'pay_mode', 'pay_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],
                merchantId: null,
                stationId: null,
                groupLevel: null,
                groupType: null,
                discount: null,
                phoneNumber: 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
            },
            total: 0,
            memberGroupList: [],
            getTotal: 0,
            details: [],
            defaultImg: [{ img: require('../../../assets/images/headPort.png') }],//默认头像
            getSite: false, //添加站点框状态
            stationList: [], //站点列表
            selectSite: '',//选中的站点
            open: false, //修改费率
            exchangeRate: {
                electricityPriceA: '',
                servicePriceA: '',
                electricityPriceB: '',
                servicePriceB: '',
                electricityPriceC: '',
                servicePriceC: '',
                electricityPriceD: '',
                servicePriceD: '',
                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: [],//站点列表
        };
    },

    mounted() {
        console.log(this.$route.params.groupCode, this.$route.params.groupCode.split('&')[0], this.$route.params.groupCode.split('&')[1]);
        this.getMemberList();
        this.getOrderList();
    },

    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;
            listOrder(this.from).then((response) => {
                this.details = response.rows;
                console.log("this.from", this.from);
                console.log("response", response);
                this.getTotal = response.total;
                this.loading = false;
            });
        },
        //添加站点
        addasite() {
            console.log(this.$route.params.groupCode.split('&')[1]);
            let value = this.$route.params.groupCode.split('&')[1]
            this.getSite = true
            getStationListByMerchantId(value).then((response) => {
                console.log('站点', response);
                this.stationList = response.data;
            });
        },
        // 站点弹框取消
        getCancel() {
            this.getSite = false;
            this.selectSite = '';
            this.exchangeRate = {
                electricityPriceA: "",
                servicePriceA: "",
                electricityPriceB: "",
                servicePriceB: "",
                electricityPriceC: "",
                servicePriceC: "",
                electricityPriceD: "",
                servicePriceD: "",
                modifyServiceA: "",
                modifyElectricityA: "",
                modifyServiceB: "",
                modifyElectricityB: "",
                modifyServiceC: "",
                modifyElectricityC: "",
                modifyServiceD: "",
                modifyElectricityD: "",
            }
        },
        // 站点弹框确认
        siteConfirmation() {
            this.$refs["exchangeRate"].validate(valid => {
                if (valid) {
                    console.log('验证成功');
                } else {
                    console.log('验证失败');
                }
            });
        },
        // 查计费模板详情
        queryInfo(stationId) {
            console.log(stationId);
            queryStationBillingTemplateList(stationId).then((response) => {
                console.log("通过站点id查询计费模板 result: ", response.rows, response.rows[0].templateId);
                this.stationBillingTemplate = response.rows;
                getTemplate(response.rows[0].templateId).then((response) => {
                    console.log("查询计费模板详情", response);
                    this.exchangeRate = response.data;
                    // 重置验证
                    this.$refs["exchangeRate"].resetFields();
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
