<script lang="ts" setup>
import { ref, onMounted, PropType } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import CustomizeColor from './leftView/CustomizeColor.vue';
import CustomizeText from './leftView/CustomizeText.vue';
import CustomizeLayout from './leftView/CustomizeLayout.vue';
import ColorConfig from './tabList/ColorConfig.vue';
import TextConfig from './tabList/TextConfig.vue';
import LayoutConfig from './tabList/LayoutConfig.vue';
import { setStoreData } from '@/utils/composition';
import Date from '@/utils/date';
import { DefaultColorConfig, DefaultLayoutConfig } from '../customize.model';
import { compareObjectEqual } from '@/utils/utils';

const checkView = ref(CustomizeColor);
const activeName = ref('color');

const emits = defineEmits(['back', 'save']);
const colorConfigRef = ref();
const layoutConfigRef = ref();
const resetRef = ref();
const saveDisabled = ref(true);
const colorChanged = ref(false);
const layoutChanged = ref(false);
let localConfig = {};

function handleClick(tab: TabsPaneContext) {
  switch (tab.paneName) {
    case 'color':
      checkView.value = CustomizeColor as any;
      break;
    case 'text':
      checkView.value = CustomizeText as any;
      break;
    case 'layout':
      checkView.value = CustomizeLayout as any;
      break;
    default:
      break;
  }
}

const customizeStyle = {
  time: '',
  pageStyle: JSON.parse(localStorage.getItem('customizeStyle') || '{}')?.pageStyle,
  color: {},
  layout: {}
};

// 获取时间
function getTime() {
  customizeStyle.time = new Date().pattern('yyyy/MM/dd HH:mm:ss');
}

// 颜色配置
function getColorConfig(val: any) {
  customizeStyle.color = JSON.parse(JSON.stringify(val));
  saveBtn();
  resetBtn();
}
function getLayoutConfig(val: any) {
  customizeStyle.layout = JSON.parse(JSON.stringify(val));
  saveBtn();
  resetBtn();
}

// 保存
function save() {
  getTime();
  // 如果主题色为空，则设置为默认颜色
  if (!customizeStyle.color['brandColor']) {
    customizeStyle.color['brandColor'] = '#0077FF';
    customizeStyle.color['brandMode'] = 'technology';
  }
  localStorage.setItem('customizeStyle', JSON.stringify(customizeStyle));
  emits('save', customizeStyle);
  setStoreData('event', 'alertMessage', { type: 'success', message: '操作成功。' });
  setTimeout(() => {
    emits('back');
  }, 1000);
}

function back() {
  const local = localStorage.getItem('customizeStyle');
  const defaultConfig = {
    color: DefaultColorConfig,
    layout: DefaultLayoutConfig
  };
  if (local) {
    colorConfigRef.value.reset(localConfig);
    layoutConfigRef.value.reset(localConfig);
  } else {
    colorConfigRef.value.reset(defaultConfig);
    layoutConfigRef.value.reset(defaultConfig);
  }
  emits('back');
}

function getLocalConfig() {
  const local = localStorage.getItem('customizeStyle');
  if (local) {
    localConfig = JSON.parse(local as string);
    return true;
  } else {
    return false;
  }
}

/** 保存按钮状态
先判断localStorage，没有的情况下判断默认值 */
function saveBtn() {
  let compare = {};
  if (getLocalConfig()) {
    compare = Object.assign(localConfig);
  } else {
    compare = {
      color: DefaultColorConfig,
      layout: DefaultLayoutConfig
    };
  }
  const isColorChange = !compareObjectEqual(customizeStyle.color, compare['color']);
  const isLayoutChange = !compareObjectEqual(customizeStyle.layout, compare['layout']);
  if ((isColorChange || isLayoutChange) && customizeStyle.color['brandColor']) {
    saveDisabled.value = false;
  } else {
    saveDisabled.value = true;
  }
}
// 恢复默认按钮状态
function resetBtn() {
  if (JSON.stringify(customizeStyle.color) !== JSON.stringify(DefaultColorConfig)) {
    colorChanged.value = true;
  } else {
    colorChanged.value = false;
  }
  if (JSON.stringify(customizeStyle.layout) !== JSON.stringify(DefaultLayoutConfig)) {
    layoutChanged.value = true;
  } else {
    layoutChanged.value = false;
  }
}

onMounted(() => {
  getLocalConfig();
});
</script>

<template>
  <div class="customize-style-container">
    <div class="left-view">
      <Explain
        :color-config-ref="colorConfigRef"
        :layout-config-ref="layoutConfigRef"
        :reset-ref="resetRef"
      />
      <component :is="checkView"></component>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="颜色" name="color">
          <el-scrollbar height="536px">
            <ColorConfig ref="colorConfigRef" @color="getColorConfig" />
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane v-if="false" label="文本" name="text">
          <el-scrollbar height="530px">
            <TextConfig />
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="布局&控件" name="layout">
          <el-scrollbar height="530px">
            <LayoutConfig ref="layoutConfigRef" @layout="getLayoutConfig" />
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <div class="footer">
    <el-button id="styleSave" type="primary" :disabled="saveDisabled" @click="save">保存</el-button>
    <el-button id="styleBack" @click="back">取消</el-button>
  </div>
</template>

<style lang="scss" scoped>
.customize-style-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.left-view {
  flex: 1;
  margin-right: 16px;
}
.tabs {
  width: 496px;
  :deep(.el-tabs__content) {
    background-color: var(--o-bg-color-light);
    border-radius: 0 4px 4px 4px;
  }
}
.footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style>