<template>
    <div>
        <div class="app-container">
            <el-form
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                v-show="showSearch"
            >
                <el-form-item label="订单编号" prop="orderIndex" label-position="right" label-width="145px">
                    <el-input
                        v-model="queryParams.orderIndex"
                        placeholder="请输入订单编号"
                        maxlength="30"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <!-- <el-form-item
                    label="商家/个体户编号"
                    prop="merchantIndex"
                    label-position="right" label-width="145px"
                >
                    <el-input
                        v-model="queryParams.merchantIndex"
                        placeholder="请输入商家/个体户编号"
                        maxlength="30"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item> -->
                <el-form-item
                    label="服务主题"
                    prop="goodsName"
                    label-position="right" label-width="145px"
                >
                    <el-input
                        v-model="queryParams.goodsName"
                        placeholder="请输入服务主题"
                        maxlength="30"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="服务类型"
                    prop="categoryId"
                   label-position="right" label-width="145px"
                >
                    <el-cascader
                        v-model="queryParams.categoryId"
                        :options="categoryList"
                        :props="optionProps"
                        size="small"
                        clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="服务人员手机号" prop="serverId" label-position="right" label-width="145px">
                    <el-input
                        v-model="queryParams.serverPhone"
                        placeholder="请输入服务人员手机号"
                        maxlength="11"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="服务人员姓名"
                    prop="serverName"
                    label-position="right" label-width="145px"
                >
                    <el-input
                        v-model="queryParams.serverName"
                        placeholder="请输入服务人员姓名"
                        maxlength="20"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <!-- <el-form-item
                    label="店铺名称/个体户姓名"
                    prop="merchantName"
                    label-position="right" label-width="145px"
                >
                    <el-input
                        v-model="queryParams.merchantName"
                        placeholder="请输入店铺名称/个体户姓名"
                        maxlength="20"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item> -->
                <el-form-item label="顾客手机号" prop="serverId" label-position="right" label-width="145px">
                    <el-input
                        v-model="queryParams.memberPhone"
                        placeholder="请输入顾客手机号"
                        maxlength="11"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <!-- <el-form-item
                    label="服务类型主体"
                    prop="merchantType"
                    label-position="right" label-width="145px"
                >
                    <el-select
                        v-model="queryParams.merchantType"
                        placeholder="请选择"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    >
                        <el-option label="全部" value=""></el-option>
                        <el-option label="商家" value="0"></el-option>
                        <el-option label="个体" value="1"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item
                    label="是否追加费用"
                    prop="repairAdd"
                    label-position="right" label-width="145px"
                >
                    <el-select v-model="queryParams.repairAdd">
                        <el-option
                            v-for="item in addStatusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="状态"
                    prop="orderState"
                    label-position="right" label-width="145px"
                >
                    <el-select
                        v-model="queryParams.orderState"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.decodeValue"
                            :label="item.decodeValue"
                            :value="item.decodeId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单日期" prop="createTime" label-position="right" label-width="145px">
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 220px"
                        size="small"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="margin-left: 10px">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >搜索</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="getList"
                ></right-toolbar>
            </el-row>

            <el-table
                v-loading="loading"
                :data="orderList"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column label="序号" type="index" /> -->
                <el-table-column
                    label="订单编号"
                    align="center"
                    prop="orderIndex"
                    width="180px"
                    show-overflow-tooltip
                />
                <!-- <el-table-column
                    label="商家/个体户编号"
                    align="center"
                    prop="merchantIndex"
                    width="180px"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="店铺名称/个体户姓名"
                    align="center"
                    prop="merchantName"
                    width="180px"
                    show-overflow-tooltip
                /> -->
                <el-table-column
                    label="服务编号"
                    align="center"
                    prop="goodsIndex"
                    width="180px"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="服务主题"
                    align="center"
                    prop="goodsName"
                    width="80px"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="服务类型"
                    align="center"
                    prop="categoryName"
                    width="80px"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="单价"
                    align="center"
                    prop="price"
                    width="80px"
                />
                <el-table-column
                    label="数量"
                    align="center"
                    prop="goodsCounts"
                    width="80px"
                />
                <el-table-column
                    label="订单金额"
                    align="center"
                    prop="orderAmount"
                    width="80px"
                />
                <el-table-column
                    label="支付金额"
                    align="center"
                    prop="totalAmount"
                    width="80px"
                />
                <el-table-column
                    label="另付维修/配件费"
                    align="center"
                    prop="maintenanceAmount"
                    width="120px"
                />
                <el-table-column
                    label="服务人员手机号"
                    align="center"
                    prop="serverPhone"
                    width="120px"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="服务人员姓名"
                    align="center"
                    prop="serverName"
                    width="120px"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="顾客手机号"
                    align="center"
                    prop="memberPhone"
                    width="120px"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="上门时间"
                    align="center"
                    prop="appointmentStartTime"
                    width="150"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span>{{
                            parseTime(scope.row.appointmentStartTime)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="下单时间 "
                    align="center"
                    prop="createTime"
                    width="150"
                    show-overflow-tooltip
                />
                <!-- <el-table-column
                    label="服务主体类型"
                    align="center"
                    prop="merchantType"
                >
                    <template slot-scope="scope">
                        {{ handleMerchantType(scope.row.merchantType) }}
                    </template>
                </el-table-column>
                <el-table-column label="是否追加费用" align="center">
                     <template slot-scope="scope">
                        <el-tag :type="scope.row.addAmount > 0 ? 'success' : 'info'" disable-transitions>
                              {{scope.row.addAmount > 0 ? "是" : "否"}}
                          </el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column
                    label="状态 "
                    align="center"
                    width="150"
                    prop="refStatus"
                    show-overflow-tooltip
                >
                <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.orderState=='099'" size="medium">{{scope.row.refStatus}}</el-tag>
                <el-tag type="success" v-if="scope.row.orderState=='000'" size="medium">{{scope.row.refStatus}}</el-tag>
                <el-tag type="primary" v-if="scope.row.orderState=='001'" size="medium">{{scope.row.refStatus}}</el-tag>
                <el-tag type="warning" v-if="scope.row.orderState=='002'" size="medium">{{scope.row.refStatus}}</el-tag>
                 <el-tag type="warning" v-if="scope.row.orderState=='003'" size="medium">{{scope.row.refStatus}}</el-tag>
                <el-tag type="success" v-if="scope.row.orderState=='004'" size="medium">{{scope.row.refStatus}}</el-tag>
                <el-tag type="danger" v-if="scope.row.orderState=='005'" size="medium">{{scope.row.refStatus}}</el-tag>
                <el-tag type="danger" v-if="scope.row.orderState=='006'" size="medium">{{scope.row.refStatus}}</el-tag>
                <el-tag type="info" v-if="scope.row.orderState=='007'" size="medium">{{scope.row.refStatus}}</el-tag>
            </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    fixed="right"
                    width="230"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            @click="toSee(scope.row)"
                            v-hasPermi="['system:order:edit']"
                            >查看</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-circle-check"
                            @click="doRefund(scope.row)"
                            v-hasPermi="['shop:audit:audit']"
                            v-if="scope.row.orderState == '005'&& scope.row.status=='001'"
                            >审核退款
                        </el-button>
                        <span v-if="scope.row.orderState == '000'">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="toUpdatePrice(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >修改单价</el-button
                            >
                        </span>
                        <span v-if="scope.row.orderState == '001'">
                            <!-- <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-coordinate"
                                @click="editRefund(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >退款</el-button
                            > -->
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-alarm-clock"
                                @click="updateServiceTime(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >修改上门时间</el-button
                            >
                        </span>
                        <!-- <span v-if="scope.row.orderState == '002'">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-coordinate"
                                @click="editRefund(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >退款</el-button
                            >
                        </span> -->
                        <!-- <span
                            v-if="
                                scope.row.orderState == '003' ||
                                scope.row.orderState == '004' ||
                                scope.row.orderState == '007'
                            "
                        >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-coordinate"
                                @click="editRefund(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >退款</el-button
                            >
                        </span> -->
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>

        <el-dialog
            title="修改单价"
            :visible.sync="open"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-row>
                <el-col>
                    <el-input v-model="form.price" />
                </el-col>
            </el-row>

            <div slot="footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="updatePrice">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
            title="修改上门时间"
            :visible.sync="timeOpen"
            width="900px"
            :close-on-click-modal="false"
            :before-close="closeTimeDG"
        >
            <!-- <el-row>
                <el-col>
                    <el-date-picker
                        v-model="appointmentStartTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间"
                    >
                    </el-date-picker>
                </el-col>
            </el-row> -->
            <el-tabs type="border-card" class="dateTable" :stretch="true" v-model="activeName">
                <el-tab-pane v-for="(i, idx) in dateList" :key="idx" :name="i.week">
                    <div slot="label" class="tabs_label" @click="showHourList(i)">
                        <span>{{i.week}}</span><br><span>{{i.timeStr}}</span>
                    </div>
                    <div v-if="hourList.length > 0">
                        <el-row :gutter="20" v-for="i in hourList" :key="i.time" >
                            <el-col :span="6" v-for="(i1, idx1) in i" :key="idx1">
                                <div class="grid-content"
                                :class="i1.booked==0?i1.startTime==selectTime?'highlight':'':'booked'"
                                @click="clickTime(i1)">
                                    <p>{{i1.startTime}}</p>
                                    <p v-if="i1.booked != 0">约满</p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div v-else  class="text">
                        <span>商品不存在或者服务人员已下架!</span>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <div slot="footer">
                <el-button @click="closeTimeDG">取 消</el-button>
                <el-button type="primary" @click="editVerifyTime"
                    >确 定</el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            title="退款"
            :visible.sync="refundOpenap"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-form
                :model="refundParams"
                label-width="100px"
                ref="refundForm"
                :inline="true"
                label-position="left"
                style="margin-left: 100px"
                :rules="rules"
            >
                <el-form-item label="退款金额" prop="refundMoney">
                    <el-input v-model="refundParams.refundMoney"></el-input>
                </el-form-item>

                <el-form-item label="退款原因" prop="refundReason">
                    <el-input v-model="refundParams.refundReason"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="refundOpen = false">取 消</el-button>
                <el-button type="primary" @click="handleRefund"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
         <!-- 审核退款原因对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="auditRefundOpen"
            width="600px"
            append-to-body
        >
            <el-form ref="auditRefundForm" :model="auditRefundForm" label-width="120px">
                <el-form-item label="申请退款金额">
                    <div>{{ auditRefundForm.payMoney }}元</div>
                </el-form-item>
                <el-form-item label="申请退款原因">
                    <div>{{ auditRefundForm.refundReason }}</div>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item label="审核结果">
                    <el-radio v-model="auditRefundForm.status" label="002"
                        >同意退款</el-radio
                    >
                </el-form-item>
                <el-form-item label="审核退款金额" v-if="auditRefundForm.status == '002'">
                    <el-input-number
                        v-model="auditRefundForm.refundMoney"
                        :min=0
                        :max=999999.99
                        maxlength="9" 
                        @keyup.native="clearNoNum"
                        clearable
                        placeholder="可填写的最大数值为999999.99"
                    >
                        <template slot="append">元</template>
                    </el-input-number>
                </el-form-item>
                <el-form-item label="审核结果描述">
                    <el-input
                        type="textarea"
                        :rows="3"
                        maxlength="100"
                        show-word-limit
                        v-model="auditRefundForm.refundResult"
                        placeholder="请输入审核结果描述"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitAuditRefund">确 定</el-button>
                <el-button @click="cancelAuditRefund">取 消</el-button>
            </div>
        </el-dialog>

    <!-- 详情弹框 -->
        <el-dialog
            title="订单详情"
            :visible.sync="orderOpen"
            width="950px"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
        >
        <div style="width: 900px; margin: 0 auto; word-spacing: 2em">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card style="margin-top: 10px">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <!-- <span >订单状态 {{ dict['003'] && dict['003'].filter(({value}) => value === order.orderState)[0].label}}</span> -->
                            <span>订单状态 </span
                            ><span
                                style="
                                    letter-spacing: normal;
                                    color: #333333;
                                    line-height: normal;
                                    font-weight: 700;
                                "
                                >{{ order.refStatus }}</span
                            >
                        </el-col>
                        <el-col :span="16" style="cursor: pointer">
                            <span style="color: rgb(64, 158, 255);" @click="seeOrderStatus()">订单跟踪></span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card>
                    <el-row :gutter="10">
                          <el-col :span="3">服务主题</el-col>
                        <el-col :span="21" style="margin-bottom: 20px">
                            <span  style="color: rgb(64, 158, 255);cursor: pointer" @click="toServerProject"
                                >{{ order.goodsName }}></span
                            >
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="3">
                            <span >预约的服务人员</span>
                        </el-col>
                        <el-col :span="3">
                            <span class="span-color-size">{{ order.serverName }}</span>
                        </el-col>
                        <el-col :span="4">
                            <span class="span-color-size">{{ order.serverPhone }}</span>
                        </el-col>
                        <el-col :span="4">
                            <el-tag type="info" effect="dark" size="medium">{{ this.serverUser.serverLevel }}</el-tag>
                        </el-col>
                        <el-col :span="4">
                            <el-tag type="info" effect="dark" size="medium">{{ this.serverUser.serverAge }}年工龄</el-tag>
                        </el-col>
                        <el-col :span="4">
                            <span>好评率 </span
                            ><span class="span-color">{{
                                this.serverUser.rate
                            }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <span>上门时间</span>
                            <span class="span-color-size">
                                {{ order.appointmentStartTime }}
                            </span>
                       
                            <span v-if="this.qrCodeUrl">
                                <el-button
                                    size="mini"
                                    type="primary" 
                                    class="gatePass"    
                                    @click="getAccessPasscode()"
                                    >门岗通行证
                                </el-button>
                            </span>
                            <span v-if="!this.qrCodeUrl && order.orderState === '001'">
                                <el-button
                                    size="mini"
                                    type="primary"
                                    class="gatePass"
                                    @click="getOrSaveAccessPasscode()"
                                    >门岗通行证
                                </el-button>
                            </span>
                        </el-col>
                        <el-col :span="12" style="margin-top:10px;">
                            <span>顾客信息</span>
                              <span  class="span-color-size">
                                {{ member.name }}
                                {{ member.phone }}</span
                            >
                        </el-col>
                        <el-col :span="12"  style="margin-top:10px;">
                            <span class="span-color-size"
                                ><i class="el-icon-location-information" />{{
                                    member.address
                                }}{{ member.detailed }}</span
                            >
                        </el-col>
                        <el-col :span="24" style="margin-top: 20px">
                            <span>备注</span> <span class="span-color-size">{{ order.memo }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <span>订单编号 </span><span class="span-detailed-info"> {{ order.orderIndex }} </span>
                            <el-button
                                size="mini"
                                class="orderIndex"
                                :data-clipboard-text="order.orderIndex"
                                >复制</el-button
                            >
                        </el-col>

                        <el-col :span="12" style="margin-bottom: 20px">
                            <span>下单时间</span><span class="span-detailed-info"> {{ order.createTime }}</span>
                        </el-col>

                        <el-col :span="12">
                            <span>服务类别 </span><span class="span-detailed-info">

                                {{
                                    order.parentName == null
                                        ? ""
                                        : order.parentName + "—"
                                }}{{ order.categoryName }}</span
                            >
                        </el-col>
                        <el-col :span="12" style="margin-bottom: 20px">
                            <span>数量 </span><span class="span-detailed-info"> {{ order.goodsCounts }}{{order.otherUnit}}</span>
                        </el-col>

                        <el-col :span="12">
                            <span>服务单价 </span
                            ><span class="span-color">{{ order.price }} </span
                            ><span>元/{{order.otherUnit}}</span>
                        </el-col>
                        <el-col :span="12">
                            <span>订单金额 </span
                            ><span class="span-color"
                                >￥{{ order.orderAmount }}</span
                            >
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24" v-if="order.beanAmount">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <span>优金豆</span
                            ><span style="color: #d9001b">
                                -￥{{ order.beanAmount/100 }}</span
                            >
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="24" v-if="order.maintenanceAmount > 0">
                <el-row style="margin-bottom: 10px">
                    <span class="span-detailed-info"><b>收取维修/配件费</b></span>
                </el-row>
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <span
                                >收取金额 ￥{{ order.maintenanceAmount }}</span
                            >
                        </el-col>
                        <el-col :span="12">
                            <span>费用说明 </span
                            ><span style="word-break: break-all">{{
                                order.maintenanceRemark
                            }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col>
                <el-card
                    :span="24"
                    style="background-color: rgb(127, 127, 127); color: white"
                >
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <span
                                >服务数量
                                {{
                                    parseInt(order.addCount) +
                                    parseInt(order.goodsCounts)
                                }}{{order.otherUnit}}</span
                            >
                        </el-col>

                        <el-col :span="12">
                            <span>订单实付 ￥{{ order.totalAmount }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="24" v-if="refundOpen">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="24" style="margin-bottom: 20px">
                            <span class="span-detailed-info"><b>退款信息 </b></span>
                        </el-col>
                        <el-col :span="12" style="margin-bottom: 10px">
                            <span
                                >退款金额</span><span class="span-detailed-info">
                                {{
                                    refund === undefined ? "" : refund.payMoney
                                }}
                                元</span
                            >
                        </el-col>
                        <!-- <el-col :span="12" style="margin-bottom: 20px">
                            <span
                                >退款原因
                                {{
                                    refund === undefined
                                        ? ""
                                        : refund.refundReason
                                }}</span
                            >
                        </el-col>
                        <el-col :span="12">
                            <span
                                >审核结果
                                {{
                                    refund === undefined
                                        ? ""
                                        : refund.refundResult
                                }}</span
                            >
                        </el-col> -->
                    </el-row>
                    <el-row :gutter="10" style="margin-bottom: 10px">
                        <el-col :span="24">
                            <span
                                >退款原因</span><span class="span-detailed-info">
                                {{
                                    refund === undefined
                                        ? ""
                                        : refund.refundReason
                                }}</span
                            >
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <span
                                >审核结果</span><span class="span-detailed-info">
                                {{
                                    refund === undefined
                                        ? ""
                                        : refund.refundResult
                                }}</span
                            >
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <!-- <el-col
                :span="24"
                v-if="
                    order.maintenanceAmount != null &&
                    order.maintenanceAmount != '' &&
                    order.maintenanceAmount != undefined
                "
            >
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <span>收取维修/配件费 </span>
                        </el-col>

                        <el-col :span="12" style="margin-bottom: 20px">
                            <span
                                >收取金额 {{ order.maintenanceAmount }}元</span
                            >
                        </el-col>
                        <el-col :span="12">
                            <span>费用说明 {{ order.maintenanceRemark }}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col> -->
        </el-row>

        <!--订单跟踪-->
        <el-dialog title="订单跟踪" :visible.sync="recordOpen" width="600px" :modal-append-to-body="true" :append-to-body="true">
            <ul>
                <li :key="item.id" v-for="item in orderRecord">
                    <el-row>
                        <el-col :span="12">
                            {{ item.operateInfo}}
                            <!-- {{ checkCode(item) }} -->
                        </el-col>

                        <el-col :span="12">
                            {{ item.createTime }}
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>
                </li>
            </ul>
        </el-dialog>
        <!--门岗通行证二维码-->
        <el-dialog  title="" 
        :visible.sync="qrCodeOpen" 
        width="410px"
        :modal-append-to-body="true" 
        :append-to-body="true"
        ref="refDia"
        >
        <el-row class="qrCodeDialog" style="margin-top:-20px;">
            <div style="font-size:25px;color:#fff;padding-bottom:5px;">
                门岗通行证
            </div>
        </el-row>
        <el-row class="qrCodeDialog">
            <div style="font-size:16px;color:#fff;padding-bottom:30px;">
                优鲜信家政/维修服务平台
            </div>
        </el-row>
        <el-row class="qrCodeDialog">
            <!-- <el-image
                style="width: 300px; height: 300px;"
                :src="this.qrCodeUrl"
                :preview-src-list="this.qrCodeUrls">
            </el-image> -->
            <img :src=" 'data:image/png;base64,' + this.qrCodeUrl ">
        </el-row>
        <el-row class="qrCodeDialog">
            <div style="font-size:15px;color:rgb(0, 0, 0);padding-bottom:5px;">
                进小区时请服务人员主动向门岗<span style="font-family:newHelvetica;">出</span>示此二维
            </div>
        </el-row>
        <el-row class="qrCodeDialog">
            <div style="font-size:15px;color:rgb(0, 0, 0);padding-bottom:5px;">
                码，请门岗保<span style="font-family:newHelvetica;">安</span>微信扫码确认服务人员身份。
            </div>
        </el-row>
        <el-row class="qrCodeDialog">
            <div style="font-size:16px;color:#ff511b;padding-bottom:100px;font-weight: bold;">
                此码只可使用一次，请勿给他人使用。
            </div>
        </el-row>
        <el-row class="qrCodeDialog"  style="position: absolute;top:253px;left:174px;">
            <div>
                <el-image :src="logoImage" style="border-radius:10px;width:60px;height:60px;"></el-image>
            </div>
        </el-row>
        <el-row class="qrCodeDialog" style="position: absolute;top:660px;left:152px;">
            <el-button size="mini" type="primary" class="el-icon-download"  @click="handleDownQrCodeImg()"> 下载图片</el-button>
        </el-row>
</el-dialog>

    </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    modifyPrice,
    updateOrder,
    editVerify,
    serverTimeSection,
} from "@/api/system/order";
import { merchantRefund } from "@/api/merchant/merchant";
import { listCode } from "../../api/system/dict/code";
import { getTime, listTime } from "../../api/system/serverTime";
import { categoryTree } from "@/api/basic/category";
import { getInfo } from "@/api/login";
import { getRefundInfo, doRefund } from "@/api/order/adminOrder";
import { getAddress } from "@/api/system/order";
import { getUser } from "../../api/system/ServiceUserService";
import { listRecord } from "../../api/system/orderRecord";
import { listRefund } from "../../api/system/orderRefund";
import { saveAccessPasscode, getByOrderIdAndOrderVerificationCode } from "../../api/merchant/accessPasscode";
import { mapGetters } from "vuex";
import ClipboardJS from "clipboard";

export default {
    name: "order",
    data() {
        return {
            order: {},
            activeNames: ["1"],
            imgSrc: "",
            goodsList: [],
            member: {},
            serverUser: {},
            recordOpen: false,
            orderRecord: [],
            refund: {},
            clipboard: null,
            qrCodeOpen: false,
            qrCodeUrl: null,
            qrCodeUrls: [],
            auditRefundForm: {},
            auditRefundOpen: false,
            selectTime:"",
            dateList: [],
            selectDate:"",
            //后端日期安排数据
            detailedList:[],
            hourList: [],
            activeName:"明天",
            // 日期范围
            dateRange: [],
            //服务类别筛选框
            serviceOptions: [],
            //服务状态筛选框
            statusOptions: [],
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            //订单详情
            orderOpen:false,
            // 订单主表格数据
            orderList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            refundOpenap:false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderIndex: null,
                memberId: null,
                merchantId: null,
                merchantName: null,
                orderType: null,
                orderState: null,
                appointmentStartTime: null,
                appointmentEndTime: null,
                serviceStartTime: null,
                serviceEndTime: null,
                serviceLongitude: null,
                serviceLatitude: null,
                shopAmount: null,
                isSettle: null,
                orderAmount: null,
                beanAmount: null,
                memberCouponId: null,
                couponAmount: null,
                totalAmount: null,
                payWay: null,
                memo: null,
                loginIp: null,
                loginDate: null,
                column1: null,
                column2: null,
                column3: null,
                Gname: null,
                goodsUnit: null,
                otherUnit: null,
                memberPhone: null,
                categoryName: null,
                goodsCounts: null,
                serverName: null,
                serverPhone: null,
                price: null,
                addCount: null,
                repairAdd: null,
                serverId: null,
                gname: null,
                categoryId: [],
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                refundMoney: [
                    {
                        required: true,
                        message: "退款金额不能为空",
                        trigger: "blur",
                    },
                ],
            },
            refStatusOptions: [],
            timeForm: {
                serverId: null,
            },
            timeOpen: false,
            timeOptions: [],
            //追加服务选择框
            addStatusOptions: [
                {
                    label: "全部",
                    value: "",
                },
                {
                    label: "是",
                    value: "1",
                },
                {
                    label: "否",
                    value: "0",
                },
            ],
            refundParams: {
                orderId: null,
                refundMoney: "",
                refundReason: "",
            },
            refundOpen: false,
            categoryList: [],
            appointmentStartTime: null,
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
            logoImage:require('../../assets/logo/logo.png'),
        };
    },
    created() {

        if (this.$route.query.pageNum) {
            console.log(this.queryParams.pageNum)
            this.queryParams.pageNum = parseInt(this.$route.query.pageNum)
            console.log(this.queryParams.pageNum)
         }

        if (this.$route.query.orderIndex) {
            this.queryParams.orderIndex = this.$route.query.orderIndex
        }

        if (this.$route.query.merchantIndex) {
            this.queryParams.merchantIndex = this.$route.query.merchantIndex
        }

        if (this.$route.query.goodsName) {
            this.queryParams.goodsName = this.$route.query.goodsName
        }

        // if (this.$route.query.categoryId) {
        //     this.queryParams.categoryId = this.$route.query.categoryId
        // }

        if (this.$route.query.serverPhone) {
            this.queryParams.serverPhone = this.$route.query.serverPhone
        }

        if (this.$route.query.serverName) {
            this.queryParams.serverName = this.$route.query.serverName
        }

        if (this.$route.query.merchantName) {
            this.queryParams.merchantName = this.$route.query.merchantName
        }

        if (this.$route.query.memberPhone) {
            this.queryParams.memberPhone = this.$route.query.memberPhone
        }

        if (this.$route.query.merchantType) {
            this.queryParams.merchantType = this.$route.query.merchantType
        }

        if (this.$route.query.repairAdd) {
            this.queryParams.repairAdd = this.$route.query.repairAdd
        }

        if (this.$route.query.orderState) {
            this.queryParams.orderState = this.$route.query.orderState
        }

        if (this.$route.query.params) {
             if (this.$route.query.params.beginTime) {
                // console.log("==========",this.$route.query.params)
                // console.log("1",this.$route.query.params.beginTime)
                // console.log(typeof(this.dateRange))
                this.dateRange[0]=this.$route.query.params.beginTime
                this.dateRange[1]=this.$route.query.params.endTime
                console.log("-------",this.dateRange)
             }

        }

        this.getStatus();
        this.getRefStatus();
        // this.getList();
        this.queryCategory();
    },
    mounted() {
        this.clipboard = new ClipboardJS(".orderIndex");
        this.clipboard.on("success", (e) => {
            this.$message.success("复制成功");
            e.clearSelection();
        });

    },
          destroyed() {
        // 销毁Clipboard实例，避免在其它页面或组件中实例化Clipboard后造成再次监听，产生重复回调
        this.clipboard.destroy();
    },
    methods: {
            checkCode({ preState, nowState }) {
            let result = nowState;
            switch (nowState) {
                case "000":
                    result = "提交订单";
                    break;
                case "001":
                    result = "支付成功";
                    break;
                case "002":
                    result = preState === "001" ? "开始服务" : "追加服务";
                    break;
                case "003":
                    result = "完成服务";
                    break;
                case "004":
                    result =
                        preState === "005" ? "顾客取消平台退款" : "确认完成";
                    break;
                case "005":
                    result = "顾客申请平台退款";
                    break;
                case "006":
                    result = preState === "005" ? "平台已退款" : "商家已退款";
                    break;
                case "007":
                    result = "平台拒绝退款";
                    break;
                case "099":
                    result = "未支付取消订单";
                    break;
            }
            return result;
        },
        toServerProject() {
            this.$router.push("/merchant/service");
        },
        queryAdress() {
            getAddress(this.order.orderId).then((res) => {
                this.member = res.data;
            });
        },
        getServicceUser() {
            if (!this.order.serverId) {
                return;
            }
            getUser(this.order.serverId).then((res) => {
                this.serverUser = res.data;
                this.serverUser.rate =
                    parseFloat(this.serverUser.rate || 0) + "%";
                let params = {
                    codeValue: "服务等级",
                };
                listCode(params).then((res) => {
                    for (let i in res.rows) {
                        if (
                            this.serverUser.serverLevel == res.rows[i].decodeId
                        ) {
                            this.serverUser.serverLevel =
                                res.rows[i].decodeValue;
                        }
                    }
                });
            });
        },
        seeOrderStatus() {
            listRecord(this.order).then((res) => {
                this.orderRecord = res.rows;
                this.recordOpen = true;
            });
        },
         getRefund() {
            listRefund({ ...this.order, createTime: null }).then((res) => {
                this.refund = res.rows[0];
                if (this.refund) {
                    this.refundOpen = true;
                }
            });
        },
           // 获取或保存门岗通行证信息
        getOrSaveAccessPasscode() {
            let urlBg = require('../../assets/images/card-bg.png');
            this.$refs.refDia.$refs.dialog.style.backgroundImage="url("+urlBg+")";
            this.$refs.refDia.$refs.dialog.style.backgroundSize="cover"
            this.$refs.refDia.$refs.dialog.style.backgroundRepeat="no-repeat"
            this.$refs.refDia.$refs.dialog.style.backgroundColor="rgb(0, 0, 0,0)"
            let accessPasscodeParam = {
                "orderId": this.order.orderId,
                "orderIndex": this.order.orderIndex,
                "merchantId": this.order.merchantId,
                "orderVerificationCode": null
            }
            // 调用门岗通行证获取或保存接口
            saveAccessPasscode(accessPasscodeParam).then((res) => {
                if (res.code == "200" && res.data) {
                    this.qrCodeOpen = true;
                    this.qrCodeUrl = res.data.qrCodeUrl;
                    this.qrCodeUrls.push(res.data.qrCodeUrl);
                } else {
                    this.$modal.msgError(res.msg);
                }
            })
            .catch((err) => {
                console.log(err);
            });
        },
        // 根据订单ID查询门岗二维码信息
        getAccessPasscode() {
            let urlBg = require('../../assets/images/card-bg.png');
            this.$refs.refDia.$refs.dialog.style.backgroundImage="url("+urlBg+")";
            this.$refs.refDia.$refs.dialog.style.backgroundSize="cover"
            this.$refs.refDia.$refs.dialog.style.backgroundRepeat="no-repeat"
            this.$refs.refDia.$refs.dialog.style.backgroundColor="rgb(0, 0, 0,0)"
            let accessPasscodeQueryParam = {
                "orderId": this.order.orderId,
                "orderVerificationCode": null
            }
            getByOrderIdAndOrderVerificationCode(accessPasscodeQueryParam).then((res) => {
                if (res.code == "200") {
                    if (res.data) {
                        this.qrCodeOpen = true;
                        this.qrCodeUrl = res.data.qrCodeUrl;
                        this.qrCodeUrls.push(res.data.qrCodeUrl);
                    }
                } else {
                    this.$modal.msgError(res.msg);
                }
            })
            .catch((err) => {
                console.log(err);
            });
        },
        // 下载门岗通行证二维码图片
        handleDownQrCodeImg() {
            // 文件名
            let downloadName = '门岗二维码' + this.order.orderIndex + '.png';
            // base64
            let imgData = 'data:image/png;base64,' + this.qrCodeUrl;
            // 调用下载方法
            this.downloadFile(downloadName, imgData);
        },

      //下载
      downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);

        // aLink.dispatchEvent(evt);
        //aLink.click()
        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
      },
      //base64转blob
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      },
        // 处理服务主体名称
        handleMerchantType(merchantType) {
            if (merchantType === 0) {
                return "商家";
            }
            if (merchantType === 1) {
                return "个体";
            }
            return "-";
        },

        /** 填充服务类型*/
        queryCategory() {
            categoryTree()
                .then((res) => {
                    if (res.code == 200) {
                        this.categoryList = res.data;

                        if (this.$route.query.categoryId) {
                    //             this.queryParams.categoryId= [36,37]

                        for(var i=0 ;i<this.categoryList.length;i++){
                            for(var t=0 ;t<this.categoryList[i].childrenCategory.length;t++){
                                if(this.categoryList[i].childrenCategory[t].categoryId == this.$route.query.categoryId){
                                    console.log("=======")
                                    console.log(this.categoryList[i].childrenCategory[t])

                                    this.queryParams.categoryId= [this.categoryList[i].categoryId,this.categoryList[i].childrenCategory[t].categoryId]
                                    console.log(this.queryParams.categoryId)
                                    // this.categoryId[0]=this.$route.query.categoryList[i].categoryId
                                    // this.categoryId[1]=this.$route.query.categoryList[i].childrenCategory[t].categoryId
                                }
                            }
                     }
                    }
                     this.getList();
                    } else {
                        this.$message.error("获取分类列表失败");
                    }
                    console.log(res);
                })
                .catch((err) => {
                    this.$message.error("获取分类列表失败");
                    console.log(err);
                });
        },
        /** 获取当前服务 服务人员时间安排*/
        query(row) {
            listTime(this.timeForm).then((res) => {
                console.log(row);
            });
        },
        closeTimeDG(){
            this.timeOpen = false
            this.hourList = [];
            this.selectTime="";
            this.detailedList=[];
            this.selectDate = "";
            this.activeName="明天";
        },
        clickTime(obj){
            if(obj.booked!=0){
                this.selectTime = "";
            }else if(this.selectTime == obj.startTime){
                this.selectTime = "";
            }else{
                this.selectTime = obj.startTime;
            }
        },
       // 编辑时间
       editServiceTime() {
            if(this.selectTime==""){
                this.$message.warning("请选择时间后，再点击确认按钮")
                return
            }
            this.form.appointmentStartTime = this.selectDate +" " + this.selectTime
            updateOrder(this.form).then((res) => {
                if (res.code == "200") {
                    this.$modal.msgSuccess("修改成功");
                    this.closeTimeDG()
                    this.getList();
                }
            });
        },
        updateServiceTime(row) {
            row.column1 = null;
            row.column2 = null;
            this.form = JSON.parse(JSON.stringify(row));
            // this.appointmentStartTime = this.form.appointmentStartTime;
            var form ={
                    serverId:row.serverId,
                    goodsId:row.goodsId,
                    goodsCounts:row.goodsCounts
            }
            //查询服务人员服务预约列表
            serverTimeSection(form).then((res)=>{
                if(res.code==200){
                     this.detailedList = res.data;
                     this.showCalendar()
                }
             })

            //    updateOrder(this.form).then((res) => {
            //     if (res.code == "200") {
            //         this.$modal.msgSuccess("修改成功");
            //         this.timeOpen = false;
            //         this.getList();
            //     }
            // });

        },

        // 校验时间
        editVerifyTime() {
            this.editServiceTime();

            // var params = {
            //     orderId: this.form.orderId,
            //     appointmentStartTime: this.appointmentStartTime,
            //     serverId: this.form.serverId,
            // };
            // editVerify(params).then((res) => {
            //     if (res.code == "200") {
            //         if (res.data == "201") {
            //             this.$modal
            //                 .confirm(res.msg)
            //                 .then(() => {
            //                     return this.editServiceTime();
            //                 })
            //                 .catch(() => {});
            //         }

            //         if (res.data == "200") {
            //             this.editServiceTime();
            //         }
            //     }
            // });
        },

        //修改单价
        toUpdatePrice(row) {
            this.form = JSON.parse(JSON.stringify(row));
            this.open = true;
        },
        updatePrice() {
            const { orderId, price } = this.form;
            modifyPrice({ orderId, price }).then((res) => {
                if (res.code == "200") {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                } else {
                    this.$modal.msgError("修改失败，请联系管理员处理");
                    this.open = false;
                }
            });
        },
        //详情页面跳转
        toSee(row) {
            // this.$router.push({
            //     path: "/order/repairDetail",
            //     query: { id: row.orderId },
            // });
             getOrder(row.orderId).then((response) => {
            this.order = response.data;
            this.queryAdress();
            this.getServicceUser();
            this.getRefStatus();
            this.getRefund();
        });
        //显示详情弹框
            this.orderOpen=true;
        },
        /** 获取订单状态*/
        getStatus() {
            let param = {
                codeValue: "订单状态",
            };
            listCode(param).then((res) => {
                this.statusOptions = res.rows;
            });
        },
        /** 获取订单退款子状态*/
        getRefStatus() {
            let param = {
                codeValue: "退款状态",
            };
            listCode(param).then((res) => {
                this.refStatusOptions = res.rows;
            });
        },
        /** 查询订单主列表 */
        getList() {
            this.$store.state.tagsView.visitedViews.forEach(element => {
                if (this.$route.path === element.path) {
                    element.query = this.queryParams
                }
            });

            getInfo().then((r) => {
                if (r.roles[0] == "merchant") {
                    if (r.merchant.merchantId != null) {
                        this.queryParams.merchantId = r.merchant.merchantId;
                    }
                }

                if(this.dateRange == null){
                    this.dateRange = ''
                }
                this.loading = true;

                const [searchBegin, searchEnd] = this.dateRange;
                let sBegin = searchBegin;
                let sEnd = searchEnd;
                if (typeof searchBegin == "undefined") {
                var start = new Date()
                        start.setTime(start.getTime()-3600 * 1000 * 24 * 30)
                        this.dateRange = [start,new Date()]
                        sBegin = this.timeStamp2String(start)
                }
                if (typeof searchEnd == "undefined") {
                    sEnd = this.timeStamp2String(new Date())
                            this.dateRange=[sBegin,sEnd]
                }
                this.queryParams.beginTime = sBegin;
                this.queryParams.endTime = sEnd;

                // 级联选择器绑定的参数queryParams.categoryId是一个数组，需要将最后一个层级分类的id 重新赋值给查询参数categoryId
                if (
                    this.queryParams.categoryId &&
                    this.queryParams.categoryId.length > 1
                ) {
                    this.queryParams.categoryId =
                        this.queryParams.categoryId[
                            this.queryParams.categoryId.length - 1
                        ];
                }
                // 查询维修订单列表
                this.queryParams.orderType = "002";
                listOrder(
                    this.addDateRange(this.queryParams, this.dateRange)
                ).then((response) => {
                    this.orderList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        showCalendar() {
            this.dateList = []
            let weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            let startTime = new Date().getTime()
            for (let i = 1; i <= 7; i++) {
                let date = new Date(startTime + i * 24 * 3600000)
                let month = ('0' + (date.getMonth() + 1)).substr(-2)
                let day = ('0' + date.getDate()).substr(-2)
                this.dateList.push({
                    week: i == 1 ? '明天' : (i == 2 ? '后天' : weekList[date.getDay()]),
                    time: date.getTime(),
                    timeStr: month + '月' + day + '日',
                    date: date.getFullYear() + '-' + month + '-' + day,
                })
            }
            this.showHourList(this.dateList[0])
            this.selectDate = this.dateList[0].date
            this.timeOpen = true
        },
        showHourList(row) {
            let data = [];
            this.hourList=[];
            this.selectDate = row.date
            for(let i=0 ;i<this.detailedList.length;i++){
                if(this.detailedList[i].date==row.date){
                    data = this.detailedList[i].timeSectionList
                    break;
                }
            }

            for(let j=0 ;j<data.length;j=j+4){
                this.hourList.push(data.slice(j,j+4));
            }
        },
        // 表单重置
        reset() {
            this.dateRange = null;
            this.queryParams = {
                orderId: null,
                orderIndex: null,
                memberId: null,
                merchantId: null,
                merchantName: null,
                orderType: null,
                orderState: null,
                appointmentStartTime: null,
                appointmentEndTime: null,
                serviceStartTime: null,
                serviceEndTime: null,
                serviceLongitude: null,
                serviceLatitude: null,
                shopAmount: null,
                isSettle: null,
                orderAmount: null,
                beanAmount: null,
                memberCouponId: null,
                couponAmount: null,
                totalAmount: null,
                payWay: null,
                memo: null,
                delFlag: null,
                loginIp: null,
                loginDate: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                column1: null,
                column2: null,
                column3: null,
                goodsUnit: null,
                otherUnit: null,
                memberPhone: null,
                goodsCounts: null,
                serverName: null,
                serverPhone: null,
                price: null,
                addCount: null,
                refStatus: null,
                serverId: null,
                goodsName: null,
                categoryId: [],
                repairAdd: null,
                pageNum: 1,
                pageSize: 10,

            };
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.reset();
            this.queryParams.orderState = null;
            this.queryParams.addCount = null;
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.orderId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加订单主";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const orderId = row.orderId || this.ids;
            getOrder(orderId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改订单主";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.orderId != null) {
                        updateOrder(this.form).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addOrder(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const orderIds = row.orderId || this.ids;
            this.$modal
                .confirm('是否确认删除订单主编号为"' + orderIds + '"的数据项？')
                .then(function () {
                    return delOrder(orderIds);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {});
        },
        editRefund() {
            this.$message.warning("退款功能暂未开通");
        },
        async handleRefund() {
            await this.$refs.refundForm.validate();

            const { code } = await merchantRefund(this.refundParams);
            if (code === 200) {
                this.$modal.msgSuccess("操作成功");
            }
        },
        timeStamp2String(datetime){

            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
        },

         // 审核退款
        doRefund(row) {
            // this.$message.error("退款功能暂未开通");
            // return;
            getRefundInfo({
                orderId: row.orderId,
            })
                .then((res) => {
                    if (res.code == 200) {
                        this.auditRefundForm = res.data;
                        this.auditRefundOpen = true;
                        this.title = "退款审核";
                    } else {
                        this.$message.error("获取退款信息失败");
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.$message.error("获取退款信息失败");
                });
        },
        //控制只能输入数字
        clearNoNum(obj) {
            var t = obj.target.value.charAt(0);
            //先把非数字的都替换掉，除了数字和.
            obj.target.value = obj.target.value.replace(/[^\d.]/g, "");
            //第一位0开头，0后面为数字，则过滤掉0，取后面的数字
            obj.target.value = obj.target.value.replace(/^0+(\d)/, "$1");
            //必须保证第一个为数字而不是.
            obj.target.valuee = obj.target.value.replace(/^\./g, "");
            //保证只有出现一个.而没有多个.
            obj.target.value = obj.target.value.replace(/\.{2,}/g, ".");
            //保证.只出现一次，而不能出现两次以上
            obj.target.value = obj.target.value
                .replace(".", "$#$")
                .replace(/\./g, "")
                .replace("$#$", ".");
            obj.target.value = obj.target.value.replace(
                /^(\-)*(\d+)\.(\d\d).*$/,
                "$1$2.$3"
            ); //只能输入两个小数
            //如果第一位是负号，则允许添加   如果不允许添加负号 可以把这块注释掉
            // if (t == '-') {
            //   obj.target.value = '-' + obj.target.value;
            // }
        },
        /** 提交按钮 */
        submitAuditRefund() {
            if (
                this.auditRefundForm.refundResult == null ||
                this.auditRefundForm.refundResult == ""
            ) {
                return this.$message.error("审核结果描述必填");
            }
            if (this.auditRefundForm.status == null || this.auditRefundForm.status.status == "") {
                return this.$message.error("审核结果必选");
            }
            
            doRefund(this.auditRefundForm)
                .then((res) => {
                    if (res.code == 200) {
                        // 关闭退款框
                        this.auditRefundOpen = false;
                        this.$message.success("审核完成");
                        // 刷新页面
                        this.getList();
                        this.auditRefundForm = {};
                        location.reload();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                    // this.$message.error("操作失败")
                });
        },
        // 取消按钮
        cancelAuditRefund() {
            this.auditRefundOpen = false;
            this.resetAuditRefundForm();
        },
        // 审核退款表单重置
        resetAuditRefundForm() {
            this.auditRefundForm = {
                orderId: null,
                refundMoney: null,
                refundReason: null,
                refundResult: null,
                status: null,
            };
            this.resetForm("auditRefundForm");
        },
    },
};
</script>

<style scoped>
/deep/.el-tabs__item {
    padding: 10px;
    height: auto;
    line-height: 1.8;
}
</style>
<style lang="scss" scoped>
.tabs_label {
    text-align: center;
    span {
        line-height: 28px;
    }
}
.dateTable {
    .el-col {
        display: table;
        margin: 5px 0;
    }
    .grid-content {
        border-radius: 4px;
        height: 58px;
        border: 1px solid #ccc;
        display: table-cell;
        width: 100%;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        p {
            margin: 0;
            padding: 0;
            line-height: 2;
            font-size: 12px;
        }
        p:first-child {
            font-size: 14px;
        }
    }
    .grid-content:hover {
        background: #f2f8fe;
    }
    .grid-content.cur {
        background: #dddddd;
    }
    .grid-content.cur:hover {
        background: #dddddd;
        cursor: auto;
    }
    .highlight {
        background-color: #409eff !important;
        color: #fff;
    }
    .booked {
        background-color: #d7d7d7 !important;
    }
    .text {
        font-size: 20px;
        margin: 50px 0 50px 0;
        text-align: center;
        color: rgb(255, 0, 0);
    }
}
.el-card {
  margin-bottom: 20px;
  background-color: #f4f4f4;
  color:#737373;
  font-size:14px;

}

li {
  list-style-type: none;
}
ul {
  padding-inline-start: 0px;
}
.span-color{

    font-size:16px;
    font-weight: bold;
    color: #F59A23;
}
.span-color-size {
    font-size:16px;
    font-weight: bold;
    color: #f59a23;
    line-height: 14px;
}
.span-detailed-info{
    color:black;
}

.gatePass {
    margin-left: 135px;
}
.qrCodeDialog {
    display: flex;
    justify-content: center;
    align-items: center;
}
   
   </style>
