<template>
  <div>
    <a-card style="box-sizing:border-box;padding:30px">
      <!-- 选择下单的应用列表 -->
      <a-form>
        <div style="display:flex;flex-direction:row">
          <a-form-item label="提现账户" class="table-head-layout"  >
            <a-select v-model:value="vdata.saveObject.accountIndex" @change="getAccountIndex"  name="accountIndex" style="width:450px"  placeholder="请选择提现账户">
              <a-select-option  v-for="(item, index) in vdata.accountList" :key="index" v-model:value="item.type">{{ item.typeNameDesc }} | {{ item.realName }}  |{{ item.phone }}  | 可用余额：{{ (item.balacne / 100).toFixed(2) }} </a-select-option>
            </a-select>
          </a-form-item>
        </div>
      </a-form>
    </a-card>
    <a-card style="box-sizing:border-box;padding:30px;margin-top: 10px;">
      <!-- 支付测试面板 v-if=""-->
      <div  style="width: 100%;" class="paydemo">
        <!-- 订单信息 -->
        <div class="paydemo-type-content">

          <a-form  ref="infoFormModel" :model="vdata.cashInfo" :rules="vdata.rule" layout="vertical">

            <a-row justify="space-between" type="flex">

              <a-col :span="11">
                <a-form-item label="结算人名称" name="settleName">
                  <a-input v-model:value="vdata.cashInfo.settleName" placeholder="请输入结算人名称" />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="结算人身份证" name="settleCard">
                  <a-input v-model:value.trim="vdata.cashInfo.settleCard" placeholder="请输入结算人身份证"/>
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label=" 结算银行卡账号" name="settleNo">
                  <a-input v-model:value="vdata.cashInfo.settleNo" placeholder="请输入结算银行卡账号" />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="开户行省市县" name="bankCardAreaCode">
                  <JeepayAreaSelectYs  v-model:value="vdata.cashInfo.bankCardAreaCode" @change="searchAreaFunc"/>
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="开户银行名称" name="bankName">
                  <a-input v-model:value.trim="vdata.cashInfo.bankName" placeholder="请输入开户银行名称"/>
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="开户行手机号" name="bankMobile">
                  <a-input v-model:value.trim="vdata.cashInfo.bankMobile" placeholder="请输入开户行手机号"/>
                </a-form-item>
              </a-col>

              <a-col :span="11">
                <a-form-item label="提现金额" name="price">
                  <a-input-number v-model:value="vdata.cashInfo.price"  :property="2" style="width:  450px" placeholder="请提现金额"/>

                </a-form-item>
                <p style="padding-top: 30px;">提现到账时间：下个工作日24点前到账</p>

              </a-col>
              <a-col :span="11">

              </a-col>

            </a-row>
          </a-form>
          <div style="margin-top:20px;text-align: left">
            <a-button v-if="$access('ENT_MCH_PAY_TEST_DO')" style="padding:5px 20px;background-color: #1953ff;border-radius: 5px;color:#fff" @click="submitPay">立即提交</a-button>
          </div>
        </div>
      </div>
    </a-card>
  </div>

  <a-card style="box-sizing:border-box;padding:20px;margin-top: 10px;">
    <div  style="width: 100%;" class="paydemo">
      <div class="paydemo-type-content">
        <div class="paydemo-type-name article-title">
          常见问题
        </div>
        <a-divider />
        <div class="title-content">
          <h4>提现到账时效？</h4>
          <p>
            一般在 <b style="color:#FF0000;">下个工作日24点前到账</b>，请在提现发起后留意资金到账情况，节假日受央行系统影响，具体到账时间请以银行为准。
          </p>
          <h4> 提现记录查询？</h4>
          <p>
            发起提现操作后，可以在资金明细中查询提现的进度和状态；<br>

            操作路径：【商家平台】->【资金中心】->【资金管理】->变动类型选择提现<br>

            提现操作后，一般会进入以下几个状态：<br>

            1）提现审核中：该状态表明提现资金信息已创建，等待风控及财务审核后进行打款，处理时间以银行为主，正常一个工作日完成；<br>

            2）成功：该状态表示提现已经成功；该笔资金已流入银行账户，若银行账户未收到资金，您可以联系客服咨询；<br>

            3）提现失败：因某些原因提现异常，状态会变成提现失败；<br>
          </p>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import {
  API_URL_MCH_APP,
  API_URL_MCH_STORE_LIST,
  req,
  $payTest,
  $payTestOrder,
  $bankBranchList,
  API_MCH_PAY_ACCOUNT,API_URL_ACCOUNT_CASH
} from '@/api/manage' // 接口
import {ref, onMounted, reactive, getCurrentInstance,nextTick,inject,watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
const router = useRouter() //这是全部路由

// 获取全局函数
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties


const route = useRoute()
const vdata =  reactive({
  saveObject: {accountIndex:0} as any, // app列表
  mchAppList: [] as any, // app列表
  mchStoreList: [] as any, // 门店列表
  appId: '', // 已选择的appId
  storeId: '', // 已选择的门店ID
  appPaywayList: [] as any, // 商户app支持的支付方式
  currentWayCode: '', // 以何种方式进行支付，默认是微信二维码
  currentPayDataType: '', // 支付参数
  mchOrderNo: '', // 模拟商户订单号
  authCode: '', // 条码的值
  autoPosExtra: {}, // 智能POS参数
  paytestAmount: 0.01, // 支付金额，默认为0.01
  amountInput: false, // 自定金额输入框是否展示
  noConfigText: false, // 尚无任何配置分割线提示文字
  divisionMode: 0, // 订单分账模式
  orderRemarks: '', // 订单标题
  orderNumber: '', // 订单标题
  orderType:1,
  divisionMode1:0.01,  //默认支付金额绑定
  webCashierIsShow: true,  // 是否显示web统一收银台
  rule:{
    accountNo: [{ required: true, message: '请选择提现付账户', trigger: 'blur' }],
    settleNo: [{ required: true, message: '请输入结算银行卡账号', trigger: 'blur' }],
    settleName: [{ required: true, message: '请输入结算人名称', trigger: 'blur' }],
    settleCard: [{ required: true, message: '请输入结算人身份证', trigger: 'blur' }],
    bankMobile: [{ required: true, message: '请选择开户手机号', trigger: 'blur' }],
    bankName: [{ required: true, message: '请选择开户银行名称', trigger: 'blur' }],
    bankCardAreaCode: [{ required: true, message: '请选择开户行省市县', trigger: 'blur' }],
    // cashAmt: [{ required: true, message: '请输入正确的金额，最多支持2位小数，单笔充值金额区间100-50000', trigger: 'blur', type: 'number', min: 0.01,max:50000 }],
    price: [{ required: true, message: '请输入正确的金额，单笔充值金额区间100-50000', trigger: 'blur', type: 'number',  min: 100,max:50000 }],
  },
  cashInfo:{
    cashAmt:0,
    price:'',
    settleName: "", //结算人姓名
    settleNo: "", //结算人卡号
    settleCard: "", //结算人姓名
    bankMobile: "", //结算人卡号
    bankCardAreaCode: "", //地区code 用-连接
    bankCardAreaName: "", //地区名称 用-连接
    bankName: "" //银行卡名称
  },
  bankInfoList:[],
  filteredBankInfoList:[],
  accountState:0,
  accountList:[] as any,
})
const infoFormModel = ref()

const saveRule = {
  appId: [{ required: true, message: '请选择应用', trigger: 'blur' }],
  storeId: [{ required: true, message: '请选择门店', trigger: 'blur' }],
  fixedPayAmount: [{ required: true, message: '请输入固定金额', trigger: 'blur', type: 'number', min: 0.01 }],
}
onMounted(()=>{
  if(useRoute().query.index !== undefined){
    // vdata.saveObject = {accountIndex:useRoute().query.index} as any
    vdata.saveObject.accountIndex = parseInt(useRoute().query.index as any)
    console.log(vdata.saveObject.accountIndex ,'vdata.saveObject.accountIndex ')
  }
})

function submitPay(){
  if(vdata.saveObject.accountIndex == undefined){
      $infoBox.message.error('请选择提现账户')
      return false;
  }
  infoFormModel.value.validate().then(() => {
    let price = vdata.cashInfo.price as any;
    vdata.cashInfo.cashAmt = price * 100
    req.add(API_URL_ACCOUNT_CASH,{accountNo:vdata.accountList[vdata.saveObject.accountIndex].accountNo,cashInfo:vdata.cashInfo}).then(res => {
      $infoBox.message.success('提现审核中')
      setTimeout(() => {
        router.push({
          path:'/fundLog'
        })
      }, 1000)
    }).catch(err => {
      // $infoBox.message.error(err)
    })
  });
}

function changeAppId(){

}
function getAccountIndex(value){
  console.log(value,'value')
}
getAccount()
function  getAccount(){

  req.list(API_MCH_PAY_ACCOUNT,{}).then(res => {
    vdata.accountList = res
  })
}
function  getOrderType(type){
  vdata.orderType = type
}


function searchAreaFunc(value) {
  if (vdata.cashInfo.bankCardAreaName) {
    vdata.cashInfo.bankCardAreaName = ''
  }
  if (value.length) {
    if (value.length == 2) {
      vdata.cashInfo.bankCardAreaName = value[0].label + '-' + value[1].label + ''
    } else if (value.length == 3) {
      vdata.cashInfo.bankCardAreaName = value[0].label + '-' + value[1].label + '-' + value[2].label + ''
    }
  }
  console.log(vdata.cashInfo,'vdata.cashInfo')

}

// 开户行所在省市区

</script>

<style scoped lang="css">
@import './recharge.css';
.article-title-span{
  padding: 0 10px;
}
.span-active{
  color: #1677ff;
}
.span-active::after{
//content: '' !important;
//display: block !important;
//background-color: rgba(44, 110, 246, 1) !important;
//border-radius: 45px !important;
//width: 22px !important;
//height: 4px !important;
}
h4{
  color: #333;
  height: 30px;
  padding: 20px 0;
}
.title-content p{
  color: #9b9b9b;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 5px;
  white-space: pre-line;
}
.title-content h4{
  font-weight: bold;;
}
.paydemo .paydemo-type-content{
  padding: unset !important;
}
.paydemo-address{
  display: block !important;
  background: #f9f9f9;
  border-radius: 5px;
}
.paydemo-address p{
}

.paydemo-address-div{
  width: 600px;
  display: flex;
}
.span1{
  width: 80px !important;
  text-align:right;
  padding: 15px 10px 0 10px;
}
.span2{
  width: 280px !important;
  text-align:left;
  padding: 15px 5px 0 15px;
}
.span3{
  padding: 5px 0 0 0;
  width: 100px !important;
  text-align:right;
  color: #1677ff;
}
.layui-form{
  margin-top:50px;
}
.paydemo-form-item{
  padding-top:10px ;
  padding-bottom:10px ;
}
.table-head-layout{
  margin-bottom: unset !important;
}
</style>
