<template>
  <div>
    <span class="status-tag pointer">
      <a-popconfirm :title="getTitle()" ok-text="Yes" cancel-text="No" placement="left"
        @confirm="onFirmwareStatusClick(firmware)">
        <a-tag :color="firmware.firmware_status ? commonColor.NORMAL : commonColor.FAIL"
          :class="firmware.firmware_status ? 'border-corner ' : 'status-disable border-corner'">
          {{ getText(firmware.firmware_status) }}
        </a-tag>
      </a-popconfirm>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { changeFirmareStatus } from '/@/api/manage'
import { Firmware, FirmwareStatusEnum } from '/@/types/device-firmware'
import { commonColor } from '/@/utils/color'
import { getWorkspaceId } from '/@/utils/index'

const props = defineProps<{
  firmware: Firmware
}>()

function getTitle() {
  return `Are you sure to set this firmware to ${getText(!props.firmware.firmware_status)}?`
}

function getText(status: boolean) {
  return status ? FirmwareStatusEnum.TRUE : FirmwareStatusEnum.FALSE
}

function onFirmwareStatusClick(record: Firmware) {
  changeFirmareStatus(getWorkspaceId(), record.firmware_id, { status: !record.firmware_status }).then((res) => {
    if (res.code === 0) {
      record.firmware_status = !record.firmware_status
    }
  })
}

</script>

<style lang="scss" scoped>
.status-disable {
  opacity: 0.4;
}

.border-corner {
  border-radius: 3px;
}

.pointer {
  cursor: pointer;
}
</style>
