<template>
    <div>
      <div v-if="search" class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
        <el-form
          ref="querform" 
          :model="queryParams" 
          :inline="true" 
        >
            <el-form-item label="订单号" prop="orderNo">
                <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable />
            </el-form-item>
            <el-form-item label="车牌号" prop="plateNum">
                <el-input v-model="queryParams.plateNum" placeholder="请输入车牌号" clearable />
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 200px;">
                    <el-option label="已创建" value="1" />
                    <el-option label="换电中" value="2" />
                    <el-option label="换电完成" value="3" />
                    <el-option label="充电中" value="4" />
                    <el-option label="充电完成" value="5" />
                    <el-option label="待结算" value="6" />
                    <el-option label="已完成" value="7" />
                    <el-option label="已取消" value="9" />
                </el-select>
            </el-form-item>
            <el-form-item label="订单开始时间" prop="orderTimeBegin">
              <el-date-picker
                v-model="queryParams.orderTimeBegin"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%;" 
                type="datetime"
                placeholder="请选择时间"
              />
            </el-form-item>
            <el-form-item label="订单结束时间" prop="orderTimeEnd">
              <el-date-picker
                v-model="queryParams.orderTimeEnd"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%;" 
                type="datetime"
                placeholder="请选择时间"
              />
            </el-form-item>
            <el-form-item label="换电站" prop="stationCode">
                <el-select v-model="queryParams.stationCode" placeholder="请选择换电站" style="width: 200px;">
                    <el-option v-for="n in yunList" :label="n.name" :value="n.code" />
                </el-select>
            </el-form-item>
            <el-form-item label="交易编码" prop="tradeNo">
                <el-input v-model="queryParams.tradeNo" placeholder="请输入交易编码" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handBtnqu">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
      <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
        

          <div style="display: flex;justify-content: space-between;">
          <div>
            <el-button 
              type="primary" 
              plain 
              icon="Plus" 
              @click="showpop(1)">新增</el-button>

              <el-button 
              type="primary" 
              plain 
              icon="Wallet" 
              @click="zfdrawer = true">批量支付</el-button>
          </div>
            
          <el-tooltip class="item" effect="dark" :content="search? '隐藏搜索' : '显示搜索'" placement="top">
            <el-button size="mini" circle icon="Search" @click="search = !search" />
          </el-tooltip>
        </div>
          
        <!--@selection-change="selChange"-->
        <el-table
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          :max-height="search?'550px':'680px'"
        >
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column label="订单号" min-width="320" align="center" prop="orderNo" :show-overflow-tooltip="true">
              <template #default="scope">
                <div @click="getdetails(scope.row)" style="display: inline-block;color:#16599d;border-bottom: 1px solid #417ebb;cursor:pointer">{{scope.row.orderNo}}</div>
              </template>
            </el-table-column>
            <el-table-column label="订单类型" min-width="80" align="center" prop="sourceFrom" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.status == 1">换电</div>
                    <div v-else-if="scope.row.status == 2">充电</div>
                </template>
            </el-table-column>
            <el-table-column label="车牌号" min-width="120" align="center" prop="plateNum" :show-overflow-tooltip="true" />
            <el-table-column label="订单时间" min-width="200" align="center" prop="orderTime" :show-overflow-tooltip="true" />
            <el-table-column label="金额账号" min-width="120" align="center" prop="accountCode" :show-overflow-tooltip="true" />
            <el-table-column label="订单金额(元)" min-width="120" align="center" prop="amount" :show-overflow-tooltip="true">
              <template #default="scope">
                    <div>{{scope.row.amount/100}}</div>
                </template>
            </el-table-column>
            <el-table-column label="订单状态" min-width="120" align="center" prop="status" :show-overflow-tooltip="true">
              <template #default="scope">
                <div v-if="scope.row.status == 1">已创建</div>
                <div v-else-if="scope.row.status == 2">换电中</div>
                <div v-else-if="scope.row.status == 3">换电完成</div>
                <div v-else-if="scope.row.status == 4">充电中</div>
                <div v-else-if="scope.row.status == 5">充电完成</div>
                <div v-else-if="scope.row.status == 6" style="color: #ff6000;">待支付</div>
                <div v-else-if="scope.row.status == 7">已完成</div>
                <div v-else-if="scope.row.status == 9">已取消</div>
              </template>
            </el-table-column>
            <el-table-column label="计费方式" min-width="120" align="center" prop="feeType" :show-overflow-tooltip="true">
              <template #default="scope">
                <div v-if="scope.row.feeType == 1">ODO</div>
                <div v-else-if="scope.row.feeType == 2">SOC</div>
                <div v-else-if="scope.row.feeType == 3">换电量</div>
              </template>
            </el-table-column>
            <el-table-column label="基础费用(元)" min-width="120" align="center" prop="basicFee" :show-overflow-tooltip="true" />
            <el-table-column label="服务开始时间" min-width="180" align="center" prop="serviceTimeBegin" :show-overflow-tooltip="true" />
            <el-table-column label="服务结束时间" min-width="180" align="center" prop="serviceTimeEnd" :show-overflow-tooltip="true" />
            
            <el-table-column label="服务费(元)" min-width="120" align="center" prop="serviceFee" :show-overflow-tooltip="true" />
            <el-table-column label="上次租赁电池时车辆里程" min-width="180" align="center" prop="lastRentBatCarOdo" :show-overflow-tooltip="true" />
            <el-table-column label="归还电池时车辆里程" min-width="150" align="center" prop="nowReturnBatCarOdo" :show-overflow-tooltip="true" />
            
            <el-table-column label="按ODO换电费" min-width="120" align="center" prop="odoAmount" :show-overflow-tooltip="true" />
            <el-table-column label="总充电量" min-width="120" align="center" prop="electAmount" :show-overflow-tooltip="true" />
            <el-table-column label="租借电池包仓位" min-width="120" align="center" prop="rentBatNo" :show-overflow-tooltip="true" />

            <el-table-column label="租用电池包编码" min-width="300" align="center" prop="rentBatCode" :show-overflow-tooltip="true" />
            <el-table-column label="租用电池包SOC" min-width="120" align="center" prop="rentBatSoc" :show-overflow-tooltip="true" />
            <el-table-column label="归还电池包编码" min-width="300" align="center" prop="returnBatCode" :show-overflow-tooltip="true" />
            
            <el-table-column label="归还电池包仓位" min-width="120" align="center" prop="returnBatNo" :show-overflow-tooltip="true" />
            <el-table-column label="归还电池包SOC" min-width="120" align="center" prop="returnBatSoc" :show-overflow-tooltip="true" />
            <el-table-column label="归还电池租出时soc" min-width="150" align="center" prop="returnBatRentSoc" :show-overflow-tooltip="true" />

            <el-table-column label="归还电池租出的换电站" min-width="160" align="center" prop="returnBatRentStationName" :show-overflow-tooltip="true" />
            <el-table-column label="换电模式" min-width="120" align="center" prop="changeMode" :show-overflow-tooltip="true">
              <template #default="scope">
                <div v-if="scope.row.changeMode == 1">全自动</div>
                <div v-else-if="scope.row.changeMode == 2">半自动</div>
                <div v-else-if="scope.row.changeMode == 3">人工干预</div>
              </template>
            </el-table-column>
            <el-table-column label="换电车道" min-width="120" align="center" prop="changeLane" :show-overflow-tooltip="true">
              <template #default="scope">
                <div v-if="scope.row.changeMode == 1">A车道</div>
                <div v-else-if="scope.row.changeMode == 2">B车道</div>
                <div v-else-if="scope.row.changeMode == 3">人工干预</div>
              </template>
            </el-table-column>
            <el-table-column label="交易编码" min-width="280" align="center" prop="tradeNo" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="100" fixed="right">
              <template #default="scope">
                <!-- <el-button link type="primary" icon="Edit" @click="showpop(2,scope.row)">修改</el-button> -->
                <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="total > 10" style="display: flex;justify-content: right;padding-top:20px;">
            <el-pagination
              v-model:current-page="queryParams.pageNo"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              background
              size="small"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="getyys"
            />
          </div>
      </div>
  
    
      <!-- 添加或修改配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="850px" 
          append-to-body
          :close-on-click-modal="false"
        >
        
        <el-form ref="yysRef" :model="addata" :rules="rules" label-width="170px">
          <el-row>
            <el-col :span="12">
                <el-form-item label="订单类型" prop="orderType">
                    <el-select v-model="addata.orderType" placeholder="请选择类型">
                        <el-option label="换电" value="1" />
                        <el-option label="充电" value="2" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车主" prop="userId">
                  <el-autocomplete
                    style="width: 100%"
                    v-model="wxuser"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入手机号查询"
                    clearable
                    @blur="autoblur"
                    @select="handleSelect"
                    @clear="autoclear"
                  />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车牌号" prop="plateNum">
                    <el-input v-model="addata.plateNum" placeholder="请输入车牌号" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="订单时间" prop="orderTime">
                    <el-date-picker
                    v-model="addata.orderTime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%;" 
                    type="datetime"
                    placeholder="请选择时间"
                />
                </el-form-item>
            </el-col>  
            <el-col :span="12">
                <el-form-item label="换电站" prop="stationCode">
                    <el-select v-model="addata.stationCode" placeholder="请选择换电站">
                        <el-option 
                          v-for="n in yunList" 
                          :label="n.name" 
                          :value="n.code"
                          @click="getlabel(n.name)" 
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            
            <el-col :span="12">
                <el-form-item label="金额账号" prop="accountCode">
                    <el-input v-model="addata.accountCode" placeholder="请输入金额账号" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="订单金额(元)" prop="amount">
                    <el-input v-model="addata.amount" placeholder="请输入订单金额" clearable />
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="订单状态" prop="status">
                    <el-select v-model="addata.status" placeholder="请选择状态">
                        <el-option label="已创建" value="1" />
                        <el-option label="换电中" value="2" />
                        <el-option label="换电完成" value="3" />
                        <el-option label="充电中" value="4" />
                        <el-option label="充电完成" value="5" />
                        <el-option label="待结算" value="6" />
                        <el-option label="已完成" value="7" />
                        <el-option label="已取消" value="9" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="计费方式" prop="feeType">
                    <el-select v-model="addata.feeType" placeholder="请选择计费方式">
                        <el-option label="ODO" value="1" />
                        <el-option label="SOC" value="2" />
                        <el-option label="按电量" value="3" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="基础费用(元)" prop="basicFee">
                    <el-input v-model="addata.basicFee" placeholder="请输入基础费用" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="服务开始时间" prop="serviceTimeBegin">
                    <el-date-picker
                    v-model="addata.serviceTimeBegin"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%;" 
                    type="datetime"
                    placeholder="请选择时间"
                />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="服务结束时间" prop="serviceTimeEnd">
                    <el-date-picker
                    v-model="addata.serviceTimeEnd"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%;" 
                    type="datetime"
                    placeholder="请选择时间"
                />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="服务费(元)" prop="serviceFee">
                    <el-input v-model="addata.serviceFee" placeholder="请输入服务费" clearable />
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="上次租赁电池时车辆里程" prop="lastRentBatCarOdo">
                    <el-input v-model="addata.lastRentBatCarOdo" placeholder="请输入里程" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="归还电池时车辆里程" prop="nowReturnBatCarOdo">
                    <el-input v-model="addata.nowReturnBatCarOdo" placeholder="请输入里程" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="按ODO换电费" prop="odoAmount">
                    <el-input v-model="addata.odoAmount" placeholder="请输入换电费" clearable />
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="总充电量" prop="electAmount">
                    <el-input v-model="addata.electAmount" placeholder="请输入总充电量" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="租借电池包仓位" prop="rentBatNo">
                    <el-input v-model="addata.rentBatNo" placeholder="请输入租借电池包仓位" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="租用电池包编码" prop="rentBatCode">
                    <el-input v-model="addata.rentBatCode" placeholder="请输入租用电池包编码" clearable />
                </el-form-item>
            </el-col>
            
            <el-col :span="12">
                <el-form-item label="租用电池包SOC" prop="rentBatSoc">
                    <el-input v-model="addata.rentBatSoc" placeholder="请输入租用电池包SOC" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="归还电池包编码" prop="returnBatCode">
                    <el-input v-model="addata.returnBatCode" placeholder="请输入归还电池包编码" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="归还电池包仓位" prop="returnBatNo">
                    <el-input v-model="addata.returnBatNo" placeholder="请输入归还电池包仓位" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="归还电池包SOC" prop="returnBatSoc">
                    <el-input v-model="addata.returnBatSoc" placeholder="请输入归还电池包SOC" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="归还电池租出时soc" prop="returnBatRentSoc">
                    <el-input v-model="addata.returnBatRentSoc" placeholder="请输入归还电池租出时soc" clearable />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                <el-form-item label="归还电池租出时soc" prop="returnBatRentSoc">
                    <el-input v-model="addata.returnBatRentSoc" placeholder="请输入归还电池租出时soc" clearable />
                </el-form-item>
            </el-col> -->
            <el-col :span="12">
                <el-form-item label="归还电池租出的换电站" prop="returnBatRentStationCode">
                    <el-select v-model="addata.returnBatRentStationCode" placeholder="请选择换电站">
                        <el-option 
                          v-for="n in yunList" 
                          :label="n.name" 
                          :value="n.code"
                          @click="getlabel(n.name,2)"  
                        />
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="换电模式" prop="changeMode">
                    <el-select v-model="addata.changeMode" placeholder="请选择换电模式">
                        <el-option label="全自动" value="1" />
                        <el-option label="半自动" value="2" />
                        <el-option label="人工干预" value="3" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="换电车道" prop="changeLane">
                    <el-select v-model="addata.changeLane" placeholder="请选择换电模式">
                        <el-option label="A车道" value="1" />
                        <el-option label="B车道" value="2" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="交易编码" prop="tradeNo">
                    <el-input v-model="addata.tradeNo" placeholder="请输入交易编码" clearable />
                </el-form-item>
            </el-col>
            
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>

      <!--批量支付-->
      <el-drawer 
        v-model="zfdrawer" 
        :with-header="false"
        size="1200px"
      >
        <Payment v-if="zfdrawer" />
      </el-drawer>

      <!--详情修改-->
      <el-drawer 
        v-model="drawer" 
        :with-header="false"
        size="1200px"
      >
      <el-row style="margin-bottom: 20px;">
        <el-col :span="24" style="position: relative;margin-bottom: 20px;padding-bottom: 10px;text-align: center;font-size: 20px;color: #417ebb;border-bottom:1px solid #16599d;">
          订单详情
          <el-icon color="#ccc" @click="drawer = false" style="position: absolute;right: 20px;cursor: pointer;">
                <CloseBold />
            </el-icon>
        </el-col>
        <el-col :span="24">
          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="4">订单号：</el-col>
                <el-col :span="20" style="color: #417ebb;">{{xqobj.orderNo}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="6">订单类型：</el-col>
                <el-col :span="18" style="color: #417ebb;">{{xqobj.orderType == 1?'换电':'充电'}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="4">车牌号：</el-col>
                <el-col :span="20" style="color: #417ebb;">{{xqobj.plateNum}}</el-col>
              </el-row>
            </el-col>
          </el-row>
          
          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="5">订单状态：</el-col>
                <el-col :span="19" :style="{color:xqobj.status == 6?'#ff6000':'#417ebb'}">{{getstu(xqobj.status)}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="6">订单时间：</el-col>
                <el-col :span="18" style="color: #417ebb;">{{xqobj.orderTime}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="5">金额账号：</el-col>
                <el-col :span="19" style="color: #417ebb;">{{xqobj.accountCode?xqobj.accountCode:'--'}}</el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="5">订单金额：</el-col>
                <el-col :span="19" style="color: #417ebb;">{{xqobj.amount/100}}元</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="6">计费方式：</el-col>
                <el-col :span="18" style="color: #417ebb;">{{feetype(xqobj.feeType)}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="5">基础费用：</el-col>
                <el-col :span="19" style="color: #417ebb;">{{xqobj.basicFee}}元</el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="7">服务开始时间：</el-col>
                <el-col :span="16" style="color: #417ebb;">{{xqobj.serviceTimeBegin}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="7">服务结束时间：</el-col>
                <el-col :span="16" style="color: #417ebb;">{{xqobj.serviceTimeEnd}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="5">服务费：</el-col>
                <el-col :span="19" style="color: #417ebb;">{{xqobj.serviceFee}}元</el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="12">上次租赁电池时车辆里程：</el-col>
                <el-col :span="12" style="color: #417ebb;">{{xqobj.lastRentBatCarOdo}}公里</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="10">归还电池时车辆里程：</el-col>
                <el-col :span="12" style="color: #417ebb;">{{xqobj.nowReturnBatCarOdo}}公里</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="8">按ODO换电费：</el-col>
                <el-col :span="16" style="color: #417ebb;">{{xqobj.odoAmount}}元</el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="5">总充电量：</el-col>
                <el-col :span="19" style="color: #417ebb;">{{xqobj.electAmount}}度</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="8">租借电池包仓位：</el-col>
                <el-col :span="12" style="color: #417ebb;">{{xqobj.rentBatNo}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="8">租用电池包编码：</el-col>
                <el-col :span="16" style="color: #417ebb;">{{xqobj.rentBatCode}}</el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="9">租用电池包SOC：</el-col>
                <el-col :span="10" style="color: #417ebb;">{{xqobj.rentBatSoc}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="8">归还电池包编码：</el-col>
                <el-col :span="12" style="color: #417ebb;">{{xqobj.returnBatCode}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="8">归还电池包仓位：</el-col>
                <el-col :span="16" style="color: #417ebb;">{{xqobj.returnBatNo}}</el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="9">归还电池包SOC：</el-col>
                <el-col :span="10" style="color: #417ebb;"></el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="11">归还电池租出时SOC：</el-col>
                <el-col :span="12" style="color: #417ebb;">{{xqobj.returnBatSoc}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="11">归还电池租出的换电站：</el-col>
                <el-col :span="13" style="color: #417ebb;">{{xqobj.returnBatRentStationName}}</el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 30px;">
            <el-col :span="8">
              <el-row>
                <el-col :span="5">换电模式：</el-col>
                <el-col :span="10" style="color: #417ebb;">{{hdms(xqobj.changeMode)}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="5">换电车道：</el-col>
                <el-col :span="12" style="color: #417ebb;">{{xqobj.changeLane == 1?'A车道':'B车道'}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="5">交易编码：</el-col>
                <el-col :span="19" style="color: #417ebb;">{{xqobj.tradeNo}}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #ccc;">
        <el-col :span="xqobj.status == 5?12:24" :style="{textAlign:xqobj.status == 5?'right':'center'}">
          <el-button 
          v-if="xqobj.status != 7 || xqobj.status != 9"
          style="margin-right: 25px;"
          type="primary" 
          plain 
          icon="Edit" 
          @click="showpop(2,xqobj)">修改</el-button>
        </el-col>
        <el-col v-if="xqobj.status == 5" :span="12">
          <el-button 
          style="margin-left: 25px;"
          type="primary" 
          plain 
          icon="CopyDocument" 
          @click="feiyong((xqobj as any).orderNo)">计算费用</el-button>
        </el-col>
      </el-row>
        <div style="padding-bottom: 20px;">换电步骤</div>
        <div v-if="hdbz.length>0">
          <el-steps :active="hdbz.length" align-center>
            <el-step v-for="n in hdbz" :icon="(hdbzname(n.step) as any).icon" :title="(hdbzname(n.step) as any).name" :description="n.stepTime" />
          </el-steps>
        </div>
        <el-empty v-else :image-size="120" description="暂未开始" />
      </el-drawer>
    </div>
  </template>
  <script setup lang="ts" name="UserPage">
        import { 
            gethdzlist
        } from '@/api/swapstation/hdz'

        import { 
            getjqrlist, 
            addhdz, 
            update,
            delhdz,
            jsfeiy,
            gethdbz
        } from '@/api/order/replabatt'

        import { 
          getwxlist
        } from '@/api/operation/wxuser'

        import { carNum,setNum,getDateDaysAgo } from '@/utils/validate'


        import Payment from './payment.vue'

      //  import { 
      //   getdict
      //  } from '@/api/systemSet/dict'
      // import { jsonp } from 'vue-jsonp'
      import { ref,reactive,watch} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'
      
     
      //换电步骤
      function hdbzname(n:string|number) {
        if(n == 1){
          return {
            name:'车辆进站',
            icon:'Star'
          }
        }else if(n == 2){
          return {
            name:'车辆到达指定位置',
            icon:'LocationFilled'
          } 
        }else if(n == 3){
          return {
            name:'启动对中机构',
            icon:'Guide'
          }
        }else if(n == 4){
          return {
            name:'取新电池',
            icon:'List'
          }
        }else if(n == 5){
          return {
            name:'拆旧电池',
            icon:'Checked'
          }
        }else if(n == 6){
          return {
            name:'装新电池',
            icon:'FolderChecked'
          }
        }else if(n == 7){
          return {
            name:'放旧电池',
            icon:'Postcard'
          }
        }else if(n == 8){
          return {
            name:'换电完成',
            icon:'CircleCheck'
          }
        }
        return {
          name:'',
          icon:''
        }
      }

      

      //计费方式
        function feetype(type:string|number) {
          if(type == 1){
            return 'ODO'
          }
          if(type == 2){
            return 'SOC'
          }
          if(type == 3){
            return '换电量'
          }
        }
        
        //换电模式
        function hdms(type:string|number) {
          if(type == 1){
            return '全自动'
          }
          if(type == 2){
            return '半自动'
          }
          if(type == 3){
            return '人工干预'
          }
        }

       //批量支付
       let zfdrawer = ref(false) 
       watch(zfdrawer,v =>{
        if(!v){
          handBtnqu()
        }
       })
      
      let search = ref(true)



      let queryParams = reactive({
        pageSize:20,	          //每页条数
        pageNo:1,	              //页数
        orderNo:'',	            //订单编码
        plateNum:'',	          //车牌号
        orderTimeBegin:getDateDaysAgo(30,'00:00:00'),	    //订单时间开始,示例值(yyyy-MM-dd HH:mm:ss)
        orderTimeEnd:getDateDaysAgo(0,'23:59:59'),	      //订单时间结束
        stationCode:'',	        //换电站编码
        stationName:'',	        //换电站名称
        userId:'',	            //换电车主ID
        tradeNo:'',             //交易编码
        status:''
     })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }
      
      //初始查询换电站
      let yunList = ref<any>([])
        gethdzlist({
          pageSize:20,	      //每页条数
          pageNo:1,	          //页数
          proxyId:'',	          //归属运营商ID
          name:'',	          //站点名称
          code:'',	          //站点编码
          status:'',	          //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
          type:'',	          //站点类型ID
        }).then(rps => {
            if(rps.data){
                let list = (rps.data as any).records
                yunList.value = list?list:[]
                //queryParams.stationCode = list[0].code
                //getyys()
                getyys()
            }
        })
        
      
      let wxuser = ref('')
      //获取微信用户 ??
      async function querySearchAsync (queryString: string, cb:any) {
        getwxlist({
          pageSize:100,	      //每页条数
          pageNo:1,	          //页数
          phoneNumber:''      //手机号
        }).then((res) => {
            if (res.data && (res.data as any).records.length > 0) {
                // mapList.value = res.data;
                let listss = (res.data as any).records.map((n:any) => {
                    return {
                        value: `用户名：${n.name?n.name:'暂未设置'},手机号：${n.phoneNumber?n.phoneNumber:'暂未绑定'}`,
                        name: n.name,
                        phoneNumber:n.phoneNumber,
                        id:n.pkId //??
                    }
                })
                cb(listss)
                //return listss
                // callback(mapList.value);
            }else{
                cb([])
            }
            }).catch(() => {
                cb([])
            })
        }
      function autoblur() {
        if(addata.orderPreUid === ''){
          wxuser.value = ''
        }
      }

      function autoclear() {
        addata.orderPreUid = ''                    
        addata.orderPreUname = ''	                        
        addata.orderPrePhone = ''                  
      }

      function handleSelect(v: any) {
        //addata.userId = v.id
        addata.orderPreUid = v.pkId                           //预约用户
        addata.orderPreUname = v.name	                        //预约用户名称
        addata.orderPrePhone = v.phoneNumber                  //预约用户手机
      }

      function getyys() {
        yysList.value.splice(0)
        total.value = 0
        getjqrlist(queryParams).then(rps => {
            if(rps.data){
              yysList.value = (rps.data as any).records
              total.value = (rps.data as any).total
            }
        })
      }

      function handleSizeChange(val:number) {
        queryParams.pageSize = val
        getyys()
      }
      
      //重置
      let querform = ref()
      function resetQuery() {
        querform.value?.resetFields()
        queryParams.orderTimeBegin = ''
        queryParams.orderTimeEnd = ''
      }
      //1-已创建，2-换电中，3-换电完成，4-充电中，5-充电完成，6-待结算，7-已完成，9-已取消

      function getstu(n:any){
        if(n == 1){
          return '已创建'
        }else if(n == 2){
          return '换电中'
        }else if(n == 3){
          return '换电完成'
        }else if(n == 4){
          return '充电中'
        }else if(n == 5){
          return '充电完成'
        }else if(n == 6){
          return '待支付'
        }else if(n == 7){
          return '已完成'
        }
        return '已取消'
      }

      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('添加电池')
      let yysRef = ref()
      let slecas = ref('')
      let addata = reactive<any>({
        orderType:'',	                            //类型：1-换电，2-充电
        plateNum:'',	                            //车牌号
        orderTime:'',	                            //订单时间,示例值(yyyy-MM-dd HH:mm:ss)
        stationCode:'',	                          //换电站编码
        stationName:'',	                          //换电站名称
        accountCode:'',	                          //金额账号
        amount:'',	                              //订单金额
        status:'',	                              //订单状态：1-等待受理，2-换电中，3-换电完成，4-出现异常，5-未结算，6-订单取消，7-已结算
        feeType:'',	                              //计算费用方式：1-ODO，2-SOC，3-按电量
        basicFee:'',	                            //基础费用
        serviceTimeBegin:'',	                    //服务开始时间
        serviceTimeEnd:'',	                      //服务结束时间
        serviceFee:'',	                          //服务费
        lastRentBatCarOdo:'',	                    //上次租赁电池时车辆里程
        nowReturnBatCarOdo:'',	                  //归还电池时车辆里程
        odoAmount:'',	                            //按ODO换电费
        electAmount:'',	                          //总充电量
        rentBatNo:'',	                            //租借电池包仓位
        rentBatCode:'',	                          //租用电池包编码
        rentBatSoc:'',	                          //租用电池包SOC
        returnBatCode:'',	                        //归还电池包编码
        returnBatNo:'',	                          //归还电池包仓位
        returnBatSoc:'',	                        //归还电池包SOC
        returnBatRentSoc:'',	                    //归还电池租出时soc
        returnBatRentStationCode:'',	            //归还电池租出的换电站编码
        returnBatRentStationName:'',	            //归还电池租出的换电站
        changeMode:'',	                          //换电模式：1-全自动，2-半自动，3-人工干预
        changeLane:'',	                          //换电车道 1-A 车道;2-B 车道
        //userId:'',	                              //换电车主ID
        tradeNo:'',	                              //交易编码

        orderPreId:'',	                          //预约订单ID
        orderPreUid:'',                           //预约用户
        orderPreUname:'',	                        //预约用户名称
        orderPrePhone:''	                        //预约用户手机
      })
      const rules = ref({
        orderType:[
            { required: true, message: "请选择订单类型", trigger: "blur" }
        ],
        // userId:[
        //   { required: true, message: "请选择车主", trigger: "blur" }
        // ],
        plateNum:[
          { required: true, message: "请输入车牌号", trigger: "blur" },
          { validator:carNum, trigger: "blur"}
        ],
        stationCode:[
          { required: true, message: "请选择换电站", trigger: "blur" }
        ]
      })

      watch(() => addata.amount, v => {
        addata.amount = setNum(v)
      })
      
      watch(() => addata.basicFee, v => {
        addata.basicFee = setNum(v)
      })
      
      watch(() => addata.serviceFee, v => {
        addata.serviceFee = setNum(v)
      })

      
      //获取换电站名称
      function getlabel(n:string,type:number = 1){
        if(type == 1){
          addata.stationName = n
        }else{
          addata.returnBatRentStationCode = n
        }        
      }

      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加订单':'修改订单'
        yysRef.value?.resetFields()
        if(row){
          addata.orderType = row.orderType+''
          addata.plateNum = row.plateNum
          addata.orderTime = row.orderTime
          addata.stationCode = row.stationCode
          addata.stationName = row.stationName
          addata.accountCode = row.accountCode
          addata.amount = row.amount?row.amount/100:0
          addata.status = row.status?row.status+'':''
          addata.feeType = row.feeType?row.feeType+'':''
          addata.basicFee = row.basicFee
          addata.serviceTimeBegin = row.serviceTimeBegin
          addata.serviceTimeEnd = row.serviceTimeEnd
          addata.serviceFee = row.serviceFee
          addata.lastRentBatCarOdo = row.lastRentBatCarOdo
          addata.nowReturnBatCarOdo = row.nowReturnBatCarOdo
          addata.odoAmount = row.odoAmount
          addata.electAmount = row.electAmount
          addata.rentBatNo = row.rentBatNo
          addata.rentBatCode = row.rentBatCode
          addata.rentBatSoc = row.rentBatSoc
          addata.returnBatCode = row.returnBatCode
          addata.returnBatNo = row.returnBatNo
          addata.returnBatSoc = row.returnBatSoc
          addata.returnBatRentSoc = row.returnBatRentSoc
          addata.returnBatRentStationCode = row.returnBatRentStationCode
          addata.returnBatRentStationName = row.returnBatRentStationName
          addata.changeMode = row.changeMode?row.changeMode+'':''
          addata.changeLane = row.changeLane?row.changeLane+'':''
          //addata.userId = row.userId
          addata.tradeNo= row.tradeNo                    
           
        }else{
          addata.orderType = ''
          addata.plateNum = ''
          addata.orderTime = ''
          addata.stationCode = ''
          addata.stationName = ''
          addata.accountCode = ''
          addata.amount = ''
          addata.status = ''
          addata.feeType = ''
          addata.basicFee = ''
          addata.serviceTimeBegin = ''
          addata.serviceTimeEnd = ''
          addata.serviceFee = ''
          addata.lastRentBatCarOdo = ''
          addata.nowReturnBatCarOdo = ''
          addata.odoAmount = ''
          addata.electAmount = ''
          addata.rentBatNo = ''
          addata.rentBatCode = ''
          addata.rentBatSoc = ''
          addata.returnBatCode = ''
          addata.returnBatNo = ''
          addata.returnBatSoc = ''
          addata.returnBatRentSoc = ''
          addata.returnBatRentStationCode = ''
          addata.returnBatRentStationName = ''
          addata.changeMode = ''
          addata.changeLane = ''
         // addata.userId = '' //??
          addata.tradeNo = ''                  
        }
      }
      function savehand() {
        if(type.value == 1){
            return addhdz(addata)
        }
        return update(addata)
        
      }
      //保存
      function handleAdd() {
        yysRef.value?.validate((valid:Boolean) => {
            if (valid) {
                savehand().then(() => {
                ElMessage({
                    type: 'success',
                    message: type.value == 1?'添加成功':'修改成功'
                })
                setTimeout(()=> {
                    openpop.value = false
                    drawer.value = false
                    getyys()
                },600)
            })
            }
        })
      }
      //计算费用
      function feiyong(orderNo:string){
        jsfeiy(orderNo).then(() => {
          queryParams.orderNo = orderNo
          getjqrlist(queryParams).then(rps => {
              if(rps.data){
                xqobj.value = (rps.data as any).records[0]
              }
          })

          gethdbz(orderNo).then((rps:any) => {
            hdbz.value = rps.data
          })
        })
      }

    //取消
    function cancel() {
      openpop.value = false
    }

      //删除
    function handleDelete(row:any) {
      ElMessageBox.confirm(
        `确定删除订单`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
        delhdz(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getyys()
          })
      })
    }

    //详情 修改
    let drawer = ref(false)
    let hdbz = ref<any[]>([])
    let xqobj = ref<any>({})
    function getdetails(n:any) {
      xqobj.value = n
      drawer.value = true
      gethdbz(n.orderNo).then((rps:any) => {
        hdbz.value.splice(0)
        if(rps.data){
          hdbz.value = rps.data
        }
        
      })
    }


    //批量支付
    let dzarr = ref<any[]>([])
    function selChange(v:any) {
      dzarr.value = v
    }

    function payment() {
      if(dzarr.value.length > 0){
        // ElMessage({
        //     type: 'success',
        //     message: '支付成功'
        //   })
      }else{
        ElMessage({
          type: 'warning',
          message: '请选择订单'
        })
      }
    }
  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  </style>