import { defineComponent, ref, Transition } from 'vue'
import useRouterStore from '@/useRouterStore'
import { Radio, RadioGroup } from 'ant-design-vue'
import useUserStore from './useUserStore'


export default defineComponent(() => {
    const router = useRouterStore()
    const userStore = useUserStore()
    const select = ref(1)
    return () => (
        <div class="fixed left-0 top-0 z-50 w-full">
            <Transition>
                <div
                    class="w-full h-screen bg-black/50"

                ></div>
            </Transition>
            <Transition name="modal">
                <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all w-[400px]  h-[240px] rounded-lg  bg-white/30 ">
                    <div class="w-full h-full flex flex-col justify-between p-4 px-6   rounded-lg bg-white overflow-hidden relative">
                        <div class={"text-center border-b-[#ddd] border-b-[1px] pb-2 "}>选择账号数据</div>

                        <span class={"text-[#666] text-[14px]"}>检测到云端数据和本地数据不一致，请选择合并或者覆盖</span>
                        <RadioGroup value={select.value} onChange={(e) => {
                            select.value = e.target.value
                        }} class={"flex flex-col text-[#333] gap-y-3"}>
                            <Radio value={1} class={"text-[#333]"}>合并数据</Radio>
                            <Radio value={2} class={"text-[#333]"}>覆盖数据</Radio>

                        </RadioGroup>
                        <div class={"flex justify-end "}
                            onClick={() => {
                                if (select.value === 1) {
                                    userStore.comineData()
                                } else {
                                    userStore.coverageData()
                                }
                                router.replace('')
                            }}
                        >
                            <button class={"px-10 py-1 hover:opacity-80 duration-150 bg-[#4a7aff] text-white rounded-lg"}>确定</button>
                        </div>
                    </div>
                </div>
            </Transition>
        </div>
    )
})