<template>
    <div>
      <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
        <!--@selection-change="selChange"-->
        <el-table
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          max-height="680px"
        >
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column label="订单号" min-width="320" align="center" prop="orderNo" :show-overflow-tooltip="true" />
            <el-table-column label="订单类型" min-width="80" align="center" prop="sourceFrom" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.orderType == 1">换电</div>
                    <div v-else-if="scope.row.orderType == 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="stationName" :show-overflow-tooltip="true" />
            <el-table-column label="预约人" min-width="120" align="center" prop="orderPreUname" :show-overflow-tooltip="true" />
            <!-- <el-table-column label="预约人电话" min-width="120" align="center" prop="orderPrePhone" :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 == 8">支付中</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="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]"
              background0
              size="small"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="getyys"
            />
          </div>
      </div>
    </div>
  </template>
  <script setup lang="ts" name="UserPage">
      import { 
          getjqrlist, 
    
      } from '@/api/order/replabatt'

      import { ref,reactive,watch} from 'vue'
    
      const props = defineProps<{
        tradeNo:string
      }>()

      //计费方式
        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:props.tradeNo,
        status:''
     })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }

      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()
      }
      
      getyys()

  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  </style>