/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-08-20 15:31:30
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-07 14:39:58
 * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isAction.tsx
 * @Description: 是否操作行为
 */
import { defineComponent, PropType } from "vue";
import { ElDialog, ElButton } from "element-plus";
import warnIcon from "@/assets/common/warn_icon.png";
import "./isAction.scss";
export default defineComponent({
  name: "IsDelete",
  props: {
    title: {
      type: String as PropType<string>,
      default: "提示"
    },
    message: {
      type: String as PropType<string>,
      default: "确定要操作吗？"
    },
    visible: {
      type: Boolean as PropType<boolean>
      // required: true
    }
  },
  emits: ["update:visible", "confirm"],
  setup(props, { emit }) {
    const { visible } = toRefs(props);
    const localVisible = ref<boolean>(visible.value);
    const handleConfirm = () => {
      emit("confirm");
      // visible.value = false;
      // emit("update:visible", false);
    };

    const handleCancel = () => {
      // localVisible.value = false;
      emit("update:visible", false);
    };

    const handleClose = () => {
      // localVisible.value = false;
      emit("update:visible", false);
      // done();
    };

    watch(visible, newVal => {
      localVisible.value = newVal;
    });

    return () => (
      <ElDialog
        className="action_model_wrap el-dialog"
        visible={localVisible.value}
        width="560px"
        before-close={handleClose}
        show-close={false}
        v-slots={{
          footer: () => (
            <>
              <ElButton onClick={handleCancel}>取消</ElButton>
              <ElButton type="primary" onClick={handleConfirm}>
                确认
              </ElButton>
            </>
          )
        }}
      >
        <div className="model_content_box">
          <div className="flex items-center pr-[12px] icon_box">
            <img src={warnIcon} />
            <span className="hf-1 pl-[12px]">{props.title}</span>
          </div>
          <div className="pl-[36px] pt-[14px]">
            <span className="pf-1" v-html={props.message}></span>
          </div>
        </div>
      </ElDialog>
    );
  }
});
