<template>
    <div style="padding-bottom: 50px">
        <!-- <div style="display:flex;align-items:center">   
            <div class="dvied"></div>
            <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">我的众包</div>
        </div> -->
        <div style="background: #ffffff; border-radius: 4px">
            <div class="crowdnum">
                <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="账户概览" name="1">
                        <div v-if="isWithdrawal" class="kitborder">
                            <div style="display: flex; align-items: center; margin-left: 30px">
                                <div class="dvied"></div>
                                <div style="font-weight: bold; color: #333333; font-size: 19px; margin-left: 10px">
                                    余额提现
                                </div>
                            </div>
                            <div
                                style="width: 100%; height: 1px; background-color: #ebebeb; margin: 14px 0 19px 0"
                            ></div>
                            <div style="padding: 0px 30px" class="applydraw">
                                <p>
                                    <span style="font-size: 16px; color: #000000ff">转出到</span>
                                    <span style="font-size: 13px; color: #808080ff; margin-left: 10px"
                                        >请选择余额转出到哪里</span
                                    >
                                </p>
                                <el-select
                                    v-model="Withdrawalform.withdraw"
                                    style="width: 500px"
                                    @change="settype"
                                    placeholder="请选择添加类型"
                                >
                                    <el-option label="支付宝" value="alipay" />
                                    <el-option label="银行卡" value="bank" />
                                </el-select>
                                <br />
                                <el-input
                                    v-if="Withdrawalform.withdraw == 'alipay' && accountdata.alipay"
                                    :value="`${accountdata.alipay}(${accountdata.name})`"
                                    style="margin-top: 20px"
                                    disabled
                                ></el-input>
                                <el-input
                                    v-if="Withdrawalform.withdraw == 'bank' && accountdata.bankAccount"
                                    :value="`${accountdata.bankAccount}(${accountdata.name})`"
                                    style="margin-top: 20px"
                                    disabled
                                ></el-input>
                                <br />
                                <el-input
                                    v-if="Withdrawalform.withdraw == 'bank' && accountdata.bankAccount"
                                    :value="accountdata.bankDeposit"
                                    style="margin-top: 20px"
                                    disabled
                                ></el-input>

                                <div style="border: 1px dashed #ebebeb; margin: 20px 0; width: 500px"></div>
                                <div style="display: flex; align-items: center">
                                    <p style="font-size: 16px; color: #000000ff">提现金额</p>
                                    <i style="color: #fd5d5dff; margin: 0 5px" class="el-icon-warning"></i>
                                    <span style="font-size: 13px; color: #808080ff"
                                        >提现金额将在7个工作日到账，请耐心等待</span
                                    >
                                </div>
                                <el-input v-model="Withdrawalform.recordAmount" style="width: 500px"></el-input>
                                <p style="font-size: 14px; color: #4d4d4dff">
                                    <span>本次最大可提现金额</span>
                                    <span style="color: #fd5d5dff">{{ accountdata.availableBalance + '元' }}</span>
                                    <span></span>
                                </p>
                                <div style="border: 1px dashed #ebebeb; margin: 20px 0; width: 500px"></div>
                                <p>
                                    <span style="font-size: 16px; color: #000000ff">交易密码</span>
                                    <span v-if="accountdata.password" style="font-size: 13px; color: #808080ff; margin-left: 10px"
                                        >保证交易密码的安全</span
                                    >
                                    <span v-else style="font-size: 13px; color: #808080ff; margin-left: 10px"
                                        >您还未设置过交易密码 <span style="color: #2587f9;margin-left:5px" @click="activeName='3'">去设置</span></span
                                    >
                                </p>
                                <el-input
                                    show-password
                                    auto-complete="new-password"
                                    v-model="Withdrawalform.password"
                                ></el-input>
                                <div style="border: 1px dashed #ebebeb; margin: 20px 0; width: 500px"></div>
                                <p>
                                    <span style="font-size: 16px; color: #000000ff">备注</span>
                                    <span style="font-size: 13px; color: #808080ff; margin-left: 10px"
                                        >备注信息（非必需）</span
                                    >
                                </p>
                                <el-input type="textarea" v-model="Withdrawalform.remark"></el-input>
                                <div style="margin-top: 25px">
                                    <el-button
                                        v-if="Withdrawalform.withdraw == 'alipay'"
                                        :disabled="!accountdata.alipay"
                                        @click="Withdapply('applyfor')"
                                        type="primary"
                                        class="butwidthdraw"
                                        >提现申请</el-button
                                    >
                                    <el-button
                                        v-if="Withdrawalform.withdraw == 'bank'"
                                        :disabled="!accountdata.bankAccount"
                                        @click="Withdapply('applyfor')"
                                        type="primary"
                                        class="butwidthdraw"
                                        >提现申请</el-button
                                    >
                                    <el-button
                                        @click="Withdapply('cancel')"
                                        type="primary"
                                        style="
                                            background: transparent;
                                            border: 1px solid #e0e0e0;
                                            margin-left: 15px;
                                            color: #666666ff;
                                        "
                                        class="butwidthdraw"
                                        >取消</el-button
                                    >
                                </div>
                            </div>
                        </div>
                        <div v-else class="kitborder">
                            <div
                                style="
                                    display: flex;
                                    align-items: center;
                                    margin-left: 30px;
                                    margin-top: -10px;
                                    justify-content: space-between;
                                "
                            >
                                <div style="display: flex; align-items: center">
                                    <div class="dvied"></div>
                                    <div style="font-weight: bold; color: #333333; font-size: 19px; margin-left: 10px">
                                        测试宝余额
                                    </div>
                                </div>
                                <div
                                    style="display: flex; align-items: center; font-size: 15px; cursor: pointer"
                                    @click="accountdatadia"
                                >
                                    <p
                                        v-if="accountdata.alipay && accountdata.bankAccount"
                                        style="color: #2286fa; margin: 0 5px"
                                    >
                                        查看账户
                                    </p>
                                    <p v-else style="color: #2286fa; margin: 0 5px">
                                        <i style="color: #2286fa" class="el-icon-circle-plus-outline"></i>
                                        添加账户
                                        <span
                                            v-if="!accountdata.alipay && !accountdata.bankAccount"
                                            style="color: #333333; font-size: 14px"
                                            >(还未添加账户,无法提现)</span
                                        >
                                    </p>
                                </div>
                            </div>
                            <div
                                style="width: 100%; height: 1px; background-color: #ebebeb; margin: 14px 0 19px 0"
                            ></div>
                            <div style="padding: 0px 30px; font-size: 17px">
                                <div style="display: flex; color: #333333; align-items: center; margin: -10px 0 10px 0">
                                    <p style="font-size: 28px; color: #fd461aff">¥{{ accountdata.balance }}</p>
                                    <p style="margin: 0 15px 0 5px">元</p>
                                    <div class="tagWithdrawal">可提现余额：{{ accountdata.availableBalance }}元</div>
                                </div>
                                <div>
                                    <!-- <el-button type="info" disabled>充值</el-button> -->
                                    <el-button
                                        @click="openwitd"
                                        type="primary"
                                        :disabled="accountdata.availableBalance == 0"
                                        >提现</el-button
                                    >
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="交易记录" name="2">
                        <div class="kitborder" style="height: 73vh">
                            <div style="display: flex; align-items: center; width: 150px; margin-left: 30px">
                                <div class="dvied"></div>
                                <div style="font-weight: bold; color: #333333; font-size: 19px; margin-left: 10px">
                                    交易记录
                                </div>
                            </div>
                            <div
                                style="width: 100%; height: 1px; background-color: #ebebeb; margin: 14px 0 19px 0"
                            ></div>
                            <div style="margin: 30px">
                                <el-table :data="sactionData">
                                    <el-table-column label="序号" width="100px" align="center">
                                        <template slot-scope="scope">
                                            {{ scope.$index + 1 }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="交易名称"
                                        align="center"
                                        key="recordName"
                                        prop="recordName"
                                    />
                                    <el-table-column label="交易类型" align="center" key="recordType" prop="recordType">
                                        <template slot-scope="scope">
                                            <!-- <span v-if="scope.row.recordType==0" style="color:#e6a23c">充值</span>
                                            <span v-if="scope.row.recordType==1" style="color:#409eff">提现</span>
                                            <span v-if="scope.row.recordType==2" style="color:#f56c6c">支出</span>
                                            <span v-if="scope.row.recordType==3" style="color:#67c23a">收入</span> -->
                                            <span v-if="scope.row.recordType == 0">充值</span>
                                            <span v-if="scope.row.recordType == 1">提现</span>
                                            <span v-if="scope.row.recordType == 2">支出</span>
                                            <span v-if="scope.row.recordType == 3">收入</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="交易金额"
                                        align="center"
                                        key="recordAmount"
                                        prop="recordAmount"
                                    >
                                        <template slot-scope="scope">
                                            <span>{{ hasDot(scope.row.recordAmount) }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="交易状态"
                                        align="center"
                                        key="recordStatus"
                                        prop="recordStatus"
                                    >
                                        <template slot-scope="scope">
                                            <el-tag
                                                :type="
                                                    scope.row.recordStatus == 0
                                                        ? 'primary'
                                                        : scope.row.recordStatus == 1
                                                        ? 'success'
                                                        : scope.row.recordStatus == 2
                                                        ? 'warning'
                                                        : 'danger'
                                                "
                                                effect="dark"
                                                style="cursor: pointer"
                                            >
                                                <span v-if="scope.row.recordStatus == 0">处理中</span>
                                                <span v-if="scope.row.recordStatus == 1">已完成</span>
                                                <span v-if="scope.row.recordStatus == 2">已取消</span>
                                                <span v-if="scope.row.recordStatus == 3">已失败</span>
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="交易时间" align="center" key="recordTime" prop="recordTime">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.recordTime">{{
                                                scope.row.recordTime.slice(0, 10)
                                            }}</span>
                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column  label="操作" align="center"  class-name="small-padding fixed-width" width="260"></el-table-column> -->
                                </el-table>
                            </div>
                            <div v-if="total > 10" style="width: 100%; margin-top: 30px; text-align: center">
                                <el-pagination
                                    background
                                    @current-change="getSactionDataFn"
                                    :current-page="queryParams.pageNum"
                                    :page-size="queryParams.pageSize"
                                    layout="total,  prev, pager, next, jumper"
                                    :total="total"
                                >
                                </el-pagination>
                                <!-- <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :page-size="queryParams.pageSize"
                  layout="total,  prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination> -->
                                <div style="height: 20px"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="交易密码" name="3">
                        <div class="kitborder">
                            <div style="display: flex; align-items: center; width: 150px; margin-left: 30px">
                                <div class="dvied"></div>
                                <div style="font-weight: bold; color: #333333; font-size: 19px; margin-left: 10px">
                                    交易密码
                                </div>
                            </div>
                            <div
                                style="width: 100%; height: 1px; background-color: #ebebeb; margin: 14px 0 19px 0"
                            ></div>
                            <div style="margin: 30px">
                                <p style="color: #a6a6a6; font-size: 13px">*请确保交易密码与登录密码不同!</p>
                                <p style="color: #a6a6a6; font-size: 13px">
                                    *密码必须为 6-16 位，字母、数字或字符的组合。
                                </p>
                                <p style="color: #a6a6a6; font-size: 13px; margin-bottom: 30px">
                                    <span>*如果您收不到手机验证码，请先去</span>
                                    <span style="color: #1989fa">个人信息</span>
                                    <span>页面验证工作手机。</span>
                                </p>
                                <el-form
                                    ref="sactionform"
                                    :model="sactionform"
                                    :rules="sactionFormRules"
                                    label-width="120px"
                                >
                                    <el-form-item label="手机号码">
                                        <span v-if="userinform.phonenumber">+86 {{ userinform.phonenumber }}</span>
                                    </el-form-item>
                                    <el-form-item prop="password" label="交易密码">
                                        <el-input show-password v-model="sactionform.password"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="newpassword" label="确认交易密码">
                                        <el-input show-password v-model="sactionform.newpassword"></el-input>
                                    </el-form-item>
                                    <el-form-item label="短信验证码" class="verifybtn">
                                        <el-input v-model="sactionform.code" maxlength="6" auto-complete="off">
                                            <el-button slot="suffix" @click="getVerify" :disabled="tranVerify.disabled">
                                                <span v-show="tranVerify.show" style="color: #0066eb">获取验证码</span>
                                                <span v-show="!tranVerify.show" class="count"
                                                    >{{ tranVerify.count }} s</span
                                                >
                                            </el-button>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit" class="but">确认</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <el-dialog
                    class="dialogacount"
                    :title="accountdata.alipay && accountdata.bankAccount ? '查看账户' : '添加账户'"
                    :visible.sync="addacount"
                    width="550px"
                    :close-on-click-modal="false"
                    append-to-body
                    @close="addacount = false"
                >
                    <el-divider></el-divider>
                    <p class="selectadd">选择添加类型</p>
                    <el-select
                        v-model="accountform.paytype"
                        style="width: 100%"
                        @change="settypedialog"
                        placeholder="请选择添加类型"
                    >
                        <el-option label="支付宝" value="1" />
                        <el-option label="银行卡" value="2" />
                    </el-select>
                    <div style="border: 1px dashed #ebebeb; margin: 20px 0"></div>
                    <div v-if="accountform.paytype == 1" style="display: flex; align-items: center">
                        <img style="width: 19px; height: 19px; margin-right: 5px" src="/assets/crowd/payb.png" alt="" />
                        <p class="selectadd">支付宝账号</p>
                    </div>
                    <div v-if="accountform.paytype == 2" style="display: flex; align-items: center">
                        <img
                            style="width: 18px; height: 15px; margin-right: 5px"
                            src="/assets/crowd/bankcad.png"
                            alt=""
                        />
                        <p class="selectadd">银行卡账号</p>
                    </div>
                    <el-form ref="accountform" :model="accountform" :rules="accountformRules" label-width="80px">
                        <el-form-item v-if="accountform.paytype == 1" label="姓   名：" prop="name">
                            <el-input v-model="accountform.name" :disabled="Boolean(accountdata.alipay)"></el-input>
                        </el-form-item>
                        <el-form-item v-if="accountform.paytype == 2" label="姓   名：" prop="name">
                            <el-input
                                v-model="accountform.name"
                                :disabled="Boolean(accountdata.bankAccount)"
                            ></el-input>
                        </el-form-item>
                        <div v-if="accountform.paytype == 1">
                            <el-form-item label="账   号：" prop="alipay">
                                <el-input
                                    :disabled="Boolean(accountdata.alipay)"
                                    v-model="accountform.alipay"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div v-if="accountform.paytype == 2">
                            <el-form-item label="开户行：" prop="bankDeposit">
                                <el-input
                                    v-model="accountform.bankDeposit"
                                    :disabled="Boolean(accountdata.bankAccount)"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="账   号：" prop="bankAccount">
                                <el-input
                                    v-model="accountform.bankAccount"
                                    :disabled="Boolean(accountdata.bankAccount)"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item label="账   号：" prop="bankAccount">
                            <el-input  v-model="accountform.bankAccount" ></el-input>
                        </el-form-item> -->
                        <div style="display: flex; margin-top: 30px">
                            <el-button
                                v-if="accountform.paytype == 1"
                                :disabled="Boolean(accountdata.alipay)"
                                type="primary"
                                @click="acsumbit('determine')"
                                class="acountbtn"
                                >确定</el-button
                            >
                            <el-button
                                v-else
                                type="primary"
                                :disabled="Boolean(accountdata.bankAccount)"
                                @click="acsumbit('determine')"
                                class="acountbtn"
                                >确定</el-button
                            >
                            <el-button
                                type="primary"
                                @click="acsumbit('cancel')"
                                class="acountbtn"
                                style="border: 1px solid #e0e0e0; background: #ffffff; color: #666666"
                                >取消</el-button
                            >
                        </div>
                    </el-form>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { queryAccount, queryRecord, setaddaccount, withdrawapp } from '@/api/my/testb'
import { isMobile } from '@/util/validate'
import { getCodeUserLogin, scatpasswd } from '@/api/system/login'
import { encrypt, decrypt } from '@/util/encrypt'
export default {
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请输入密码'))
            }
            if (!/^[a-z0-9][a-z0-9A-Z@#%^.*!~?|]{5,11}$/i.test(value)) {
                return callback(new Error('密码格式错误'))
            }
            // if (this.getpasswordForm.repassword !== '') {
            //   this.$refs.getpasswordForm.validateField('repassword')
            // }
            return callback()
        }
        //注册的确认密码
        const validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.sactionform.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            isWithdrawal: false, //提现页面
            addacount: false,
            activeName: '1',
            accountdata: {},
            sactionData: [],
            total: 0,
            sactionform: { password: '', newpassword: '', code: '', uuid: '' },
            tranVerify: { show: true, count: 0, timer: null, disabled: false }, //注册验证码
            sactionFormRules: {
                password: [
                    { required: true, validator: validatePass, trigger: 'blur' },
                    { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
                ],
                newpassword: [
                    { required: true, validator: validatePass2, trigger: 'blur' },
                    { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
                ],
            },
            accountform: {
                paytype: '1',
                name: '',
                alipay: '',
                bankDeposit: '',
                bankAccount: '',
            },
            accountformRules: {
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' },
                    { max: 4, message: '最多输入4个中文', trigger: 'blur' },
                    {
                        pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
                        message: '请输入中文',
                        trigger: 'blur',
                    },
                ],
                bankDeposit: [
                    { required: true, message: '开户行不能为空', trigger: 'blur' },
                    {
                        pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
                        message: '请输入中文',
                        trigger: 'blur',
                    },
                ],
                alipay: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                    {
                        type: 'number',
                        message: '请输入正确账号',
                        trigger: 'blur',
                        transform(value) {
                            if (!/^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/.test(value)) {
                                return true
                            } else {
                            }
                        },
                    },
                ],
                bankAccount: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                    {
                        type: 'number',
                        message: '卡号格式不对',
                        trigger: 'change',
                        transform(value) {
                            if (!/^([1-9]{1})(\d{15}|\d{18})$/.test(value)) {
                                return true
                            } else {
                            }
                        },
                    },
                ],
            },
            Withdrawalform: { withdraw: 'alipay', recordAmount: '', password: '' },
            queryParams: {
                pageSize: 10,
                pageNum: 1,
            },
        }
    },
    mounted() {
        this.getAccount()
    },
    computed: {
        ...mapGetters(['userinform']),
    },
    methods: {
        getAccount() {
            queryAccount(this.userinform.userId).then((res) => {
                this.accountdata = res
            })
        },
        handleClick(tab, event) {
            // 点击tab交易记录调接口
            if (tab.name == 2) {
                this.getSactionData()
            }
            if (tab.name == 1) {
                this.getAccount()
            }
        },
        getSactionDataFn(val) {
            this.queryParams.pageNum = val
            this.getSactionData()
        },
        // 获取交易记录
        getSactionData() {
            queryRecord(this.userinform.userId, this.queryParams).then((res) => {
                // res.rows=[{recordName:'1',recordType:'3',recordAmount:'500.363654',recordStatus:'2',recordTime:'2023.01.60 10:50'}]
                this.sactionData = res.rows
                this.total = res.total
            })
        },
        hasDot(num) {
            // 保留小数点后两位
            if (num) {
                var result = num.toString().indexOf('.') // 查找是否含有小数点
                if (result != -1) {
                    return num.toString().substring(0, result + 3) //有小数点保留两位小数
                } else {
                    return num
                }
            }
        },
        // 获取短信验证码
        getVerify() {
            if (!this.sactionform.newpassword) {
                this.$message.warning('请输入密码')
                return
            }
            let phone = this.userinform.phonenumber
            if (!phone || !isMobile(phone)) {
                this.$message.warning('手机格式不对')
                return
            }
            this.tranVerify.disabled = true
            // 获取注册验证码的接口
            getCodeUserLogin(phone)
                .then((res) => {
                    if (res.code == 200) {
                        this.sactionform.uuid = res.uuid
                        this.$message.success('短信发送成功，请注意查收')
                        const TIME_COUNT = 60 //更改倒计时时间
                        if (!this.timer) {
                            this.tranVerify.count = TIME_COUNT
                            this.tranVerify.show = false
                            this.tranVerify.timer = setInterval(() => {
                                if (this.tranVerify.count > 0 && this.tranVerify.count <= TIME_COUNT) {
                                    this.tranVerify.count--
                                } else {
                                    this.tranVerify.disabled = false
                                    this.tranVerify.show = true
                                    clearInterval(this.tranVerify.timer) // 清除定时器
                                    this.tranVerify.timer = null
                                }
                            }, 1000)
                        }
                    }
                })
                .catch((err) => {})
        },
        // 修改密码提交
        onSubmit() {
            this.$refs.sactionform.validate((valid) => {
                if (valid) {
                    if (!this.sactionform.code) {
                        this.$message.warning('请输入验证码')
                    } else {
                        let data = {
                            password: encrypt(this.sactionform.password),
                            // password: this.sactionform.password,
                            code: this.sactionform.code,
                            uuid: this.sactionform.uuid,
                        }
                        let userId = this.userinform.userId
                        scatpasswd(userId, data).then((res) => {
                            if (res.code == 200) {
                                this.$message.success('设置成功')
                                this.$router.push(`/console/profile`)
                            } else {
                                this.$message.warning('验证码无效')
                            }
                        })
                    }
                }
            })
        },
        // 打开添加账户的弹窗
        accountdatadia() {
            this.addacount = true
            this.accountform = {
                paytype: '1',
                name: '',
                bankDeposit: '',
                bankAccount: '',
                alipay: '',
            }
            this.accountform.name = this.accountdata.name
            this.accountform.alipay = this.accountdata.alipay
            this.accountform.bankAccount = this.accountdata.bankAccount
            this.accountform.bankDeposit = this.accountdata.bankDeposit
        },
        // 选择支付类型
        settype(e) {
            // this.accountform={paytype:e,name:'',bankDeposit:'',bankAccount:''}
            if (e == 'alipay' && !this.accountdata.alipay) {
                return this.$message.warning('请先添加支付宝账户！')
            } else if (e == 'bank' && !this.accountdata.bankAccount) {
                return this.$message.warning('请先添加银行账户！')
            }
        },
        settypedialog(e) {
            this.$refs.accountform.clearValidate()
        },
        // 添加账户
        acsumbit(type) {
            if (type == 'cancel') {
                this.addacount = false
                this.$refs.accountform.clearValidate()
            } else {
                this.$refs.accountform.validate((valid) => {
                    if (valid) {
                        let data = {}
                        if (this.accountform.paytype == 1) {
                            data = {
                                accountId: this.accountdata.accountId,
                                userId: this.userinform.userId,
                                alipay: this.accountform.alipay,
                                name: this.accountform.name,
                            }
                        } else {
                            data = {
                                accountId: this.accountdata.accountId,
                                userId: this.userinform.userId,
                                bankAccount: this.accountform.bankAccount,
                                bankDeposit: this.accountform.bankDeposit,
                                name: this.accountform.name,
                            }
                        }
                        // return;
                        setaddaccount(data).then((res) => {
                            if (res.data.code == 200) {
                                this.$message.success('添加成功')
                                this.addacount = false
                                this.getAccount()
                            }
                            if (res.data.code == 400) {
                                this.$message.error(res.data.msg)
                            }
                        })
                    } else {
                    }
                })
            }
        },
        // 打开提现页
        openwitd() {
            if (this.accountdata.availableBalance == 0) {
                return this.$message.warning('没有可提现额度！')
            }
            if (!this.accountdata.alipay && !this.accountdata.bankAccount) {
                return this.$message.warning('添加账户才可提现！')
            }
            this.isWithdrawal = true
            this.Withdrawalform = {
                withdraw: 'alipay',
                recordAmount: '',
                password: '',
            }
            this.settype('alipay')
        },
        // 提现申请
        Withdapply(type) {
            if (type == 'applyfor') {
                // Withdrawalform:{withdraw:'alipay',recordAmount:'',password:''}
                if (!this.Withdrawalform.recordAmount) {
                    this.$message.warning('请输入提款金额')
                    return
                }
                if (!/^[1-9]\d*$/.test(this.Withdrawalform.recordAmount)) {
                    this.$message.warning('请输入整数')
                    return
                }
                if (parseInt(this.Withdrawalform.recordAmount) > this.accountdata.availableBalance) {
                    this.$message.warning(`本次最大可提现金额${this.accountdata.availableBalance}元`)
                    return
                }
                if (!this.Withdrawalform.password) {
                    this.$message.warning('请输入密码')
                    return
                }
                if (this.Withdrawalform.password.length < 6) {
                    this.$message.warning('密码最少为6位')
                    return
                }
                let data = {
                    accountId: this.accountdata.accountId,
                    userId: this.userinform.userId,
                    withdraw: this.Withdrawalform.withdraw,
                    // password: this.Withdrawalform.password,
                    password: encrypt(this.Withdrawalform.password),
                    recordAmount: parseInt(this.Withdrawalform.recordAmount),
                }
                // return;
                withdrawapp(data).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success('提现申请成功')
                        this.getAccount()
                        this.isWithdrawal = false
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            } else {
                this.isWithdrawal = false
            }
        },
    },
}
</script>
<style scoped>
.crowdnum >>> .el-tabs--border-card {
    background: transparent;
    border: none;
    box-shadow: none;
}
.crowdnum >>> .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: none;
    color: #1a1a1a;
}
.crowdnum >>> .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #0066eb;
    /* font-size: 16px; */
}
.crowdnum >>> .el-tabs--border-card > .el-tabs__content {
    padding: 30px 0;
    overflow: unset;
}
.crowdnum >>> .el-tabs--border-card > .el-tabs__header {
    border: none;
    background-color: #f7f7f7;
    /* color:#1A1A1A */
}
.crowdnum >>> .el-tabs__item {
    height: 45px;
    line-height: 45px;
}
.kitborder {
    /* width: 1627px; */
    /* height: 229px; */
    background: #ffffff;
    box-shadow: 0px 1px 12px 0px rgba(17, 19, 21, 0.06);
    padding: 25px 0 30px 0;
}
.dvied {
    width: 5px;
    height: 18px;
    background: #1578ed;
    border-radius: 3px;
}
.tagWithdrawal {
    /* width: 174px; */
    /* height: 36px; */
    background: #f0f3f7;
    border-radius: 4px;
    padding: 7px 20px;
    text-align: center;
    /* line-height: 36px; */
}
.butRecharge {
    width: 90px;
    height: 36px;
    font-size: 15px;
    margin-right: 20px;
    border-radius: 4px;
    background: #2286fa;
    line-height: 11px;
}
.crowdnum >>> .el-table th {
    background-color: #f7f7f7;
    color: #666666;
    text-align: center;
}
.crowdnum >>> .el-table td {
    /* text-align:center; */
    background-color: #ffffff;
    height: 60px;
    color: #333333;
}
.crowdnum >>> .el-table--border th {
    border-right: #f7f7f7;
}
/* .kitborder{
        width:800px;
        height: 500px;
        margin: 50px 0 50px 100px;
        background:#F1F3F8 ;
        border-radius: 10px;
        padding:50px
    } */
/* .kitborder >>> .el-input__inner {
  width: 300px;
} */
.but {
    width: 300px;
    font-size: 16px;
    background-color: #0066eb;
}
/* .kitborder >>> .el-input {
  width: 300px;
}
.verifybtn >>> .el-input {
  width: 300px;
} */
.verifybtn >>> .el-button {
    margin-top: -3px;
    margin-left: -28px;
    width: 100%;
    height: 50px;
    font-size: 15px;
    /* color:#0066EB; */
    background: transparent;
    border: none;
    border-radius: 6px;
    z-index: -1;
    /* 18798569999 */
}
.verifybtn >>> .el-button.is-disabled:hover {
    background: transparent;
}
.dialogacount >>> .el-dialog__title {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
}
.dialogacount >>> .el-divider--horizontal {
    margin-top: -20px;
}
.selectadd {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
}
.acountbtn {
    width: 250px;
    /* height: 44px; */
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 22px;
    color: #ffffff;
    font-size: 16px;
    /* line-height: 44px; */
}
.applydraw >>> .el-input__inner {
    width: 500px !important;
}
.applydraw >>> .el-input {
    width: 500px;
}
.applydraw >>> .el-textarea__inner {
    width: 500px;
}
.butwidthdraw {
    width: 200px;
    /* height: 44px; */
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 4px;
    font-size: 16px;
    /* line-height: 44px; */
    text-align: center;
}
</style>   