<script lang="ts" setup>
import { ref, reactive, onMounted, watch, watchEffect } from 'vue';
import Collapse from '../../components/Collapse.vue';
import ThemeColorItem from '../common/ThemeColorItem.vue';
import ChangeModeBtns from '@/components/Customize/CustomizeStyle/common/ChangeModeBtns.vue';
import CustomIcon from '../common/CustomIcon.vue';
import CustomizeService from '@/services/customize/customize.service';
import Color from '../../color';
import { ColorTheme } from '@/model/base-enum';
import { DefaultColorConfig } from '../../customize.model';

const CustomizeConfig = new CustomizeService();
let mixColor = ref('#FFF');

interface colorConfig {
  themeMode: string;
  brandColor: string;
  brandMode: string;
  background: {
    light: string;
    dark: string;
  };
  alarmColor: {
    criticalColor: string;
    majorColor: string;
    minorColor: string;
  };
  stateColor: {
    alertColor: string;
    successColor: string;
    inheritBrand: string | null;
  };
}
/**
 * 颜色配置的初始值为默认值
 * 初始化后从local读取配置并且覆盖
 */
const colorConfig: colorConfig = reactive(JSON.parse(JSON.stringify(DefaultColorConfig)));
// 保存颜色配置默认值
const defaultColorConfig: colorConfig = JSON.parse(JSON.stringify(colorConfig));

// 主题模式
const theme = reactive({
  checked: 'light',
  config: {
    total: 1,
    configured: 0,
  },
  change: (val: string) => {
    CustomizeConfig.setColorTheme(val as ColorTheme);
    theme.checked = val;
    colorConfig.themeMode = val;
    if (val === 'dark') {
      baseColor.bgColor = colorConfig.background.dark || baseColor.bgColorList.dark[0];
      baseColor.bgColorChange(baseColor.bgColor);
      mixColor.value = '#000';
      // 深色模式下，登录框背景色
      CustomizeConfig.setVar('--o-color-login-card-primary', '#3E4551');
    } else if (val === 'light') {
      baseColor.bgColor = colorConfig.background.light || baseColor.bgColorList.light[0];
      baseColor.bgColorChange(baseColor.bgColor);
      mixColor.value = '#FFF';
      CustomizeConfig.setVar('--o-color-login-card-primary', '#ffffff');
    }
    setAlertColor();
    setSuccessColor();
  },
});

// 品牌色
const brand = reactive({
  value: '',
  checked: 'technology',
  config: {
    total: 1,
    configured: 0,
  },
  colorList: [
    {
      text: '浪漫蓝紫',
      label: 'romantic',
      color1: '#3F51B5',
      color2: new Color(mixColor.value).mixin('#3F51B5', 0.32).value,
      color3: new Color(mixColor.value).mixin('#3F51B5', 0.72).value,
    },
    {
      text: '经典蓝',
      label: 'classic',
      color1: '#004EB5',
      color2: new Color(mixColor.value).mixin('#004EB5', 0.32).value,
      color3: new Color(mixColor.value).mixin('#004EB5', 0.72).value,
    },
    {
      text: '科技蓝',
      label: 'technology',
      color1: '#0077FF',
      color2: new Color(mixColor.value).mixin('#0077FF', 0.32).value,
      color3: new Color(mixColor.value).mixin('#0077FF', 0.72).value,
    },
    {
      text: '热情红',
      label: 'enthusiasm',
      color1: '#EC4419',
      color2: new Color(mixColor.value).mixin('#EC4419', 0.32).value,
      color3: new Color(mixColor.value).mixin('#EC4419', 0.72).value,
    },
    {
      text: '生机葱青',
      label: 'vitality',
      color1: '#1CAD70',
      color2: new Color(mixColor.value).mixin('#1CAD70', 0.32).value,
      color3: new Color(mixColor.value).mixin('#1CAD70', 0.72).value,
    },
    {
      text: '活力橙',
      label: 'energy',
      color1: '#F59B00',
      color2: new Color(mixColor.value).mixin('#F59B00', 0.32).value,
      color3: new Color(mixColor.value).mixin('#F59B00', 0.72).value,
    },
    {
      text: '温暖日暮',
      label: 'warm',
      color1: '#FCC82C',
      color2: new Color(mixColor.value).mixin('#FCC82C', 0.32).value,
      color3: new Color(mixColor.value).mixin('#FCC82C', 0.72).value,
    },
  ],
  change: (val: any) => {
    let color1 = '';
    let color2 = '';
    let color3 = '';
    if (val === 'custom' && customColor.value) {
      color1 = customColor.item.color1;
      color2 = customColor.item.color2;
      color3 = customColor.item.color3;
      brand.value = color1;
    } else {
      brand.colorList.forEach(item => {
        if (item.label === val) {
          color1 = item.color1;
          color2 = item.color2;
          color3 = item.color3;
          brand.value = color1;
        }
      });
    }
    if (color1 !== '' && color2 !== '' && color3 !== '') {
      CustomizeConfig.setVar('--o-color-primary', color1);
      CustomizeConfig.setVar('--o-color-primary-secondary', color2);
      CustomizeConfig.setVar('--o-color-primary-fourth', color3);
      CustomizeConfig.setVar('--o-color-video-primary', color1 + 'B3');
      const color = new Color(color1);
      CustomizeConfig.setVar('--o-color-customize-shadow', color.mixin('#000', 0.52).value + '66');
    }
    colorConfig.brandMode = val;
    colorConfig.brandColor = color1;
  },
});

// 自定义品牌色
const customColor = reactive({
  value: '',
  text: '自定义',
  label: 'custom',
  item: {
    color1: '',
    color2: '',
    color3: '',
  },
  colorShow: true,
  isInitial: true,
  colorChange: (val: any) => {
    if (val) {
      customColor.item.color1 = val;
      customColor.item.color2 = new Color(mixColor.value).mixin(val, 0.32).value;
      customColor.item.color3 = new Color(mixColor.value).mixin(val, 0.72).value;
      customColor.isInitial = false;
      brand.change('custom');
    } else {
      customColor.isInitial = true;
      brand.change('technology');
      brand.checked = 'technology';
    }
  },
  mouseover: () => {
    customColor.colorShow = false;
  },
  mouseleave: () => {
    customColor.colorShow = true;
  },
});

// 背景色
const baseColor = reactive({
  bgColor: '#EBEFF6',
  config: {
    total: 1,
    configured: 0,
  },
  bgColorList: {
    light: ['#EBEFF6', '#F5F5F5', '#F5F7FA'],
    dark: ['#181B20', '#202020', '#121212'],
  },
  bgColorChange: (val: any) => {
    let key = '';
    if (theme.checked) {
      key = '--o-bg-color-dark';
    }
    CustomizeConfig.setVar(key, val);
    colorConfig.background[theme.checked] = val;
  },
});

// 告警色
const alarmColor = reactive({
  checked: [],
  config: {
    total: 3,
    configured: 0,
  },
  alarmList: [
    {
      text: '紧急',
      label: 'critical',
      checked: '#E32020',
      isConfig: false,
      color: ['#C70000', '#E32020', '#FF0000', '#FF4136'],
    },
    {
      text: '严重',
      label: 'major',
      checked: '#F97611',
      isConfig: false,
      color: ['#CC5720', '#E65100', '#DF6D00', '#F97611'],
    },
    {
      text: '轻微',
      label: 'minor',
      checked: '#EBAF00',
      isConfig: false,
      color: ['#BA8700', '#E09D19', '#EBAF00', '#FAAB0C'],
    },
  ],
  radioChange: (value: any, label: string) => {
    setAlarmColor();
    switch (label) {
      case 'critical':
        CustomizeConfig.setVar('--o-color-danger', value);
        CustomizeConfig.setVar(
          '--o-color-danger-secondary',
          new Color(mixColor.value).mixin(value, 0.72).value,
        );
        CustomizeConfig.setVar(
          '--o-color-danger-tertiary',
          new Color(mixColor.value).mixin(value, 0.85).value,
        );
        // 告警&事件页面紧急提示框背景色，透明度15%(26)
        CustomizeConfig.setVar('--o-color-danger-background', value + '26');
        colorConfig.alarmColor.criticalColor = value;
        break;
      case 'major':
        CustomizeConfig.setVar('--o-color-major', value);
        CustomizeConfig.setVar(
          '--o-color-major-secondary',
          new Color(mixColor.value).mixin(value, 0.72).value,
        );
        CustomizeConfig.setVar(
          '--o-color-major-tertiary',
          new Color(mixColor.value).mixin(value, 0.85).value,
        );
        // 告警&事件页面严重提示框背景色，透明度15%(26)
        CustomizeConfig.setVar('--o-color-major-background', value + '26');
        colorConfig.alarmColor.majorColor = value;
        break;
      case 'minor':
        CustomizeConfig.setVar('--o-color-warning', value);
        CustomizeConfig.setVar(
          '--o-color-warning-secondary',
          new Color(mixColor.value).mixin(value, 0.72).value,
        );
        CustomizeConfig.setVar(
          '--o-color-warning-tertiary',
          new Color(mixColor.value).mixin(value, 0.85).value,
        );
        // 告警&事件页面轻微提示框背景色，透明度15%(26)
        CustomizeConfig.setVar('--o-color-warning-background', value + '26');
        colorConfig.alarmColor.minorColor = value;
        break;
      default:
        break;
    }
  },
});

function setAlarmColor() {
  alarmColor.checked.forEach(item => {
    switch (item) {
      case 'critical':
        colorConfig.alarmColor.criticalColor = alarmColor.alarmList[0].checked;
        break;
      case 'major':
        colorConfig.alarmColor.majorColor = alarmColor.alarmList[1].checked;
        break;
      case 'minor':
        colorConfig.alarmColor.minorColor = alarmColor.alarmList[2].checked;
        break;
      default:
        break;
    }
  });
}

// 状态色
const stateColor = reactive({
  checked: [],
  config: {
    total: 2,
    configured: 0,
  },
  colorList: [
    {
      checked: 'default',
      default: '#0077FF',
      brand: colorConfig.brandColor,
    },
    {
      checked: 'default',
      default: '#24AB36',
      brand: colorConfig.brandColor,
    },
  ],
  radioChange: (val: any, item: any) => {
    switch (item) {
      case 'alert':
        if (val === 'brand') {
          colorConfig.stateColor.inheritBrand = 'alert';
        } else if (val === 'default') {
          if (colorConfig.stateColor.inheritBrand === 'alert') {
            colorConfig.stateColor.inheritBrand = null;
          }
        }
        stateColor.colorList[0].checked === val;
        setAlertColor();
        break;
      case 'success':
        if (val === 'brand') {
          colorConfig.stateColor.inheritBrand = 'success';
        } else if (val === 'default') {
          if (colorConfig.stateColor.inheritBrand === 'success') {
            colorConfig.stateColor.inheritBrand = null;
          }
        }
        stateColor.colorList[1].checked === val;
        setSuccessColor();
        break;
      default:
        break;
    }
  },
});

function setAlertColor() {
  if (
    stateColor.colorList[0].checked === 'brand' &&
    (brand.checked !== 'custom' || customColor.value)
  ) {
    CustomizeConfig.setVar('--o-color-state-primary', stateColor.colorList[0].brand);
    const seccondaryColor = new Color(mixColor.value).mixin(stateColor.colorList[0].brand, 0.72)
      .value;
    CustomizeConfig.setVar('--o-color-state-primary-secondary', seccondaryColor);
  } else if (stateColor.colorList[0].checked === 'default') {
    CustomizeConfig.setVar('--o-color-state-primary', stateColor.colorList[0].default);
    const seccondaryColor = new Color(mixColor.value).mixin(stateColor.colorList[0].default, 0.72)
      .value;
    CustomizeConfig.setVar('--o-color-state-primary-secondary', seccondaryColor);
  }
}

function setSuccessColor() {
  if (
    stateColor.colorList[1].checked === 'brand' &&
    (brand.checked !== 'custom' || customColor.value)
  ) {
    CustomizeConfig.setVar('--o-color-success', stateColor.colorList[1].brand);
    const seccondaryColor = new Color(mixColor.value).mixin(stateColor.colorList[1].brand, 0.72)
      .value;
    CustomizeConfig.setVar('--o-color-success-secondary', seccondaryColor);
  } else if (stateColor.colorList[1].checked === 'default') {
    CustomizeConfig.setVar('--o-color-success', stateColor.colorList[1].default);
    const seccondaryColor = new Color(mixColor.value).mixin(stateColor.colorList[1].default, 0.72)
      .value;
    CustomizeConfig.setVar('--o-color-success-secondary', seccondaryColor);
  }
}

const emit = defineEmits(['color']);
// 初始化告警色
function initAlarmColor(value: any) {
  alarmColor.alarmList[0].checked = value.alarmColor.criticalColor;
  alarmColor.radioChange(value.alarmColor.criticalColor, 'critical');
  alarmColor.alarmList[1].checked = value.alarmColor.majorColor;
  alarmColor.radioChange(value.alarmColor.majorColor, 'major');
  alarmColor.alarmList[2].checked = value.alarmColor.minorColor;
  alarmColor.radioChange(value.alarmColor.minorColor, 'minor');
}
// 初始化状态色
function initStateColor(value: any) {
  if (value.stateColor.inheritBrand === 'alert') {
    stateColor.colorList[0].checked = 'brand';
    stateColor.radioChange('brand', 'alert');
    stateColor.radioChange('default', 'success');
  } else if (value.stateColor.inheritBrand === 'success') {
    stateColor.colorList[1].checked = 'brand';
    stateColor.radioChange('default', 'alert');
    stateColor.radioChange('brand', 'success');
  } else {
    stateColor.colorList[0].checked = 'default';
    stateColor.colorList[1].checked = 'default';
    stateColor.radioChange('default', 'alert');
    stateColor.radioChange('default', 'success');
  }
}

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

function init(val?: any) {
  let value: colorConfig;
  if (val) {
    Object.assign(colorConfig, val.color);
    value = colorConfig;
  } else {
    value = defaultColorConfig;
  }
  // 初始化主题
  theme.checked = value.themeMode;
  theme.change(value.themeMode);
  // 初始化品牌色
  brand.checked = value.brandMode;
  brand.value = value.brandColor;
  if (value.brandMode === 'custom') {
    customColor.value = value.brandColor;
    customColor.item.color1 = value.brandColor;
    customColor.item.color2 = new Color(mixColor.value).mixin(value.brandColor, 0.32).value;
    customColor.item.color3 = new Color(mixColor.value).mixin(value.brandColor, 0.72).value;
    customColor.isInitial = false;
  }
  brand.change(brand.checked);
  // 初始化背景色
  colorConfig.background.dark = value.background.dark;
  colorConfig.background.light = value.background.light;
  if (theme.checked === 'dark') {
    baseColor.bgColor = value.background.dark;
    baseColor.bgColorChange(baseColor.bgColor);
  } else if (theme.checked === 'light') {
    baseColor.bgColor = value.background.light;
    baseColor.bgColorChange(baseColor.bgColor);
  }
  initAlarmColor(value);
  initStateColor(value);
}
// 已配置数更新
function refreshHeader() {
  if (colorConfig.themeMode !== defaultColorConfig.themeMode) {
    theme.config.configured = 1;
  } else {
    theme.config.configured = 0;
  }
  if (colorConfig.brandMode !== defaultColorConfig.brandMode) {
    brand.config.configured = 1;
  } else {
    brand.config.configured = 0;
  }
  if (theme.checked === 'dark') {
    if (defaultColorConfig.background.dark !== baseColor.bgColor) {
      baseColor.config.configured = 1;
    } else {
      baseColor.config.configured = 0;
    }
  } else if (theme.checked === 'light') {
    if (defaultColorConfig.background.light !== baseColor.bgColor) {
      baseColor.config.configured = 1;
    } else {
      baseColor.config.configured = 0;
    }
  }
  if (alarmColor.alarmList[0].checked !== defaultColorConfig.alarmColor.criticalColor) {
    alarmColor.alarmList[0].isConfig = true;
  } else {
    alarmColor.alarmList[0].isConfig = false;
  }
  if (alarmColor.alarmList[1].checked !== defaultColorConfig.alarmColor.majorColor) {
    alarmColor.alarmList[1].isConfig = true;
  } else {
    alarmColor.alarmList[1].isConfig = false;
  }
  if (alarmColor.alarmList[2].checked !== defaultColorConfig.alarmColor.minorColor) {
    alarmColor.alarmList[2].isConfig = true;
  } else {
    alarmColor.alarmList[2].isConfig = false;
  }
  // 计算告警色卡片头部的已配置数
  let alarmColorConfigured = 0;
  for (let i = 0; i < 3; i++) {
    if (alarmColor.alarmList[i].isConfig) {
      alarmColorConfigured++;
    }
  }
  alarmColor.config.configured = alarmColorConfigured;
  refreshStateColorHeader();
}

function refreshStateColorHeader() {
  if (stateColor.colorList[0].checked === 'brand' || stateColor.colorList[1].checked === 'brand') {
    stateColor.config.configured = 1;
  } else {
    stateColor.config.configured = 0;
  }
}

onMounted(() => {
  const localConfig = JSON.parse(localStorage.getItem('customizeStyle') as string);
  init(localConfig);
  emit('color', colorConfig);
});
watch(
  colorConfig,
  newVal => {
    stateColor.colorList.forEach(item => {
      item.brand = newVal.brandColor;
    });
    initStateColor(colorConfig);
    refreshHeader();
    emit('color', newVal);
  },
  { deep: true },
);
watch(
  mixColor,
  newVal => {
    brand.colorList.forEach(item => {
      item.color2 = new Color(mixColor.value).mixin(item.color1, 0.32).value;
      item.color3 = new Color(mixColor.value).mixin(item.color1, 0.72).value;
    });
    init(colorConfig);
  },
  { deep: true },
);
</script>

<template>
  <div class="container">
    <div class="theme-mode list">
      <Collapse custom-id="themeMode" label="主题模式" :config="theme.config">
        <div class="content">
          <div class="tip">应用于全局颜色主题，建议根据登录页背景图颜色选择对应主题模式</div>
          <ChangeModeBtns
            :mode="theme.checked"
            class="theme-switch"
            custom-id="themeModeBtn"
            @change="theme.change"
          ></ChangeModeBtns>
        </div>
      </Collapse>
    </div>
    <!-- 品牌色 -->
    <div class="brand-color list">
      <Collapse custom-id="brandColor" label="品牌色" :config="brand.config">
        <div class="content">
          <div class="tip">应用于关键行动点，操作状态、重要信息高亮，图形化等场景</div>
          <el-radio-group
            v-model="brand.checked"
            class="theme-radio brand-color-list"
            @change="brand.change"
          >
            <el-radio
              v-for="item in brand.colorList"
              :key="item"
              v-addId.radio="item.label"
              :label="item.label"
            >
              <ThemeColorItem :mode="1" :color="item" :title="item.text"></ThemeColorItem>
            </el-radio>
            <el-radio
              v-addId.radio="'customBrand'"
              :label="customColor.label"
              @mouseover="customColor.mouseover"
              @mouseleave="customColor.mouseleave"
            >
              <el-color-picker v-model="customColor.value" @change="customColor.colorChange" />
              <transition name="el-fade-in-linear">
                <ThemeColorItem
                  v-show="customColor.colorShow"
                  class="custom-preview"
                  :color="customColor.item"
                  :title="customColor.text"
                ></ThemeColorItem>
              </transition>
              <transition name="el-fade-in-linear">
                <div v-show="customColor.isInitial && customColor.colorShow" class="custom-mask">
                  <el-icon size="24px">
                    <CustomIcon />
                  </el-icon>
                  <div class="default-color">自定义</div>
                </div>
              </transition>
            </el-radio>
          </el-radio-group>
        </div>
      </Collapse>
    </div>
    <!-- 背景色 -->
    <div class="list">
      <Collapse custom-id="bgCollapse" label="背景色" :config="baseColor.config">
        <div class="content">
          <div class="tip">应用于全局页面最底部背景</div>
          <div class="bg-list">
            <el-radio-group
              v-model="baseColor.bgColor"
              class="theme-radio bg-color-list"
              @change="baseColor.bgColorChange"
            >
              <el-radio
                v-for="(item, index) in theme.checked === 'light'
                  ? baseColor.bgColorList.light
                  : baseColor.bgColorList.dark"
                :key="item"
                v-addId.radio="'bgColor' + index"
                :label="item"
              >
                <div :style="{ backgroundColor: item }" class="bg-color">{{ item }}</div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </Collapse>
    </div>
    <!-- 告警色 -->
    <div class="list">
      <Collapse custom-id="alarmColor" label="告警色" :config="alarmColor.config">
        <div class="content alarm">
          <div class="tip">应用于告警提示、状态标签、加载等场景</div>
          <el-checkbox-group :disabled="true">
            <el-checkbox
              v-for="item in alarmColor.alarmList"
              :key="item"
              v-addId.checkbox="item.label"
              :label="item.label"
              class="alarm-list"
              :class="item.isConfig ? 'is-checked' : ''"
            >
              <span class="t-alarm-label">{{ item.text }}</span>
              <el-radio-group
                v-model="item.checked"
                class="theme-radio alarm-color-list"
                @change="alarmColor.radioChange($event, item.label)"
              >
                <el-radio
                  v-for="(i, index) in item.color"
                  :key="i"
                  v-addId.radio="item.label + 'Color' + index"
                  :label="i"
                >
                  <div :style="{ backgroundColor: i }" class="bg-color alarm-text">
                    {{ i }}
                  </div>
                </el-radio>
              </el-radio-group>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </Collapse>
    </div>
    <div class="list">
      <Collapse custom-id="stateColor" label="状态色" :config="stateColor.config">
        <div class="content">
          <div class="tip">应用于全局提示、信息提示、状态标签、加载等场景</div>
          <el-checkbox-group v-model="stateColor.checked" class="state" :disabled="true">
            <el-checkbox
              v-addId.checkbox="'promptColor'"
              label="prompt"
              class="state-item"
              :class="stateColor.colorList[0].checked === 'brand' ? 'is-checked' : ''"
            >
              <span class="state-label">提示</span>
              <el-radio-group
                v-model="stateColor.colorList[0].checked"
                class="theme-radio state-color"
                @change="stateColor.radioChange($event, 'alert')"
              >
                <el-radio v-addId.radio="'promptColor0'" label="default" class="default">
                  <div class="inner">
                    <div
                      :style="{ backgroundColor: stateColor.colorList[0].default }"
                      class="inner-color"
                    ></div>
                    <div class="inner-text">
                      <span>默认颜色</span>
                      <span>{{ stateColor.colorList[0].default }}</span>
                    </div>
                  </div>
                </el-radio>
                <el-radio
                  v-addId.radio="'promptColor1'"
                  label="brand"
                  :disabled="colorConfig.stateColor.inheritBrand === 'success'"
                >
                  <div class="inner">
                    <div :style="{ backgroundColor: brand.value }" class="inner-color"></div>
                    <div class="inner-text">
                      <span>跟随品牌色</span>
                      <span>{{ brand.value }}</span>
                    </div>
                  </div>
                </el-radio>
              </el-radio-group>
              <div class="alert">若品牌色非蓝色色系，建议选用默认颜色</div>
            </el-checkbox>

            <el-checkbox
              v-addId.checkbox="'successColor'"
              label="success"
              class="state-item"
              :class="stateColor.colorList[1].checked === 'brand' ? 'is-checked' : ''"
            >
              <span class="state-label">成功</span>
              <el-radio-group
                v-model="stateColor.colorList[1].checked"
                class="theme-radio state-color"
                @change="stateColor.radioChange($event, 'success')"
              >
                <el-radio v-addId.radio="'successColor0'" label="default" class="default">
                  <div class="inner">
                    <div
                      :style="{ backgroundColor: stateColor.colorList[1].default }"
                      class="inner-color"
                    ></div>
                    <div class="inner-text">
                      <span>默认颜色</span>
                      <span>{{ stateColor.colorList[1].default }}</span>
                    </div>
                  </div>
                </el-radio>
                <el-radio
                  v-addId.radio="'successColor1'"
                  label="brand"
                  :disabled="colorConfig.stateColor.inheritBrand === 'alert'"
                >
                  <div class="inner">
                    <div :style="{ backgroundColor: brand.value }" class="inner-color"></div>
                    <div class="inner-text">
                      <span>跟随品牌色</span>
                      <span>{{ brand.value }}</span>
                    </div>
                  </div>
                </el-radio>
              </el-radio-group>
              <div class="alert">若品牌色非绿色色系，建议选用默认颜色</div>
            </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;
  }
  .tip {
    margin-bottom: 16px;
    color: var(--o-text-color-tertiary);
  }
  .list {
    border-radius: 4px;
    background-color: var(--o-bg-color-base);
    padding: 0 16px;
    margin-bottom: 8px;
  }
  .el-checkbox {
    height: auto;
  }
  .theme-radio {
    justify-content: space-between;
    @include custom-radio;
  }
  :deep(.el-color-picker) {
    .el-color-picker__trigger {
      width: 80px;
      height: 80px;
      padding: 0;
      .el-color-picker__color {
        border-radius: 2px;
      }
      .el-icon {
        display: none;
      }
    }
  }
  .bg-color {
    width: 73px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 2px;
  }
  .brand-color-list {
    height: 209px;
    align-content: space-between;
  }
  .bg-color-list {
    width: 299px;
  }
  .alarm-color-list {
    width: 100%;
  }
  .bg-color-list,
  .alarm-color-list,
  .state-color {
    justify-content: space-between;
  }
  .alarm-text {
    width: 66px;
    color: #ffffff;
  }
  .bg-list {
    span {
      margin-right: 35px;
    }
  }
  .alarm {
    @include custom-checkbox;
  }
  .alarm-list {
    &:not(:last-child) {
      margin-bottom: 18px;
    }
  }
  .t-alarm-label,
  .state-label {
    margin-right: 24px;
  }
  .custom-preview {
    position: absolute;
    top: 6px;
    left: 6px;
  }
  .custom-mask {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: -2px;
    left: -2px;
    width: 98px;
    height: 98px;
    border-radius: 2px;
    background: var(--o-bg-color-light);
  }
  .default-color {
    margin-top: 6px;
    color: #8d98aa;
  }
  .state {
    .state-item {
      display: flex;
      &:not(:last-child) {
        margin-bottom: 24px;
      }
    }
    .alert {
      margin-top: 8px;
      margin-left: 48px;
    }
    .default {
      margin-right: 16px;
    }
    @include custom-checkbox;
  }
  .state-color {
    .inner {
      display: flex;
      align-items: center;
      .inner-color {
        width: 32px;
        height: 32px;
        border-radius: 2px;
        margin-right: 8px;
      }
      .inner-text {
        width: 114px;
      }
    }
  }
}
</style>
