import { defineComponent, PropType, reactive, toRefs } from 'vue'
import TheQrCode from '../TheQrCode'
import { websiteConfig } from '@/config/website.config'
import { NButton, NInput, NInputGroup, NModal, NPopover, useMessage } from 'naive-ui'

export default defineComponent({
  name: 'TheModelQr',
  props: {
    title: {
      type: String,
      default: '二维码'
    },
    text: {
      type: String,
      default: ''
    },
    /** 是否显示logo */
    showLogo: {
      type: Boolean,
      default: true
    },
    logo: {
      type: String,
      default: ''
    },
    placement: {
      type: String as PropType<
        | 'top-start'
        | 'top'
        | 'top-end'
        | 'right-start'
        | 'right'
        | 'right-end'
        | 'bottom-start'
        | 'bottom'
        | 'bottom-end'
        | 'left-start'
        | 'left'
        | 'left-end'
      >,
      default: 'top'
    }
  },
  setup(props, { slots }) {
    console.log('🚀 ~ slots', slots)
    const { logo, text, title, placement } = toRefs(props)
    const message = useMessage()
    const modelData = reactive({
      show: false
    })
    const copyText = (text: string) => {
      // 数字没有 .length 不能执行selectText 需要转化成字符串
      const textString = text.toString()
      let input = document.querySelector('#copy-input') as HTMLInputElement
      if (!input) {
        input = document.createElement('input')
        input.id = 'copy-input'
        input.readOnly = true // 防止ios聚焦触发键盘事件
        input.style.position = 'fixed'
        input.style.left = '-1000px'
        input.style.zIndex = '-1000'
        // 为了处理，页面滑动到底部的问题
        document.body.appendChild(input)
        // document.querySelector('#input-copy-container')?.appendChild(input)
      }

      input.value = textString
      // ios必须先选中文字且不支持 input.select();
      selectText(input, 0, textString.length)
      console.log(document.execCommand('copy'), 'execCommand')
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        message.success('复制成功')
      }
      input.blur()

      // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
      // 选择文本。createTextRange(setSelectionRange)是input方法
      function selectText(textbox: any, startIndex: any, stopIndex: any) {
        if (textbox.createTextRange) {
          //ie
          const range = textbox.createTextRange()
          range.collapse(true)
          range.moveStart('character', startIndex) //起始光标
          range.moveEnd('character', stopIndex - startIndex) //结束光标
          range.select() //不兼容苹果
        } else {
          //firefox/chrome
          textbox.setSelectionRange(startIndex, stopIndex)
          textbox.focus()
        }
      }
    }
    return () => (
      <div>
        <NPopover
          width={400}
          placement={placement.value}
          v-slots={{
            trigger: () => (
              <div onClick={() => (modelData.show = true)}>{slots.default && slots.default()}</div>
            )
          }}
        >
          <div style={{ textAlign: 'center' }}>
            <TheQrCode
              text={text.value}
              size={300}
              logoSrc={props.showLogo ? logo.value || websiteConfig.logo : undefined}
            />
            <NInputGroup>
              <NInput value={text.value} readonly disabled />
              <NButton type="primary" onClick={() => copyText(text.value)}>
                复制
              </NButton>
            </NInputGroup>
          </div>
        </NPopover>
        <NModal
          v-model:show={modelData.show}
          preset="dialog"
          showIcon={false}
          title={title.value}
          style={{ width: '400px' }}
        >
          <div style={{ textAlign: 'center' }}>
            <TheQrCode
              text={text.value}
              size={300}
              logoSrc={props.showLogo ? logo.value || websiteConfig.logo : undefined}
            />
            <div id="input-copy-container"></div>
            <NInputGroup>
              <NInput value={text.value} readonly disabled />
              <NButton type="primary" onClick={() => copyText(text.value)}>
                复制
              </NButton>
            </NInputGroup>
          </div>
        </NModal>
      </div>
    )
  }
})
