<script lang="ts" setup>
import { PropType, reactive, ref } from 'vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import { traduction } from '@/utils/language';
import { setStoreData } from '@/utils/composition';

const data = defineProps({
  colorConfigRef: {
    required: true,
    type: Function as PropType<any>,
    default: () => {
      return () => {};
    },
  },
  layoutConfigRef: {
    required: true,
    type: Function as PropType<any>,
    default: () => {
      return () => {};
    },
  },
  resetRef: {
    required: true,
    type: Boolean,
    default: false,
  },
});
// 恢复默认
function reset() {
  data.colorConfigRef.reset();
  data.layoutConfigRef.reset();
}
const dialogRef = ref();
const dialogConfig = reactive({
  id: '',
  content: '执行该操作定制平台将恢复默认主题设计，当前定制方案将被擦除，请确认是否继续？',
  title: '确认',
  okButton: { id: 'secondConfirm_ok_btn', label: '确认', hide: false },
  cancelButton: { id: 'secondConfirm_cancel_btn', label: '取消', hide: false },
});
// 弹框关闭，清除localStorage即为恢复默认
function dialogClose(reason: any) {
  dialogRef.value.hide();
  if (reason) {
    localStorage.removeItem('customizeStyle');
    reset();
    setStoreData('event', 'alertMessage', { type: 'success', message: '操作成功。' });
  }
}
// 恢复默认二次确认弹框
function resetDialog() {
  dialogRef.value.show();
}
</script>

<template>
  <div class="explain">
    <div class="explain-title">如何进行品牌风格定制？</div>
    <div class="explain-content">
      您可在右侧表单区进行编辑，定制全局页面品牌风格。左侧为辅助信息展示区，展示定制操作对应的组件风格变化。您可通过恢复默认按钮，一键清空定制操作。本工具内所有操作均需保存即可生效在定制平台内。
    </div>
    <el-button id="resetButton" @click="resetDialog">恢复默认</el-button>
    <Dialog ref="dialogRef" :config="dialogConfig" @close="dialogClose"></Dialog>
  </div>
</template>

<style lang="scss" scoped>
.explain {
  height: 120px;
  .explain-title {
    font-weight: 900;
    color: var(--o-text-color-secondary);
    margin-bottom: 8px;
  }
  .el-button {
    margin-top: 32px;
  }
  :deep(.el-dialog__body) {
    padding: var(--o-dialog-body-padding);
    min-height: auto;
  }
}
</style>
