import { computed, defineComponent, ref, Transition } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
import useTomatoStore from '../useTomatoStore'
addIcons(MdClose, MdOpeninfull, MdClosefullscreen)

export default defineComponent(
  (props, ctx) => {
    const show = ref(false)
    const store = useTomatoStore()
    return () => (
      <div class="fixed left-0 top-0 z-[60] w-full">
        {/* 背景遮罩 */}
        <Transition>
          {props.show && (
            <div class="w-full h-screen bg-black/20 backdrop-blur" onClick={() => {}}></div>
          )}
        </Transition>
        {/* 弹框主体 */}
        <Transition name="modal">
          {show.value && (
            <div
              class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
              style={{
                width: '984px',
                height: '580px',
                borderRadius: '1rem'
              }}
            >
              {/* 关闭按钮 */}
              <div
                class={
                  'w-[16px] h-[16px] group flex justify-center items-center rounded-full overflow-hidden absolute bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30 top-4 right-6 '
                }
                onClick={() => {
                  store.isOpenEditModal = ''
                }}
              >
                <div class={' items-center justify-center hidden group-hover:flex'}>
                  <OhVueIcon name="md-close" scale={0.6} fill="white" />
                </div>
              </div>

              <div class="w-full h-full flex justify-center items-center">
                <Transition>{ctx.slots.default?.()}</Transition>
              </div>
            </div>
          )}
        </Transition>
      </div>
    )
  },
  {
    props: ['show']
  }
)