gas-injection/src/views/vent/home/configurable/components/preset/nitrogenBtnList.vue

<template>
  <div class="buttons-wrapper">
    <div class="button-group-container" v-for="(btn, index) in buttonList" :key="index" :class="index % 2 === 0 ? 'green-item' : 'blue-item'">
      <div class="button-name">{{ btn.label }}</div>
      <div class="radio-card" @click="toggleStatus(btn, index)">
        <a-radio class="radio-dot" :checked="btn.isRunning"></a-radio>
        <span class="radio-text">
          {{ btn.isRunning ? '开启' : '关闭' }}
        </span>
      </div>
    </div>
  </div>
  <ConfirmModal v-model:visible="modalVisible" @handleCancel="handleCancel" @handleConfirm="handleConfirm" class="btn-confirm-modal"> </ConfirmModal>
</template>

<script setup lang="ts">
import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal1.vue';
import { ref, inject } from 'vue';
import { InputPassword } from 'ant-design-vue';
let props = defineProps({
  buttonList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
// 定义按钮项的类型
interface ButtonItem {
  isShowInput: boolean;
  inputContent: string;
  inputValue: string | number;
  value: string | number;
  label: string;
  content: string;
}
const password = ref('');
const inputWarn = ref('密码错误请重新输入');
const modalVisible = ref(false);
const currentButton = ref({}); // 记录当前点击的按钮
const toggleStatus = (btn: ButtonItem, index) => {
  modalVisible.value = !modalVisible.value;
  console.log(btn, '按钮信息');
  currentButton.value = btn;
};
// 注入祖父组件提供的处理函数
const handleButtonConfirm = inject<(button: ButtonItem) => void>(
  'handleButtonConfirm',
  () => console.warn('未提供handleButtonConfirm函数') // 默认值，避免报错
);
/**
 * 处理密码确认回调
 */
const handleConfirm = async (password) => {
  try {
    // 1. 这里写你的密码校验逻辑（比如调用接口、本地验证等）
    console.log('用户输入的密码:', password);
    console.log('控制按钮信息', currentButton.value);
    // 接口请求
    await new Promise((resolve) => setTimeout(resolve, 500));
    // 2. 密码验证成功的逻辑
    if (password === '123456') {
      console.log('密码验证成功！');
    } else {
      // 抛出错误，让子组件捕获并显示错误提示
      throw new Error('密码错误，请重新输入');
    }
  } catch (error) {
    // 4. 捕获验证过程中的错误，返回false阻止弹窗关闭
    console.error('密码验证失败:', error.message);
    // 返回false，子组件会保持打开状态并显示错误信息
    return false;
  }
};

/**
 * 处理弹窗取消回调
 */
const handleCancel = () => {
  console.log('关闭弹窗');
  password.value = '';
  inputWarn.value = '';
  modalVisible.value = false;
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'douyuFont';
  src: url('../../../../assets/font/douyuFont.otf');
}
/* 外层容器：适配多按钮组的布局（网格/横向排列可选） */
.buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

/* 单个按钮组容器 */
.button-group-container {
  height: 80px;
  width: 28%;
  margin: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.blue-item {
  background: url('/@/assets/images/home-container/configurable/blueBtn.png') no-repeat;
  background-size: 100% 100%;
  .button-name {
    margin-top: 18px;
    color: #05beee;
    font-family: 'douyuFont';
    font-size: 12px;
  }
}
.green-item {
  background: url('/@/assets/images/home-container/configurable/greenBtn.png') no-repeat;
  background-size: 100% 100%;
  .button-name {
    margin-top: 18px;
    color: #2bfedc;
    font-family: 'douyuFont';
    font-size: 12px;
  }
}

.radio-card {
  display: flex;
  align-items: center;
  cursor: pointer;
  cursor: pointer;
  margin-left: 27px;
  margin-top: 5px;
}

.radio-dot {
  margin-left: 10px;
  margin-right: 5px;
}

.radio-text {
  color: #fff;
  font-size: 12px;
}

.radio-dot input {
  display: none;
}
.btn-confirm-modal {
  .zxm-modal-content {
    height: 240px !important;
    .zxm-modal-body {
      height: 187px !important;
      padding-top: 33px !important;
    }
    .zxm-modal-footer {
      text-align: center;
    }
  }
}
.pswInput {
  margin-top: 55px;
  width: 50%;
  margin-left: 25% !important;
}
.warn-text {
  color: red;
  font-size: 15px;
}
</style>