import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
const defaultFunc = () => { }

export function confirmDelete(msg, ok = defaultFunc, no = defaultFunc) {
  ElMessageBox({
    title: '',
    message: (<div>
      <h1 className="confirm-box-title">{msg.title}</h1>
      <div className='confirm-box-content' type={msg.type || 0}>{msg.content}</div>
    </div>),
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    customClass: "confirm-delete confirm-box",
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        // instance.confirmButtonLoading = true
        // instance.confirmButtonText = 'Loading...'
        // setTimeout(() => {
        //   done()
        //   setTimeout(() => {
        //     instance.confirmButtonLoading = false
        //   }, 300)
        // }, 3000)
        done()
      } else {
        done()
      }
    },
  }).then((action, instance, done) => {
    if (action === 'confirm') {
      ok()
    } else {

    }
  }).catch(() => {
    no()
  })
}


export function confirmInput(msg, ok = defaultFunc, no = defaultFunc) {
  let inputQuery = ref("")
  let switchQuery = true

  const handleInput = (e) => {
    console.log('handleInput', this)
  }

  ElMessageBox({
    title: '',
    message: (<div>
      <div className=""><span>实体类型名称：</span> <input onInput={handleInput} vModel={inputQuery.value} placeholder="请输入" /></div>
      <div className=""><span>是否启用：</span><el-switch vModel={switchQuery} /></div>
    </div>),
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    customClass: "confirm-input",
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        done()
      } else {
        done()
      }
    },
  }).then((action, instance, done) => {
    if (action === 'confirm') {
      ok(inputQuery.value)
    } else {

    }
  }).catch(() => {
    no()
  })
}
