<script lang="ts" setup>
import Platform from './CustomInfo/Platform.vue';
import CustomItems from './CustomInfo/CustomItems.vue';
import { reactive, ref } from 'vue';
import Date from '@/utils/date';
import { getThemeMode } from '@/utils/utils';
import { showSuccessMessage } from '@/utils/composition';

const infoResetRef = ref();
const resetConfig = reactive({
  title: '恢复默认',
  content: '执行该操作定制平台将恢复默认主题设计，当前定制方案将被擦除，请确认是否继续？',
  modalClass: 'info-dialog',
  okButton: { id: 'secondConfirm_ok_btn', label: '确认', hide: false },
  cancelButton: { id: 'secondConfirm_cancel_btn', label: '取消', hide: false },
});
const selectedData = reactive({
  other: '',
  size: '',
  position: '',
  color: 'light',
  qrEnable: true,
});

// 对外提供恢复默认设置的方法
defineExpose({
  resetDefault: () => {
    localStorage.removeItem('ptc');
  },
});

const theme = getThemeMode();
const customItemRef = ref();
const emits = defineEmits(['back', 'save']);
const disabled = ref(true);

function back(reason: boolean) {
  emits('back', reason);
}

function saveConfig(state: boolean) {
  customItemRef.value.save(state);
  const customizeStyle = JSON.parse(localStorage.getItem('customizeStyle') || '{}');
  const ptc = JSON.parse(localStorage.getItem('ptc') || '{}');
  customizeStyle['info'] = {
    size: ptc.size || '',
    position: ptc.position || '',
  };
  customizeStyle['time'] = new Date().pattern('yyyy/MM/dd HH:mm:ss');
  localStorage.setItem('customizeStyle', JSON.stringify(customizeStyle));
}

// 保存配制文件
function save() {
  saveConfig(true);
}

// 预览配制
function preview() {
  localStorage.setItem('previewFlag', JSON.stringify(true));
  saveConfig(false);
  const baseRouter = self.location.pathname || '/';
  window.open(`https://${self.location.host}${baseRouter}`);
  if (window) {
    window.opener = null;
  }
}

function reset() {
  infoResetRef.value.show();
}

function closeResetModal(value: boolean) {
  if (value) {
    customItemRef.value.reset();
    showSuccessMessage('操作成功');
  }
  infoResetRef.value.hide();
}

function selectItem(value: string) {
  Object.assign(selectedData, value);
}

function stateChange(value: boolean) {
  disabled.value = value;
}

function saveSuccess(data: any) {
  disabled.value = true;
  data.time = new Date().pattern('yyyy/MM/dd HH:mm:ss');
  setTimeout(() => {
    emits('back');
    emits('save', data);
  }, 1000);
}
</script>

<template>
  <div class="dz-info">
    <div class="item left-platform">
      <h4>如何进行品牌信息定制?</h4>
      <p class="dz-des">
        您可在右侧表单区进行编辑，定制品牌信息。左侧为辅助信息展示区，展示定制项对应所在登录页的位置以及提示帮助。您可通过预览功能查看当前登录页定制效果。通过恢复默认按钮，一键清空定制操作。本工具内所有操作均需保存即可生效在定制平台内。
      </p>
      <div class="buttons">
        <el-button id="brandInfoPreview" type="primary" @click="preview()">预览</el-button>
        <el-button id="resetBrandInfo" @click="reset()">恢复默认</el-button>
      </div>
      <div class="stage">
        <Platform :select="selectedData" />
      </div>
    </div>
    <div class="item right-options" :class="{ dark: theme === 'dark' }">
      <el-scrollbar height="534px">
        <CustomItems
          ref="customItemRef"
          @select="selectItem"
          @change="stateChange"
          @save-success="saveSuccess"
        />
      </el-scrollbar>
    </div>
  </div>
  <div class="footer">
    <el-button id="dz-save" type="primary" :disabled="disabled" @click="save()">保存</el-button>
    <el-button id="dz-cancel" @click="back(false)">取消</el-button>
  </div>

  <Dialog ref="infoResetRef" :config="resetConfig" @close="closeResetModal"></Dialog>
</template>

<style lang="scss" scoped>
.dz-info {
  display: flex;
  .item {
    flex-shrink: 0;
    h4 {
      margin-bottom: 8px;
    }
    p.dz-des {
      color: var(--o-text-color-secondary);
    }
    div.buttons {
      margin-top: 40px;
      :deep(.el-button) {
        min-width: 80px;
        border-radius: 2px;
      }
    }
  }
  .left-platform {
    width: 750px;
    margin-right: 16px;
    .stage {
      position: relative;
      height: 422px;
      margin-top: 16px;
    }
  }
  .right-options {
    width: 386px;
    max-height: 568px;
    background-color: var(--o-bg-color-light);
    border-radius: 4px;
    padding: 16px;
  }
}

.footer {
  text-align: center;
  margin-top: 32px;
}

:deep(.el-button) {
  min-width: 64px;
  border-radius: 2px;
}

:deep(.el-dialog.info-dialog) {
  .el-dialog__body {
    min-height: auto;
    padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 30px;
  }
}
</style>
