<template>
    <div>
        <ListPage :column="tabkey !== '4' ? talkeColumn : paymentColumn" :tableApi="getList" :isSelect="true"
            :scopeBtns="scopeBtns" :searchBtns="searchBtns" ref="userTableRef" tableKey="volunteerTakeRecordId"
            :tabList="tabList" tabsearchKey="tabkeys" defaultTab="" />
        <DialogForm ref="dialogFormRef" :title="dialogData.title" :column="dialogData.column" @submit="submitForm"
            labelWidth="120px" />

        <el-dialog v-model="dialogPlay" title="打款单详情" :before-close="verifyClose" :footer="false">
            <div>
                <el-descriptions class="margin-top" :column="3" :size="size">
                    <el-descriptions-item label="打款单总金额（元）：">{{ dialogRow.totalPaymentAmount }}</el-descriptions-item>
                    <el-descriptions-item label="应打款金额：">{{ dialogRow.totalPaymentAmount }}</el-descriptions-item>
                    <el-descriptions-item label="实际打款金额：">{{ dialogRow.actualPaymentAmount }}</el-descriptions-item>
                </el-descriptions>
                <ListPage :column="dialogColumn" :tableApi="getVerList" :isSelect="false" :scopeBtns="scopeBtns"
                    :searchBtns="searchBtns" :isScope="false" ref="userTableRef" tableKey="volunteerTakeRecordId" />
            </div>
        </el-dialog>

        <el-dialog v-model="dialogVerify" title="打款验证" :before-close="verifyCancel" width="500px">
            <div class="verify-box">
                <div>业务类型： 支付宝</div>
                <div>打款单总金额：<span class="price-size">¥{{ dialogRow.actualPaymentAmount }}</span></div>
                <div>手机号： {{ userStore.phonenumber? userStore.phonenumber.slice(0, 3) + "****" + userStore.phonenumber.slice(7):'未绑定手机号'}}</div>
            </div>
            <div class="yzm-box">
                <div><span style="color:red">*</span>
                    验证密码：</div>
                <div>
                    <el-input v-model="verifyCode" placeholder="请输入短信验证码" clearable >
                        <template #append>
                            <a @click="getCode">{{code === 60?'获取验证码':code}}</a>
                        </template>
                    </el-input>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="verifyCancel">取消</el-button>
                    <el-button type="primary" @click="submitVerify">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>


    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import ListPage from '@/views/components/ListPage/index.vue';
import DialogForm from '@/views/components/DialogForm/index.vue';
import useUserStore from '@/store/modules/user'
import useData from './useData';

 const userStore = useUserStore();
const { proxy } = getCurrentInstance();

const jlzj_area_type = ref('0');// 0: 平台 10:区域公司
const {
    talkeColumn,
    paymentColumn,
    tabkey,
    dialogData,
    tabList,
    dialogFormRef,
    userTableRef,
    searchBtns,
    scopeBtns,
    verifyCode,
    dialogPlay,
    dialogColumn,
    dialogRow,
    dialogVerify,
    code,
    getList,
    submitForm,
    submitVerify,
    verifyClose,
    getVerList,
    verifyCancel,
    getCode
} = useData({ proxy, jlzj_area_type });
console.log('tableColumn', dialogData);





</script>

<style lang='scss' scoped>

.verify-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 34px;
    background: #f9f9f9;
    border-radius: 12px;
}

.yzm-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.price-size {
    color: red;
    font-size: 22px;
}
</style>