<template>
  <page-layout>
    <div class="bg-white q-pa-md text-dark text-center">
      <div class="text-h4 q-pb-sm">¥{{ formatMoney(info.money) }}</div>
      <div class="text-caption" :class="{'text-red':info.state==3,'text-green':info.state == 2}">
        {{ WITHDRAW_STATE[info.state] }}
        <span class="text-caption" v-if="info.state!=1 && info.seller_remark">
          ：{{ info.seller_remark }}
        </span>
      </div>
    </div>
      <q-list class="bg-white q-mt-sm" separator>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>昵称</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ info.customer.remark||info.customer.nickname }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>姓名</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ info.customer.real_name }}
          </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.customer.real_name)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>提现渠道</q-item-label>
          </q-item-section>
          <q-item-section>
            {{  PAY_TYPES[info.type]?.name }}
          </q-item-section>
        </q-item>
        <template v-if="info.type == 2">
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>银行卡号</q-item-label>
          </q-item-section>
          <q-item-section>
            {{info.bank_no}}
            </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.bank_no)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>开户行</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ info.bank_master }}
          </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.bank_master)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>支行</q-item-label>
          </q-item-section>
          <q-item-section>
           {{info.bank_branch}}
          </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.bank_branch)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
        <q-item class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>银行卡所在地</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ info.bank_area }}
          </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.bank_area)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
      </template>
        <q-item v-else class="items-start">
          <q-item-section class="q-pt-sm  q-mt-xs col-4">
            <q-item-label>支付宝</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ info.ali_account }}
          </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.ali_account)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>电话</q-item-label>
          </q-item-section>
          <q-item-section>
          <a :href="'tel:' + info.customer.phone">{{ info.customer.phone }}
            <q-icon color="green" name="phone" />
          </a>
          </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.customer.phone)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>提现金额</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ formatMoney(info.money) }}
          </q-item-section>
          <q-item-section side>
            <q-badge @click.stop.prevent="safeCopyToClipboard(info.money)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>申请时间</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ info.created_at }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section class="col-4">
            <q-item-label>操作时间</q-item-label>
          </q-item-section>
          <q-item-section>
            {{ info.remark_at }}
          </q-item-section>
        </q-item>
      </q-list>
      <template #footer>
        <q-footer v-if="info.state ==1" class="row">
          <!-- <q-btn square="" class="col-4" unelevated color="green">呼叫</q-btn> -->
          <q-btn square="" class="col-5" unelevated color="accent" @click="audit(3)">失败</q-btn>
          <q-btn square="" class="col-7" unelevated color="primary" @click="audit(2)">成功</q-btn>
        </q-footer>
      </template>
  </page-layout>
</template>
<script setup>
import {ref,reactive} from 'vue'
import {useRoute} from 'vue-router'
import { useSelfStore } from 'stores/self';
import { useQuasar } from 'quasar';
import { Rules,formatMoney } from 'src/utils/tools';
import { api } from "boot/axios"
import { PAY_TYPES,WITHDRAW_STATE} from 'src/utils/const'
import { safeCopyToClipboard } from "src/utils/tools.js"
const store = useSelfStore()
const $q = useQuasar()
const info = ref({customer:{}})
const route = useRoute()
function load() {
  api
    .getCustomerWithdrawInfo({ id: route.query.id })
    .then((res) => {
      info.value = res;
    })
    .catch((e) => {
      $q.notify({ type: "negative", message: e.message });
    })
    .finally(() => {
      $q.loading.hide();
    });
}
$q.loading.show();
load();

function audit(state){
  $q.dialog({
    title: "审核备注",
    prompt: {
      model: "",
      type: "textarea", // optional
      placeholder: "请输入备注"
    },
    cancel: {
      label: "取消",
      flat:true
    },
    ok: "确定"
  }).onOk((data) => {
    api.auditCustomerWithdraw({id:route.query.id,state,remark:data}).then((res) => {
      load();
      $q.notify({ type: "positive", message:'操作成功'});
    })
    .catch((e) => {
      $q.notify({ type: "negative", message: e.message });
    });
  });
}

</script>
<style lang="scss" scoped>

</style>
