<script setup lang="ts">
import { computed } from 'vue';
import { Modal } from 'ant-design-vue';

import { t } from '@/i18n';

import type { GroupBatchDeviceItem } from '@/types';

interface Props {
  deviceData: GroupBatchDeviceItem;
}

const props = defineProps<Props>();

defineEmits<{
  click: [];
}>();

const disableSwitch = computed(() => {
  const { isLocale, isDisable } = getDeviceStatus();
  return isLocale || isDisable;
});

const disableTip = computed(() => {
  const { isLocale, isDisable } = getDeviceStatus();
  const tips: string[] = [];

  if (isLocale) {
    tips.push(t('realTimeMonitor.startStopControlTipLocal'));
  }

  if (isDisable) {
    tips.push(t('realTimeMonitor.startStopControlTipDisable'));
  }

  return tips;
});

const modalContent = computed(() => {
  let tipText = '';

  disableTip.value.forEach((item, index) => {
    tipText += `${index + 1}. ${item}\n`;
  });

  return tipText;
});

const getDeviceStatus = () => {
  const { localRemoteStatus, disableEnableStatus } = props.deviceData;

  return {
    isLocale: localRemoteStatus === '本地',
    isDisable: disableEnableStatus === 0,
  };
};

const showDisableTipModal = () => {
  Modal.confirm({
    title: t('common.inoperableReason'),
    content: modalContent.value,
    wrapClassName: 'start-stop-tip-modal',
    closable: true,
    centered: true,
    maskClosable: true,
    okText: t('common.close'),
  });
};
</script>

<template>
  <div class="start-stop-tip">
    <template v-if="disableSwitch">
      <span>{{ disableTip[0] }}</span>
      <a @click="showDisableTipModal">更多</a>
    </template>
  </div>
  <ASwitch
    :checked="deviceData.startStopOrder"
    :checked-value="1"
    :un-checked-value="0"
    :disabled="disableSwitch"
    @click="$emit('click')"
  />
</template>

<style lang="scss">
.start-stop-tip-modal {
  .ant-modal-confirm-content {
    white-space: pre-wrap;
  }

  .ant-btn-default {
    display: none;
  }
}
</style>

<style lang="scss" scoped>
.start-stop-tip {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;

  span {
    margin-right: 12px;
    color: #e6a23c;
    opacity: 0.65;
  }

  a {
    color: var(--antd-color-primary-opacity-65);
    text-decoration-line: underline;
  }
}
</style>
