<script setup lang="ts">
import { ref, reactive, PropType, toRaw, computed } from 'vue';
import { IconAlarm, IconError, IconSuccess } from '@computing/opendesign-icons';
import { traduction } from '@/utils/language';
import { IDialogConfig } from '@/model/base-interface';
import { getStoreData } from '@/utils/composition';

const props = defineProps({
  config: {
    type: Object as PropType<IDialogConfig>,
    required: true,
    default: () => {
      return {};
    },
  },
});

// Dilaog配置属性
const defaultConfig: IDialogConfig = {
  title: traduction('COMMON_OK'),
  content: '',
  id: '',
  width: '432px',
  type: 'warning',
  modalClass: 'c-modal',
  alignItems: 'center',
  closeIcon: true,
  closeOnEsc: false,
  closeOnClickModal: false,
  backDrop: true,
  okButton: { id: 'secondConfirm_ok_btn', label: traduction('COMMON_OK'), hide: false },
  cancelButton: { id: 'secondConfirm_cancel_btn', label: traduction('COMMON_CANCEL'), hide: false },
  saveButton: { id: 'secondConfirm_save_btn', label: traduction('COMMON_SAVE'), hide: true },
};
const dialogVisible = ref(false);
const config = reactive(defaultConfig);
const disabled = ref(false);
const saveDisabled = ref(false);

// 定义输出方法
defineExpose({
  show() {
    const data = toRaw(props.config);
    Object.keys(data).forEach(key => {
      if (typeof data[key] === 'object' && key !== 'content') {
        Object.keys(data[key]).forEach(_key => {
          config[key][_key] = data[key][_key];
        });
      } else {
        if (key === 'size') {
          switch (data[key]) {
            case 'large':
              config.width = '656px';
              break;
            case 'medium':
              config.width = '544px';
              break;
            default:
              config.width = '432px';
          }
        } else {
          config[key] = data[key];
        }
      }
      disabled.value = false;
    });
    dialogVisible.value = true;
  },
  hide() {
    dialogVisible.value = false;
  },
  disable: () => {
    disabled.value = true;
  },
  enable: () => {
    disabled.value = false;
  },
  saveDisable: () => {
    saveDisabled.value = true;
  },
  saveEnable: () => {
    saveDisabled.value = false;
  },
});

// 定义输出的事件
const emit = defineEmits(['dialogClose', 'close', 'save']);

function closeModal(reason: boolean) {
  disabled.value = true;
  emit('close', reason);
}

function saveModal() {
  emit('save');
}

</script>

<template>
  <div v-if="dialogVisible" v-reqKeepAlive.dialog class="custom-dialog">
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="config.closeOnClickModal"
      :close-on-press-escape="config.closeOnEsc"
      :class="config.modalClass"
      :title="config.title"
      :width="config.width"
      :show-close="config.closeIcon"
      @close="closeModal(false)"
    >
      <div class="dialog-content" :class="{ center: config.alignItems === 'center' }">
        <!-- 默认插槽，显示只传入文字的形式 -->
        <slot v-if="config.content !== ''" name="default">
          <div class="content-item">
            <el-icon v-if="config.type === 'success'" :size="24">
              <IconSuccess />
            </el-icon>
            <el-icon v-if="config.type === 'warning'" :size="24">
              <IconAlarm />
            </el-icon>
            <el-icon v-if="config.type === 'error'" :size="24">
              <IconError />
            </el-icon>
          </div>
          <div v-if="typeof config.content === 'string'" class="content-item text">
            {{ config.content }}
          </div>
          <div v-if="Array.isArray(config.content)" class="content-item text">
            <div v-for="item in config.content" :key="item" class="content-item-li">{{ item }}</div>
          </div>
        </slot>
        <!-- 传入自定义内容，组件等 -->
        <slot name="other"></slot>
      </div>

      <template v-if="!config.okButton?.hide || !config.cancelButton?.hide" #footer>
        <div class="dialog-footer">
          <el-button
            :id="config.okButton?.id"
            :disabled="disabled"
            class="modal-btn"
            type="primary"
            size="small"
            @click="closeModal(true)"
          >
            {{ config?.okButton?.label }}
          </el-button>
          <el-button
            :id="config.saveButton?.id"
            v-if="!config.saveButton?.hide"
            :disabled="saveDisabled"
            class="modal-btn"
            type="primary"
            size="small"
            @click="saveModal()"
          >
            {{ config?.saveButton?.label }}
          </el-button>
          <el-button
            v-if="!config.cancelButton?.hide"
            :id="config.cancelButton?.id"
            class="modal-btn"
            size="small"
            @click="closeModal(false)"
          >
            {{ config?.cancelButton?.label }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.custom-dialog {
  height: auto !important;
  &.timeout {
    :deep(.el-overlay) {
      z-index: 9999 !important;
    }
  }
  .modal-btn {
    min-width: 64px;
  }
  :deep(.el-icon) {
    font-size: 24px;
    vertical-align: middle;
  }

  :deep(.el-dailog) {
    .el-dialog__headerbtn {
      right: 0 !important;
      top: 2px !important;
    }
  }
  :deep(.el-dialog__header) {
    background: var(--o-bg-color-base);
    box-shadow: inset 0 -1px 0 0 var(--o-border-color-light);
    border-radius: 4px 4px 0 0;
  }

  .dialog-content {
    display: flex;
    font-size: 12px;
    color: $APP-COLOR-TEXT;
    letter-spacing: 0;
    line-height: 16px;
    &.start {
      align-items: flex-start;
    }
    &.center {
      align-items: center;
    }

    .content-item.text {
      margin-left: 16px;
      padding-top: 4px;
    }
  }

  .dialog-footer {
    text-align: center;
  }
}

.accessResetModal {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 5px;
  color: #333;
}

#secondConfirm_ok_btn{
  background: var(--o-color-primary);
}
</style>
