<template>
    <!-- 第三方登录绑定账号密码输入弹框 -->
    <a-modal title="请输入密码" v-model:visible="thirdPasswordShow" @ok="thirdLoginCheckPassword" @cancel="thirdLoginNoPassword">
        <a-input-password placeholder="请输入密码" v-model:value="thirdLoginPassword" style="margin: 15px;width: 80%;"/>
    </a-modal>

    <!-- 第三方登录提示是否绑定账号弹框 -->
    <a-modal :footer="null" :closable="false" v-model:visible="thirdConfirmShow" :class="'ant-modal-confirm'">
        <div class="ant-modal-confirm-body-wrapper">
            <div class="ant-modal-confirm-body">
                <QuestionCircleFilled style="color: #faad14"/>
                <span class="ant-modal-confirm-title">提示</span>
                <div class="ant-modal-confirm-content">
                    已有同名账号存在,请确认是否绑定该账号？
                </div>
            </div>
            <div class="ant-modal-confirm-btns">
                <a-button @click="thirdLoginUserCreate" :loading="thirdCreateUserLoding">创建新账号</a-button>
                <a-button @click="thirdLoginUserBind" type="primary">确认绑定</a-button>
            </div>
        </div>
    </a-modal>

    <!-- 第三方登录绑定手机号 -->
    <a-modal title="绑定手机号" v-model:visible="bindingPhoneModal" :maskClosable="false">
        <Form class="p-4 enter-x" style="margin: 15px 10px">
            <FormItem class="enter-x">
                <a-input size="large" placeholder="请输入手机号" v-model:value="thirdPhone" class="fix-auto-fill">
                    <template #prefix>
                        <Icon icon="ant-design:mobile-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
                    </template>
                </a-input>
            </FormItem>
            <FormItem name="sms" class="enter-x">
                <CountdownInput
                        size="large"
                        class="fix-auto-fill"
                        v-model:value="thirdCaptcha"
                        placeholder="请输入验证码"
                        :sendCodeApi="sendCodeApi"
                >
                <template #prefix>
                    <Icon icon="ant-design:mail-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
                </template>
              </CountdownInput>
            </FormItem>
        </Form>
        <template #footer>
            <a-button type="primary" @click="thirdHandleOk">确定</a-button>
        </template>
    </a-modal>
</template>
<script lang="ts">
    import {defineComponent} from 'vue';
    import {Form, Input} from 'ant-design-vue';
    import { CountdownInput } from '/@/components/CountDown';
    import {useThirdLogin} from '/@/hooks/system/useThirdLogin';
    const FormItem = Form.Item;
    const InputPassword = Input.Password;

    export default defineComponent({
        name: 'ThirdModal',
        components: { FormItem, Form,InputPassword, CountdownInput},
        setup() {
            return {
                ...useThirdLogin()
            }
        }
    })
</script>
