// import { h } from 'vue'
import { NButton, 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'
import { updateMbPayload } from '@/api/Mubiao'
import { useEntity } from '@/hooks/entity'
import { useMubiao } from './mubiao'

const { openDetailsModal } = useModal()
export const useMubiaoDetail = () => {
  const payloadData = ref([])

  function addCommunicationPayload(mbData) {
    const { id, targetType, extendInfo } = mbData

    const payLoadType = window.settings.mbDict[targetType].payload
    if (payLoadType === 'radar') {
      payloadData.value = [
        {
          id,
          radius: null,
          minimumClock: null,
          maximumClock: 90,
          minimumCone: null,
          maximumCone: null,
          show: false,
        },
      ]
    } else if (payLoadType === 'conic') {
      payloadData.value = [
        {
          id,
          angle: null,
          show: false,
        },
      ]
    }
  }
  const { mbPayloadShowMap } = useEntity()

  function renderMubiaoDetailsContent(mbData) {
    payloadData.value = []
    const { id, targetType, extendInfo } = mbData
    const payLoadType = window.settings.mbDict[targetType].payload

    if (extendInfo) {
      payloadData.value = [
        {
          id,
          ...extendInfo.detectingPayload,
          show: mbPayloadShowMap.get(id).detectingPayload.show,
        },
      ]
    }
    // return h(
    //   'div',
    //   {},
    //   Object.keys(mbData).map(key => h('div', {}, `${key}：${mbData[key]}`))
    // )
    return () => (
      <div class="detail-container w-[45vw]">
        <div class="detail-item-title">基本信息</div>
        <div>
          {Object.keys(mbData).map(key => (
            <div>
              {key}：{mbData[key]}
            </div>
          ))}
        </div>
        {/* <div class="detail-item-title">探测载荷</div>
         */}
        <div class="flex justify-between">
          <div class="detail-item-title">探测载荷</div>
          {payloadData.value.length === 0 && (
            <NButton
              quaternary
              type="primary"
              onClick={() => addCommunicationPayload(mbData)}
            >
              添加
            </NButton>
          )}
        </div>
        {payloadData.value.length > 0 && (
          <Detection target="mb" type={payLoadType} data={payloadData.value} />
        )}

        <div class="flex justify-end gap-2">
          <NButton
            type="primary"
            onClick={() =>
              updateMbLoad({
                mbData,
                detection: payloadData.value,
              })
            }
          >
            确定
          </NButton>
          {/* <NButton onClick={closeDetailsModal}>取消</NButton> */}
        </div>
      </div>
    )
  }
  function showDetailsMubiao(mbData) {
    openDetailsModal({
      titleString: 'zb详情',
      contentSlot: renderMubiaoDetailsContent(mbData),
    })
  }

  function updateMbLoad({ mbData, detection }) {
    const { getMubiaoData } = useMubiao()
    const { id, show, ...detectionData } = detection[0]
    const payloadData = {
      id: mbData.id,
      extendInfo: {
        detectingPayload: { ...detectionData },
      },
    }
    // console.log(payloadData)
    updateMbPayload(payloadData).then(res => {
      if (res.code === '200') {
        window.$message.success('保存成功')
        getMubiaoData()
      }
    })
  }

  return { showDetailsMubiao }
}