import { PropType, defineComponent, ref } from 'vue'
import { LoadingOutlined, ReloadOutlined, CopyTwoTone, EditOutlined } from '@ant-design/icons-vue'
import { useCopy } from '@/hooks/dom'
import { Input, Space, Button } from 'ant-design-vue'

/* 此代码导出一个名为“ReloadIconTsx”的 Vue
组件，该组件显示一个用于重新加载内容的图标。该组件有两个道具：`loading`（一个布尔值，指示内容当前是否正在加载）和`reload`（单击重新加载图标时调用的函数）。该组件使用 Vue
中的“defineComponent”函数来定义其行为，并使用“@ant-design/icons-vue”库中的“LoadingOutlined”和“ReloadOutlined”图标来显示适当的图标。该组件还使用
Ant Design Vue 库中的“a-tooltip”组件在用户将鼠标悬停在图标上时显示工具提示。 */

export const ReloadIconTsx = defineComponent({
  name: 'reload-icon-tsx',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    reload: {
      type: Function,
      default: () => {}
    }
  },
  setup (props, context) {
    return () => (
      <a-tooltip
        title="刷新"
      >
         { props.loading ? <LoadingOutlined /> : <ReloadOutlined onClick={() => props.reload()} /> }
      </a-tooltip>
    )
  }
})

/**
 * 这是一个 TypeScript React 组件，用于呈现带有可自定义内容和操作插槽的警报。
 * @param props - 包含两个属性的对象：
 * @param context - `setup` 函数中的 `context`
 * 参数是一个对象，它提供对当前组件实例的属性和方法的访问。它包括“attrs”、“emit”、“slots”和“refs”等属性。在此特定代码中，“slots”属性用于访问
 * @returns 呈现具有两列的行的功能组件。第一列的内容由 valueSlot 槽确定，第二列的内容由 operaSlot
 * 槽确定。该组件还接受字符串类型的“value”属性和对象类型的“operaSlot”属性。
 */
export const AlertTsx = defineComponent({
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    const { slots } = context

    return () => (
      <a-row
        justify='space-between'
        align="middle"
        style={{
          backgroundColor: '#e6f7ff',
          border: '1px solid #91d5ff',
          minHeight: '40px',
          padding: '0px 20px '
        }}
      >
        <a-col>{ props.value ? props.value : slots.valueSlot!()}</a-col>
        <a-col>{slots.operaSlot!()}</a-col>
      </a-row>
    )
  }
})

/**
 * @description iconfont矢量库 使用的svg的格式 svg导入在public下的index.html里
 */
export const IconTsx = defineComponent({
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup (props, ctx) {
    return () => (
      <svg class="icon" aria-hidden="true" style={{ fill: '#fff' }} >
        <use style={{ fill: '#fff' }} xlinkHref={`#icon-${props.name}`}></use>
      </svg>
    )
  }
})

export const SelectTsx = defineComponent({
  name: 'select-tsx',
  props: {
    modelValue: {
      type: Object,
      required: true,
      default: () => ({})
    },
    request: {
      type: Function,
      default: () => {}
    },
    keys: {
      type: Object as PropType<{key: string, name: string, value: string}>,
      default: () => {}
    },
    styles: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:value'],
  setup (props, context) {
    const list = ref<{
      name: string,
      value: any,
      key: string
    }[]>([])

    props.request().then((r: {
      name: string,
      value: any,
      key: string
    }[]) => {
      list.value = r
    })

    const onInput = (value: string) => context.emit('update:value', value)

    return () => (
      <a-select style={{ width: '170px', ...props.styles }} value={props.modelValue} allowClear onChange={(value: string) => onInput(value)}>
       {
        list.value.map(item => <a-select-option key={item[props.keys.key]} value={item[props.keys.value]}>{item[props.keys.name]}</a-select-option>)
       }
      </a-select>
    )
  }
})

export const InputTsx = defineComponent({
  name: 'input-tsx',
  props: {
    modelValue: {
      type: String,
      required: true,
      default: ''
    },
    placeholder: {
      type: String,
      default: '输入点什么...'
    },
    mode: {
      type: String as PropType<'normal' | 'edit'>,
      default: 'normal'
    },
    value: {
      type: String,
      required: true,
      default: ''
    },
    styles: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:value', 'submit'],
  setup (props, ctx) {
    console.log('props.modelValue:', props.value)

    const editing = ref<boolean>(false)

    const onInput = (value: string) => ctx.emit('update:value', value)

    const submitUpdate = () => {
      ctx.emit('submit')
      editing.value = false
    }

    return () => (
      <span>
        {

          props.mode === 'normal'
            ? <Input style={{ minWidth: '170px', ...props.styles }} value={props.value} placeholder={props.placeholder} onChange={(e) => onInput(e.target.value!)} />
            : <>
              <Space>
                {
                  editing.value ? <Input style={{ minWidth: '170px' }} placeholder={props.placeholder} value={props.modelValue} onChange={(e) => onInput(e.target.value!)} /> : <div style={{ minWidth: '170px' }} >{props.modelValue}</div>
                }
                {
                  editing.value ? <EditOutlined style={{ cursor: 'pointer' }} onClick={() => editing.value = !editing.value} /> : null
                }

              </Space>
              {
                editing.value
                  ? <Space>
                <Button type="primary" onClick={() => submitUpdate()}>确定</Button>
                <Button onClick={() => editing.value = false}>取消</Button>
              </Space>
                  : null
              }
          </>
        }

      </span>

    )
  }
})

/**
 * @description 文字copy按钮
 */
export const CopyTsx = defineComponent({
  name: 'copy-tsx',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  emits: ['success'],
  setup (props, ctx) {
    if (!props.text) {
      console.warn('缺少必备的参数 text')
    }

    const onCopy = () => {
      useCopy(props.text)
    }

    return () => (
      <a-tooltip
        title='复制'
      >
        <CopyTwoTone style="font-size: 18px;" onClick={onCopy}/>
      </a-tooltip>
    )
  }
})

/**
 *
 */