<template>
  <PageWrapper title="文本复制" content="文本复制示例，用于常规订单号，编号，快速复制等场景">
    <el-card
      shadow="never"
      title="基本信息"
      class="mt-3 proCard"
      size="small"
      :segmented="{ content: 'hard' }"
    >
      <el-descriptions label-placement="left" class="py-2">
        <el-descriptions-item>
          <template #label>收款人姓名</template>
          啊俊
        </el-descriptions-item>
        <el-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</el-descriptions-item>
        <el-descriptions-item label="付款类型">支付宝</el-descriptions-item>
        <el-descriptions-item label="付款账户">
          {{ account }}
          <el-button size="small" type="primary" @click="handleAccountCopy">复制</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="转账金额">
          <el-space>
            <el-input v-model="money" placeholder="多少都是意" />
            <el-button type="primary" @click="handleMoneyCopy">复制</el-button>
          </el-space>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag type="success"> 已到账</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard';
  import { ElMessage } from 'element-plus';

  const { clipboardRef, copiedRef } = useCopyToClipboard();

  const account = ref('NaiveUiAdmin@163.com');
  const money = ref(null);

  function handleAccountCopy() {
    const value = unref(account.value);
    clipboardRef.value = value;
    if (unref(copiedRef)) {
      ElMessage.success(`拷贝成功：${value}`);
    }
  }

  function handleMoneyCopy() {
    const value = unref(money.value);
    if (!value) {
      ElMessage.warning('请输入要复制的内容！');
      return;
    }
    clipboardRef.value = value;
    if (unref(copiedRef)) {
      ElMessage.success(`拷贝成功：${value}`);
    }
  }
</script>
