<template>
  <q-item v-if="props.item.state==1" class="bg-white q-mt-sm" clickable @click="router.push({ path: '/customer/wallet/draw/info', query: { id: props.item.id } })">
    <q-item-section avatar>
      <UserAvatar :src="props.item.customer.avatar_url||props.item.customer.avatar" size="lg" color="accent" />
    </q-item-section>
    <q-item-section>
      <q-item-label>{{ props.item.customer.remark || props.item.customer.nickname }}</q-item-label>
      <q-item-label class="text-grey ellipsis" v-if="props.item.type == 1" @click.stop.prevent="see = !see">
        支付宝：{{ see ? props.item.ali_account : '******' }}
        <q-icon :name="!see ? 'remove_red_eye' : 'visibility_off'" />
        <q-badge @click.stop.prevent="safeCopyToClipboard(props.item.ali_account)" class="q-ml-sm" color="grey-3" text-color="primary"
          unelevated dense size="sm" label="复制" />
      </q-item-label>
      <template v-else>
        <q-item-label class="text-grey">
          户名：{{ props.item.bank_master }}
          <q-badge @click.stop.prevent="safeCopyToClipboard(props.item.bank_master)" class="q-ml-sm" color="grey-3" text-color="primary" unelevated dense
            size="sm" label="复制" />
        </q-item-label>
        <q-item-label @click.stop.prevent="see = !see" class="text-grey ellipsis">
          银行卡：{{ see ? props.item.bank_no : '******' }}
          <q-icon :name="!see ? 'remove_red_eye' : 'visibility_off'" />
          <q-badge @click.stop.prevent="safeCopyToClipboard(props.item.bank_no)" class="q-ml-sm" color="grey-3" text-color="primary"
            unelevated dense size="sm" label="复制" />
        </q-item-label>
      </template>
      <q-item-label class="text-grey" v-if="props.item.customer.phone">
        <a :href="'tel:' + props.item.customer.phone" @click.stop>电话：****{{ props.item.customer.phone?.substr(-6) }}
          <q-icon name="phone" />
        </a>
      </q-item-label>
    </q-item-section>
    <q-item-section side>
      <q-item-label>¥{{ formatMoney(props.item.money) }}
        <q-badge @click.stop.prevent="safeCopyToClipboard(formatMoney(props.item.money))" class="q-ml-sm" color="grey-3"
          text-color="primary" unelevated dense size="sm" label="复制" />
        <q-icon name="arrow_forward_ios" size="14px" />
      </q-item-label>
    </q-item-section>
  </q-item>
<div v-else>
  <q-item class="bg-white q-mt-sm" clickable @click="router.push({ path: '/customer/wallet/draw/info', query: { id: props.item.id } })">
        <q-item-section avatar>
          <UserAvatar :src="props.item.customer.avatar_url||props.item.customer.avatar" size="lg" color="accent" />
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ props.item.customer.remark || props.item.customer.nickname }}
            <a v-if="props.item.customer.phone" :href="'tel:' + props.item.customer.phone" class="text-grey text-caption">
              (用户：尾号{{ props.item.customer.phone?.substr(-6) }}
              <q-icon name="phone" />)
            </a>
          </q-item-label>
         <q-item-label caption>{{ props.item.remark_at }}</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-item-label>¥{{ formatMoney(props.item.money) }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-separator inset/>
      <div class="bg-white q-pa-md">
        <div>{{ WITHDRAW_STATE[props.item.state] }}：{{ props.item.seller_remark }}</div>
        <div class="text-right text-grey ellipsis text-caption"  @click.stop.prevent="see = !see">
          <template v-if="props.item.type == 1">
            支付宝：{{ see ? props.item.ali_account : '******' }}
          </template>
          <template v-else>
              银行卡：{{ see ? props.item.bank_no : '******' }}
            </template>
            <q-icon :name="!see ? 'remove_red_eye' : 'visibility_off'" />
        </div>
      </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useQuasar } from "quasar";
import { formatMoney } from 'src/utils/tools'
import { useRouter } from 'vue-router';
import { PAY_TYPES,WITHDRAW_STATE} from 'src/utils/const'
import { safeCopyToClipboard } from "src/utils/tools.js"
const router = useRouter()
const props = defineProps({
  item: {}
})
const $q = useQuasar()
const see = ref(false)
watch(() => {
  return props.item.id
}, () => {
  see.value = false
})
</script>
