// import { h } from 'vue'
import { NDataTable, NInputNumber, NSwitch } from 'naive-ui'
import { useModal } from '@/views/Content/hooks/modal'
import Detection from '@/views/Payload/Detection.jsx'
import Communication from '@/views/Payload/Communication.jsx'

const { openDetailsModal } = useModal()
export const useMubiaoDetail = () => {
  return { showDetailsMubiao }
}

const data = ref([
  {
    id: 3,
    radius: 5000,
    minimumClock: 20.0,
    maximumClock: 110.0,
    minimumCone: 20.0,
    maximumCone: 90.0,
    height: 100,
    status: true,
  },
])

function renderMubiaoDetailsContent(mbData) {
  // return h(
  //   'div',
  //   {},
  //   Object.keys(mbData).map(key => h('div', {}, `${key}：${mbData[key]}`))
  // )
  return () => (
    <div class="detail-container">
      <div class="detail-item-title">基本信息</div>
      <div>
        {Object.keys(mbData).map(key => (
          <div>
            {key}：{mbData[key]}
          </div>
        ))}
      </div>
      <div class="detail-item-title">探测载荷</div>
      <Detection type="radar" data={data.value} />
    </div>
  )
}
function showDetailsMubiao(mbData) {
  openDetailsModal({
    titleString: 'zb详情',
    contentSlot: renderMubiaoDetailsContent(mbData),
  })
}