<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" 
          label-width="auto"
        >
        <!-- <el-form-item label="车辆类型" prop="typeCode">
          <el-select v-model="queryParams.typeCode" style="width: 200px;" placeholder="请选择车辆类型">
              <el-option v-for="n in cartypelist" :label="n.typeName" :value="n.typeCode" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="运营商" prop="proxyId">
              <el-select v-model="queryParams.proxyId" placeholder="请选择运营商"  style="width: 200px;">
                  <el-option v-for="n in yunList" :label="n.label" :value="n.value" />
              </el-select>
          </el-form-item>
        <el-form-item label="分账状态">
          <el-select v-model="queryParams.status" placeholder="请选择分账状态" style="width: 200px;">
              <el-option label="待分账" :value="0" />
              <el-option label="已分账" :value="1" />
          </el-select>
        </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: right;">
          <el-tooltip class="item" effect="dark" :content="search? '隐藏搜索' : '显示搜索'" placement="top">
            <el-button size="mini" circle icon="Search" @click="search = !search" />
          </el-tooltip>
        </div> -->
        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          :max-height="search?'600px':'680px'"
          :summary-method="getSummaries"
          show-summary
        >
            <el-table-column label="运营商" min-width="150" align="center" prop="proxyName" :show-overflow-tooltip="true" />
            
            <el-table-column label="订单数量" min-width="150" align="left" prop="orderCount" :show-overflow-tooltip="true" />
            <el-table-column label="分账总金额(元)" min-width="150" align="left" prop="accountTotalAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.accountTotalAmount}}</div>
              </template>
            </el-table-column>
            <el-table-column label="应分金额(元)" min-width="150" align="left" prop="orderTotalAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.orderTotalAmount}}</div>
              </template>
            </el-table-column>
            <el-table-column label="税点总金额(元)" min-width="150" align="left" prop="taxPointTotalAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.taxPointTotalAmount}}</div>
              </template>
            </el-table-column>
            <el-table-column label="手续费" min-width="150" align="left" prop="totalHandlingFee" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.totalHandlingFee}}</div>
              </template>
            </el-table-column>
            <el-table-column label="实际分账金额(元)" min-width="150" align="left" prop="totalAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                  <div>{{scope.row.totalAmount}}</div>
                </template>
              </el-table-column>
            <el-table-column label="分账开始时间" min-width="150" align="center" prop="independentAccountBegin" :show-overflow-tooltip="true" />
            <el-table-column label="分账结束时间" min-width="150" align="center" prop="independentAccountEnd" :show-overflow-tooltip="true" />
            <el-table-column label="分账状态" min-width="100" align="center" prop="status" :show-overflow-tooltip="true">
              <template #default="scope">
                <div v-if="scope.row.status == 0">待分账</div>
                <div v-else-if="scope.row.status == 1" style="color: #237d00;">已分账</div>
              </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>
      
    
    </div>
  </template>
  <script setup lang="ts">
      import { 
        getyysfz
      } from '@/api/order/account'
      import { 
        optionyyslist
      } from '@/api/systemSet/operator'
      import { ref,reactive,watch,h} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      let search = ref(true)

      let queryParams = reactive({
        pageNo:1,
        pageSize:20,
        proxyId:'',       //运营商名称
        status:0            //分账状态
      })
      
      //初始查询运营商
      let yunList = ref<any>([])
      optionyyslist().then(rps => {
            if(rps.data){
                //let list = (rps.data as any).records
                yunList.value = rps.data
            }
        })

      //查询
      let total = ref(0)
      let yysList = ref<any>([])

      let sumtotal = ref<any>({})
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }

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

      function handleSizeChange(val:number) {
        queryParams.pageSize = val
        getyys()
      }
      
      //重置
      let querform = ref()
      function resetQuery() {
        querform.value?.resetFields()
      }


      const getSummaries = (param:any) => {
      const { columns } = param
      const sums:any = []
      columns.forEach((column:any, i:any) => {
        if (i === 0) {
          sums[i] = h('div', { style: { fontSize:'18px' } }, [
            '合 计',
          ])
        }else if(i == 1) {
          sums[i] = sumtotal.value.orderCount
        }else if(i == 2){
          sums[i] = sumtotal.value.accountTotalAmount
        }else if(i == 3){
          sums[i] = sumtotal.value.orderTotalAmount
        }else if(i == 4){
          sums[i] = sumtotal.value.taxPointTotalAmount
        }else if(i == 5){
          sums[i] = sumtotal.value.handlingFee
        }else if(i == 6){
          sums[i] = sumtotal.value.totalAmount
        }else {
          sums[i] = ''
        }
      })

      return sums
    }
 

    getyys()


    
  </script>
  <style scoped>
  /* 隐藏全选按钮 */
  :deep(.el-table .disabledCheck .cell .el-checkbox__inner) {
    display: none;
  }
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  </style>