<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import Collapse from '../../components/Collapse.vue';
import CustomizeService from '@/services/customize/customize.service';
import { setStoreData } from '@/utils/composition';
import { DefaultLayoutConfig } from '../../customize.model';

const CustomizeConfig = new CustomizeService();

const layoutConfig = reactive(JSON.parse(JSON.stringify(DefaultLayoutConfig)));

const defaultLayoutConfig = JSON.parse(JSON.stringify(layoutConfig));

const nav = reactive({
  checked: 'topLeft',
  config: { total: 1, configured: 0 },
  list: ['topLeft', 'top', 'left'],
  change: (val: string) => {
    layoutConfig.nav = val;
    nav.config.configured = 1;
    setStoreData('loct', 'navStyle', val);
  },
});

const control = reactive({
  checked: [],
  config: { total: 2, configured: 0 },
  list: [
    {
      text: '圆角',
      label: 'radius',
      checked: 'small',
      isConfig: false,
      size: [
        { value: 'small', text: '小圆角' },
        { value: 'middle', text: '中圆角' },
        { value: 'large', text: '大圆角' },
      ],
    },
    {
      text: '阴影',
      label: 'shadow',
      checked: 'middle',
      isConfig: false,
      size: [
        { value: 'small', text: '小阴影' },
        { value: 'middle', text: '中阴影' },
        { value: 'large', text: '大阴影' },
      ],
    },
  ],
  radioChange: (val: string, item: string) => {
    switch (item) {
      case 'radius':
        setRadius(val);
        break;
      case 'shadow':
        setShadow(val);
        break;
      default:
        break;
    }
    setControl();
  },
});

function setRadius(val: string) {
  layoutConfig.control.radius = val;
  switch (val) {
    case 'small':
      CustomizeConfig.setVar('--o-border-radius', '4px');
      CustomizeConfig.setVar('--o-border-radius-small', '2px');
      CustomizeConfig.setVar('--i-button-border-radius', '2px');
      break;
    case 'middle':
      CustomizeConfig.setVar('--o-border-radius', '6px');
      CustomizeConfig.setVar('--o-border-radius-small', '4px');
      CustomizeConfig.setVar('--i-button-border-radius', '4px');
      break;
    case 'large':
      CustomizeConfig.setVar('--o-border-radius', '6px');
      CustomizeConfig.setVar('--o-border-radius-small', '4px');
      CustomizeConfig.setVar('--i-button-border-radius', '99px');
      break;
    default:
      break;
  }
}

function setShadow(val: string) {
  layoutConfig.control.shadow = val;
  switch (val) {
    case 'small':
      CustomizeConfig.setVar('--o-box-shadow', '0 4px 8px 0 rgba(0,0,0,0.2)');
      CustomizeConfig.setVar('--el-box-shadow-dark', '-4px 4px 8px 0 rgba(0,0,0,0.2)');
      break;
    case 'middle':
      CustomizeConfig.setVar('--o-box-shadow', '0 8px 16px 0 rgba(0,0,0,0.2)');
      CustomizeConfig.setVar('--el-box-shadow-dark', '-16px 4px 16px 0 rgba(0,0,0,0.2)');
      break;
    case 'large':
      CustomizeConfig.setVar('--o-box-shadow', '0 16px 32px 0 rgba(0,0,0,0.2)');
      CustomizeConfig.setVar('--el-box-shadow-dark', '-24px 4px 24px 0 rgba(0,0,0,0.2)');
      break;
    default:
      break;
  }
}

function setControl() {
  control.checked.forEach(item => {
    switch (item) {
      case 'radius':
        layoutConfig.control.radius = control.list[0].checked;
        break;
      case 'shadow':
        layoutConfig.control.radius = control.list[1].checked;
        break;
      default:
        break;
    }
  });
}
const emit = defineEmits(['layout']);

defineExpose({
  reset(val?: any) {
    return init(val);
  },
});

function init(val?: any) {
  let value;
  if (val) {
    Object.assign(layoutConfig, val.layout);
    value = layoutConfig;
  } else {
    value = defaultLayoutConfig;
  }
  nav.checked = value.nav;
  layoutConfig.nav = value.nav;
  setStoreData('loct', 'navStyle', value.nav);
  if (value.control.radius) {
    control.list[0].checked = value.control.radius;
    setRadius(value.control.radius);
  }
  if (value.control.shadow) {
    control.list[1].checked = value.control.shadow;
    setShadow(value.control.shadow);
  }
}
// 已配置数更新
function refreshHeader() {
  if (layoutConfig.nav !== defaultLayoutConfig.nav) {
    nav.config.configured = 1;
  } else {
    nav.config.configured = 0;
  }
  // 计算告控件卡片头部的已配置数
  control.config.configured = 0;
  if (layoutConfig.control.radius !== defaultLayoutConfig.control.radius) {
    control.config.configured++;
    control.list[0].isConfig = true;
  } else {
    control.list[0].isConfig = false;
  }
  if (layoutConfig.control.shadow !== defaultLayoutConfig.control.shadow) {
    control.config.configured++;
    control.list[1].isConfig = true;
  } else {
    control.list[1].isConfig = false;
  }
}

onMounted(() => {
  const localConfig = JSON.parse(localStorage.getItem('customizeStyle') as string);
  init(localConfig);
  emit('layout', layoutConfig);
});
watch(
  layoutConfig,
  newVal => {
    refreshHeader();
    emit('layout', newVal);
  },
  { deep: true },
);
</script>

<template>
  <div class="container">
    <div class="list">
      <Collapse custom-id="navConfig" label="布局导航" :config="nav.config">
        <div class="content">
          <div class="tip">应用于全局导航场景</div>
          <el-radio-group v-model="nav.checked" class="custom-radio nav-list" @change="nav.change">
            <el-radio v-addId.radio="'nav0'" class="nav-1" :label="nav.list[0]">
              <div class="inner">
                <div class="box-1"></div>
                <div class="box-2">
                  <div class="box-3"></div>
                </div>
              </div>
            </el-radio>
            <el-radio v-addId.radio="'nav1'" class="nav-2" :label="nav.list[1]">
              <div class="inner">
                <div class="box-1"></div>
                <div class="box-2"></div>
              </div>
            </el-radio>
            <el-radio v-addId.radio="'nav2'" class="nav-3" :label="nav.list[2]">
              <div class="inner nav-box">
                <div class="box-1"></div>
                <div class="box-2"></div>
              </div>
            </el-radio>
          </el-radio-group>
        </div>
      </Collapse>
    </div>
    <div class="list">
      <Collapse custom-id="controlConfig" label="控件" :config="control.config">
        <div class="content control-item">
          <div class="tip">应用于全局按钮、通知、选择器、输入框、卡片等控件样式</div>
          <el-checkbox-group v-model="control.checked" class="control" :disabled="true">
            <el-checkbox
              v-addId.checkbox="'radiusConfig'"
              :class="control.list[0].isConfig ? 'is-checked' : ''"
              label="radius"
              class="control-item"
            >
              <span class="control-label">圆角</span>
              <el-radio-group
                v-model="control.list[0].checked"
                @change="control.radioChange($event, 'radius')"
              >
                <el-radio
                  v-for="(item, index) in control.list[0].size"
                  :key="item"
                  v-addId.radio="'radius' + index"
                  :label="item.value"
                >
                  {{ item.text }}
                </el-radio>
              </el-radio-group>
            </el-checkbox>
            <el-checkbox
              v-addId.checkbox="'shadowConfig'"
              :class="control.list[1].isConfig ? 'is-checked' : ''"
              label="shadow"
              class="control-item"
            >
              <span class="control-label">阴影</span>
              <el-radio-group
                v-model="control.list[1].checked"
                @change="control.radioChange($event, 'shadow')"
              >
                <el-radio
                  v-for="(item, index) in control.list[1].size"
                  :key="item"
                  v-addId.radio="'shadow' + index"
                  :label="item.value"
                >
                  {{ item.text }}
                </el-radio>
              </el-radio-group>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </Collapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../../customize.scss';
.container {
  margin: 16px;
  .content {
    padding: 0 0 16px;
  }
  .list {
    border-radius: 2px;
    background-color: var(--o-bg-color-base);
    padding: 0 16px;
    margin-bottom: 8px;
  }
  .custom-radio {
    justify-content: space-between;
    @include custom-radio;
  }
  .inner {
    width: 92px;
    height: 52px;
    border-radius: 2px;
    overflow: hidden;
  }
  .nav-list {
    margin-top: 16px;
    .nav-1 {
      margin-right: 24px;
      .box-1 {
        height: 10px;
        background: var(--o-color-info);
      }
      .box-2 {
        height: 100%;
        background: var(--o-border-color-base);
        padding: 5px 0 0 5px;
      }
      .box-3 {
        height: 30px;
        width: 20px;
        border-radius: 2px;
        background: var(--o-color-info);
      }
    }
    .nav-2 {
      margin-right: 24px;
      .box-1 {
        height: 10px;
        background: var(--o-color-info);
      }
      .box-2 {
        height: 100%;
        background: var(--o-border-color-base);
      }
    }
    .nav-3 {
      .nav-box {
        display: flex;
      }
      .box-1 {
        width: 20px;
        height: 100%;
        background: var(--o-color-info);
      }
      .box-2 {
        flex: 1;
        height: 100%;
        background: var(--o-border-color-base);
      }
    }
  }
  .control-item {
    @include custom-checkbox;
  }

  .control {
    margin-top: 16px;
    .control-label {
      margin-right: 24px;
    }
  }
}
</style>
