<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="outTradeNo">
                <el-input v-model="queryParams.outTradeNo" placeholder="请输入交易编码" clearable />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" style="width: 180px" placeholder="请选择状态">
                <el-option label="编辑中" value="edit" />
                <el-option label="提交" value="submit" />
                <el-option label="完成" value="finish" />
                <el-option label="打回" value="reject" />
              </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: space-between;">
          <!-- <div>
            
              <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="620px"
        >
            <el-table-column label="交易人" min-width="150" align="center" prop="trader" :show-overflow-tooltip="true" />
            <el-table-column label="交易编码" min-width="220" align="center" prop="outTradeNo" :show-overflow-tooltip="true" />
            <el-table-column label="交易类型" min-width="120" align="center" prop="orderPreUname" :show-overflow-tooltip="true">
              <div>订单消费</div>
            </el-table-column>
            <!-- <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="payType" :show-overflow-tooltip="true">
              <template #default="scope">
                <!--1-账户余额，2-微信，3-支付宝，4-网银，5 -充电补偿 6 公对公-->
                    <div v-if="scope.row.payType == 1">账户余额</div>
                    <div v-else-if="scope.row.payType == 2">微信</div>
                    <div v-else-if="scope.row.payType == 3">支付宝</div>
                    <div v-else-if="scope.row.payType == 4">网银</div>
                    <div v-else-if="scope.row.payType == 5">充电补偿</div>
                    <div v-else-if="scope.row.payType == 6">公对公</div>
                </template>
            </el-table-column>
            <!-- <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="orderCount" :show-overflow-tooltip="true" />
            <el-table-column label="交易金额(元)" min-width="120" align="center" prop="tradeAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.tradeAmount?scope.row.tradeAmount/100:''}}</div>
              </template>
            </el-table-column>
            <el-table-column label="交易凭证" min-width="120" align="center" prop="pingz" :show-overflow-tooltip="true">
              <template #default="scope">
                <img v-if="scope.row.payType == 6 && scope.row.tradeMessage" :src="scope.row.tradeMessage" style="width: 50px;height: 50px;" />
              </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">{{staname(scope.row.status)}}</div>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="240" fixed="right">
              <template #default="scope">
                <el-button link type="primary" icon="Tickets" @click="showxq(scope.row.outTradeNo)">查看详情</el-button>
                <el-button v-if="scope.row.payType == 6 && (scope.row.status == 'edit' || scope.row.status == 'reject')" link type="primary" icon="Edit" @click="showpz(scope.row)">上传凭证</el-button>
                <el-button v-if="scope.row.payType == 6 && scope.row.status == 'submit'" link type="primary" icon="Edit" @click="showsh(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>
  
      <!--上传凭证-->
      <el-dialog 
        v-model="popshow" 
        title="上传凭证" 
        width="500px" 
        append-to-body
        align-center
        :close-on-click-modal="false"
      >
        <el-form ref="typeform" :model="addObj" label-width="100px">
          <el-form-item label="交易人">
            <el-input v-model="xqlist.trader" disabled />
          </el-form-item>
          <el-form-item label="订单数量">
            <el-input v-model="xqlist.orderCount" disabled />
          </el-form-item>
          <el-form-item label="交易金额(元)">
            <el-input v-model="xqlist.tradeAmount" disabled />
          </el-form-item>
          <el-form-item label="凭证">
            <el-upload
              :headers="{
                Authorization:Token
              }"
              :data="{useFor:1}"
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleSuc"
              :before-upload="beforeAvatarUpload"
            >
            <img v-if="addObj.tradeMessage" :src="addObj.tradeMessage" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <!-- <el-input v-model="addObj.picUrl" placeholder="请选择图片" /> -->
          </el-form-item>
      
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="save">提 交</el-button>
            <el-button @click="canceltype">取 消</el-button>
          </div>
        </template>
      </el-dialog>

      <!--审核-->
      <!--上传凭证-->
      <el-dialog 
        v-model="shpopshow" 
        title="审核" 
        width="500px" 
        append-to-body
        align-center
        :close-on-click-modal="false"
      >
        <el-form ref="typeform" :model="shobj" label-width="100px">
          <el-form-item label="交易人">
            <el-input v-model="shobj.trader" disabled />
          </el-form-item>
          <el-form-item label="订单数量">
            <el-input v-model="shobj.orderCount" disabled />
          </el-form-item>
          <el-form-item label="交易金额(元)">
            <el-input v-model="shobj.tradeAmount" disabled />
          </el-form-item>
          <el-form-item label="凭证">
            <el-image 
              style="width: 300px; height: 300px"
              :src="shobj.tradeMessage" 
              :preview-src-list="[shobj.tradeMessage]">
            </el-image>
            <!-- <el-input v-model="addObj.picUrl" placeholder="请选择图片" /> -->
          </el-form-item>
      
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="success" @click="shehe(1)">通 过</el-button>
            <el-button type="primary" @click="shehe(0)">驳 回</el-button>
            <el-button @click="shcancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>


      <!--详情列表-->
      <el-dialog 
        v-model="orderpop" 
        title="订单详情" 
        width="80%" 
        append-to-body
        align-center
        :close-on-click-modal="false"
      >
        <orderlist v-if="orderpop" :tradeNo="tradeNo" />
      </el-dialog>

    </div>
  </template>
  <script setup lang="ts" name="UserPage">
        import { 
            traclist,
            uppingz,
            examine
        } from '@/api/order/transaction'

      import type { UploadProps } from 'element-plus'
      import { getToken } from "@/utils/auth";

      import { ref,reactive,watch} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'
      
      import Orderlist from './orderlist.vue'



      let queryParams = reactive({
        wuid:'',	                          //用户编码
        pageSize:20,	                      //每页条数,示例值
        pageNo:1,	                          //页数
        stationCode:'',	                    //换电站编码
        accountCode:'',	                    //账号编码
        accountName:'',	                    //账号
        outTradeNo:'',	                    //交易编码
        tradeType:'',	                      //交易类型：1-充值，2-订单消费，9-提现
        payType:'',	                        //支付方式：1-账户余额，2-微信，3-支付宝，4-网银，5 -充电补偿
        status:''
     })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])

      let search = ref(true)
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }

      function staname(n:string) {
        if(n == 'edit'){
          return '编辑中'
        }else if(n == 'submit') {
          return '提交'
        }else if(n == 'finish') {
          return '完成'
        }else if(n == 'reject'){
          return '打回'
        }else {
          return ''
        }
      }

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

      let querform = ref()
      function resetQuery() {
        querform.value?.resetFields()
      }

       function handleSizeChange(val:number) {
        queryParams.pageSize = val
        getyys()
      }
      
      getyys()
      
      //查看详情
       let orderpop = ref(false)
       let tradeNo = ref('')
       function showxq(code:string) {
        console.log(code)
        orderpop.value = true
        tradeNo.value = code
       }

      //上传凭证
      let popshow = ref(false)
      let xqlist = ref<any>({})
      let addObj = reactive({
        pkId:'',
        tradeMessage:''  //图片地址
      })
      
      function showpz(row:any) {
        addObj.tradeMessage = ''
        addObj.pkId = row.pkId
        popshow.value = true
        xqlist.value = {...row}
        xqlist.value.tradeAmount = xqlist.value.tradeAmount?xqlist.value.tradeAmount/100:''
      }

      const Token = `Bearer ${getToken()}`
      
      const uploadUrl = `${import.meta.env.VITE_APP_BASE_API}/resource/file/img/upload`
      //图片上传限制
      const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
          if (rawFile.type !== 'image/jpeg') {
            ElMessage.error('请上传jpg图片')
            return false
          } else if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error('上传图片大小不能超过2MB')
            return false
          }
          return true
        }

      //图片上传成功回调
      const handleSuc: UploadProps['onSuccess'] = (
        response,
        uploadFile
      ) => {
        if(response.code == 1000){
          addObj.tradeMessage = response.data
        }
        //addObj.picUrl = URL.createObjectURL(uploadFile.raw!)
        console.log(uploadFile)
      } 

      function save() {
        if(addObj.tradeMessage == ''){
          ElMessage({
              type: 'warning',
              message: '请上传凭证'
            })
        }else{
          uppingz(addObj).then(() => {
            ElMessage({
              type: 'success',
              message: '提交成功'
            })
            popshow.value = false
            getyys()
          })
        }
        
      }
      function canceltype() {
        popshow.value = false
      }

      //审核
      let shpopshow = ref(false)
      let shobj = ref<any>({})
       function showsh(row:any) {
        console.log(row,'row')
        shpopshow.value = true
        shobj.value = {...row}
        shobj.value.tradeAmount = shobj.value.tradeAmount?shobj.value.tradeAmount/100:''
      }
      function shcancel() {
        shpopshow.value = false
      }

      function shehe(type:string|number) {
        examine({
          id:shobj.value.pkId,
          type  //1 通过 0驳回
        }).then(() => {
          ElMessage({
              type: 'success',
              message: '操作成功'
            })
            shpopshow.value = false
            getyys()
        })
      }
      
  </script>
   <style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style>
