<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title=" true ? '申请单详情' : '' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="vdata.visible = false"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="申请类型">
            <a-tag v-if="vdata.detailData.settType == 1" color="pink">佣金提现</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="单号">{{ vdata.detailData['rid'] }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="申请用户">{{ vdata.detailData.infoName }}({{ vdata.detailData.infoId }})</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col v-if="$hasAgentEnt()" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="所属系统">
            <span v-if="vdata.detailData.infoType == 'AGENT' ">代理商</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="申请金额">
            <a-tag color="green">
              {{ vdata.detailData.applyAmount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="结算金额">
            <a-tag color="green">
              {{ vdata.detailData.settAmount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="手续费">
            <a-tag color="green">
              {{ vdata.detailData.settFeeAmount/100 }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="手续费公式">
            {{ vdata.detailData.settFeeRule }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="结算账户类型">
            <span v-if="vdata.detailData.settAccountType == 'WX_CASH'">个人微信</span>
            <span v-if="vdata.detailData.settAccountType == 'ALIPAY_CASH'">个人支付宝</span>
            <span v-if="vdata.detailData.settAccountType == 'BANK_CARD'">银行卡</span>
            <span v-if="vdata.detailData.settAccountType == 'BANK_PUBLIC'">对公</span>
            <span v-if="vdata.detailData.settAccountType == 'BANK_PRIVATE'">对私</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="结算账户账号">{{ vdata.detailData['settAccountNo'] }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="结算账户姓名">{{ vdata.detailData['settAccountName'] }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="结算账户开户行名称">{{ vdata.detailData['settAccountBank'] }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="联系人姓名">{{ vdata.detailData['contactName'] }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="联系人手机号">{{ vdata.detailData['settAccountTelphone'] }}</a-descriptions-item></a-descriptions>
      </a-col>

      <a-col :sm="12">
        <a-descriptions>
          <!--  提现状态 结算状态: 1-审核中, 2-审核失败, 3-结算中, 4-结算成功, 5-结算失败  -->
          <a-descriptions-item label="状态">
            <a-tag v-if="vdata.detailData.state == 1" color="orange">待审核</a-tag>
            <a-tag v-if="vdata.detailData.state == 2" color="green">审核失败</a-tag>
            <a-tag v-if="vdata.detailData.state == 3" color="red">结算中</a-tag>
            <a-tag v-if="vdata.detailData.state == 4" color="green">结算成功</a-tag>
            <a-tag v-if="vdata.detailData.state == 5" color="red">结算失败</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="申请日期">{{ vdata.detailData['createdAt'] }}</a-descriptions-item></a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions><a-descriptions-item label="审核时间">{{ vdata.detailData['auditTime'] }}</a-descriptions-item></a-descriptions>
      </a-col>

      <template v-if="vdata.detailData['transferMchAppId']">
        <a-col :sm="12">
          <a-descriptions><a-descriptions-item label="自动打款应用ID">{{ vdata.detailData['transferMchAppId'] }}</a-descriptions-item></a-descriptions>
        </a-col>

        <a-col :sm="12">
          <a-descriptions><a-descriptions-item label="自动打款接口">{{ vdata.detailData['transferIfCode'] }}</a-descriptions-item></a-descriptions>
        </a-col>

        <a-col :sm="12">
          <a-descriptions><a-descriptions-item label="自动打款转账单号">{{ vdata.detailData['transferOrderId'] }}</a-descriptions-item></a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="自动打款结算手续费">
              {{ isNaN(vdata.detailData['transferPlatformMchfeeAmount']) ? '' : vdata.detailData['transferPlatformMchfeeAmount'] / 100 }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="自动打款实际成本">
              {{ isNaN(vdata.detailData['transferPlatformCostAmount']) ? '' : vdata.detailData['transferPlatformCostAmount'] / 100 }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </template>
    </a-row>

    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="申请资料">
          <img v-if="vdata.detailData['settCertImg']" style="width: 200px" :src="vdata.detailData['settCertImg']" @click="previewFileFunc(vdata.detailData['settCertImg'])">
        </a-form-item>
      </a-col>
      <a-col :sm="24">
        <a-form-item label="打款凭证">
          <img v-if="vdata.detailData['transferCertImg'] && vdata.detailData['state'] == 4" style="width: 200px" :src="vdata.detailData['transferCertImg']" @click="previewFileFunc(vdata.detailData['transferCertImg'])">
        </a-form-item>
      </a-col>
    </a-row>

    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="用户提现备注">
          <a-textarea v-model:value="vdata.detailData['applyRemark']" :rows="3" disabled="disabled" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="审核备注">
          <a-textarea v-model:value="vdata.detailData['auditRemark']" :rows="3" disabled="disabled" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="结算备注[系统生成]">
          <a-textarea v-model:value="vdata.detailData['settInfo']" :rows="3" disabled="disabled" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
  
import { API_URL_CASHOUT_RECORD, req } from '@/api/manage'
import {reactive, getCurrentInstance} from 'vue'

const { $infoBox, $viewerApi, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties


const vdata :any = reactive({
    visible: false, // 是否显示弹层/抽屉

    recordId: null, // 更新对象ID
    detailData: {  }, // 数据对象
})

function show (recordId) { // 弹层打开事件
    vdata.detailData = { } // 数据清空
    vdata.recordId = recordId
    req.getById(API_URL_CASHOUT_RECORD, recordId).then(res => {
      vdata.detailData = res
    })

    vdata.visible = true
 }


// 预览图片
function previewFileFunc(img){
    $viewerApi({images: [img]})
} 


//抛出show函数给父组件
defineExpose({ show })
</script>
