<script setup lang="ts">
import { computed, onMounted, reactive, Ref, ref } from 'vue';
import ConfiguedInfo from './ConfiguedInfo.vue';
import ImageMask from './ImageMask.vue';
import ErrorIcon from '@/components/ErrorIcon/ErrorIcon.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';
import { getBytes, getThemeMode } from '@/utils/utils';
import { setStoreData } from '@/utils/composition';

const emits = defineEmits(['select', 'change', 'saveSuccess']);
const theme = getThemeMode();

// Ref引用
const logoMaskRef = ref();
const modelMaskRef = ref();
const iconMaskRef = ref();
const loginMaskRef = ref();
const qrMaskRef = ref();
const activePane: Ref<string[]> = ref([]);
const pane1Name = 'pane1';
const pane2Name = 'pane2';

// 配置好的数据，用于最终生成配制文件对象
const baseInfoConfig = {
  software: '',
  copyright: '',
  logo: '',
  model: '',
  ico: '',
};
const baseLoginConfig = {
  login: '',
  size: '',
  position: '',
  qrEnable: true,
  qrCode: '',
  notice: '',
};

const baseSrcData = {
  logo: '/image/ibmc.png',
  model: '/image/model.png',
  ico: '/image/ibmc.png',
  login: '/image/login.jpg',
  qrCode: '/image/qrCode.png',
};
const imgSrcData = reactive(Object.assign({}, baseSrcData));
const errorData = reactive({
  logo: '',
  model: '',
  ico: '',
  login: '',
  qrCode: '',
  software: '',
  notice: '',
  copyright: '',
});

const selectData = reactive({
  index: -1,
  other: '',
  size: '',
  position: '',
  qrEnable: true,
});
setInitialValue();

const infoConfigData = reactive(Object.assign({}, baseInfoConfig));
const loginConfigData = reactive(Object.assign({}, baseLoginConfig));

const baseCount = computed(() => {
  return Object.keys(infoConfigData).filter(key => infoConfigData[key] !== '').length;
});

const loginCounts = computed(() => {
  const base = 2;
  const nSize = selectData.size === 'large' ? 1 : 2;
  const nQrcode = selectData.qrEnable ? 2 : 1;
  return base + nSize + nQrcode;
});
const loginCount = computed(() => {
  let totalCount = 0;
  if (loginConfigData.login !== '') {
    totalCount += 1;
  }
  if (loginConfigData.notice !== '') {
    totalCount += 1;
  }

  // selectData相关
  if (selectData.size === 'large') {
    totalCount += 1;
  }

  if (selectData.position === 'center') {
    totalCount += 1;
  }

  if (!selectData.qrEnable) {
    totalCount += 1;
  }

  if (selectData.qrEnable && loginConfigData.qrCode !== '') {
    totalCount += 1;
  }

  return totalCount;
});

// 激活选项
function changeItem(num: number) {
  selectData.index = num;
  switch (num) {
    case 0:
      selectData.other = 'software';
      break;
    case 1:
      selectData.other = 'copyright';
      break;
    case 2:
      selectData.other = 'logo';
      break;
    case 3:
      selectData.other = 'model';
      break;
    case 4:
      selectData.other = 'ico';
      break;
    case 5:
      selectData.other = 'background';
      break;
    case 8:
      selectData.other = 'qrenable';
      break;
    case 9:
      selectData.other = 'qrcode';
      break;
    case 10:
      selectData.other = 'notice';
      break;
    default:
      break;
  }
  emits('select', selectData);
}

function resetSelect() {
  selectData.other = '';
  selectData.index = -1;
  emits('select', selectData);
}

function selectSize(size: string) {
  selectData.index = 6;
  selectData.size = size;
  selectData.other = '';
  selectData.position = 'right';
  loginConfigData.size = size;
  if (size === 'large') {
    loginConfigData.position = '';
  }
  emits('select', selectData);
  emitChange();
}

function selectPosition(pos: string) {
  selectData.index = 7;
  selectData.position = pos;
  selectData.other = '';
  loginConfigData.position = pos;
  emits('select', selectData);
  emitChange();
}

// 选择文件成功
function selectFileSuccess(data: any) {
  const target = data.target;
  imgSrcData[target] = data.base64;
  if (target === 'logo' || target === 'model' || target === 'ico') {
    infoConfigData[target] = data.base64;
  } else {
    loginConfigData[target] = data.base64;
  }
  errorData[target] = '';
  emitChange();
}

function selectFileError(error: any) {
  errorData[error.target] = error.errorMsg;
  0;
}

// QRCode开关变化事件
function switchQrCode(newState: boolean) {
  selectData.qrEnable = newState;
  if (newState === false) {
    imgSrcData.qrCode = baseSrcData.qrCode;
    loginConfigData.qrCode = '';
  }
  changeItem(8);
  emits('select', selectData);
  emitChange();
}

// 校验状态
function computedEnabledState() {
  // 状态的依据：1. 图片有选择，且无报错信息  2.输入框有输入数据，且无报错信息
  const hasError = Object.keys(errorData).filter(key => errorData[key] !== '').length > 0;
  const infoChanged = JSON.stringify(baseInfoConfig) !== JSON.stringify(infoConfigData);
  const loginChanged = JSON.stringify(baseLoginConfig) !== JSON.stringify(loginConfigData);
  if (!hasError && (infoChanged || loginChanged)) {
    return false;
  }
  return true;
}

function emitChange() {
  const state = computedEnabledState();
  emits('change', state);
}

// 保存配制信息
function saveConfig() {
  const temp = {};
  Object.keys(infoConfigData).forEach((key: string) => {
    if (infoConfigData[key] !== '') {
      temp[key] = infoConfigData[key];
    }
  });
  Object.keys(loginConfigData).forEach((key: string) => {
    if (loginConfigData[key] !== '') {
      temp[key] = loginConfigData[key];
    }
  });
  if (Object.keys(temp).length > 0) {
    localStorage.setItem('ptc', JSON.stringify(temp));
  }
}

// 校验方法, 主机名
function softValidator(value: string) {
  /**
   * 长度小于8
   * 不能以-开头和结尾
   * 匹配HOSTNAME正则
   */
  if (value === '') {
    errorData.software = '';
    emitChange();
    return true;
  }

  const isLenValid = value.length <= 8;
  const isValueValid = /^[0-9a-zA-Z]*$/.test(value);

  if (isLenValid && isValueValid) {
    errorData.software = '';
    emitChange();
    return true;
  } else {
    errorData.software = '格式错误。';
    emitChange();
    return false;
  }
}

// 校验方法，版权信息
function copyRightValidator(value: string) {
  /**
   * 最大长度128
   * 支持其他狱中
   */
  const length = getBytes(value);
  if (value === '') {
    errorData.copyright = '';
    emitChange();
    return true;
  }

  if (length > 128) {
    errorData.copyright = '格式错误。';
    emitChange();
    return false;
  }
  errorData.copyright = '';
  emitChange();
  return true;
}

// 校验方法，安全公告
function noticeValidator(value: string) {
  // 最大支持1024字节
  const length = getBytes(value);
  if (value === '') {
    errorData.notice = '';
    emitChange();
    return true;
  }
  if (length > 1024) {
    errorData.notice = '格式错误。';
    emitChange();
    return false;
  }
  errorData.notice = '';
  emitChange();
  return true;
}

defineExpose({
  save: (state: boolean) => {
    // 先保存数据到local，若state为true，则提示操作成功.
    saveConfig();
    if (state) {
      setStoreData('event', 'alertMessage', { type: 'success', message: '操作成功。' });
      const configData = Object.assign({}, infoConfigData, loginConfigData);
      emits('saveSuccess', configData);
    }
  },
  reset: () => {
    Object.keys(imgSrcData).forEach(key => {
      imgSrcData[key] = baseSrcData[key];
    });

    // 恢复base信息
    Object.keys(infoConfigData).forEach(key => {
      infoConfigData[key] = '';
    });

    Object.keys(loginConfigData).forEach(key => {
      if (key === 'qrEnable') {
        loginConfigData[key] = true;
      } else {
        loginConfigData[key] = '';
      }
    });

    // 恢复错误信息
    Object.keys(errorData).forEach(key => {
      errorData[key] = '';
    });

    // 恢复选中信息
    Object.keys(selectData).forEach(key => {
      selectData[key] = '';
    });
    selectData.index = -1;
    selectData.qrEnable = true;

    localStorage.removeItem('ptc');
    emitChange();
    emits('select', selectData);
  },
});

function paneChange(actives: string[]) {
  activePane.value = actives;
}

function setInitialValue() {
  const ptc = localStorage.getItem('ptc');
  if (ptc) {
    const ptcJson = JSON.parse(ptc);
    const imgKey = Object.keys(imgSrcData);
    const loginKeys = Object.keys(baseLoginConfig);
    const baseKeys = Object.keys(baseInfoConfig);

    Object.keys(ptcJson).forEach(key => {
      const value = ptcJson[key];
      if (imgKey.includes(key)) {
        imgSrcData[key] = value;
      }

      if (loginKeys.includes(key)) {
        baseLoginConfig[key] = value;

        if (key === 'size') {
          selectData.size = value;
        }
        if (key === 'position') {
          selectData.position = value;
        }
        if (key === 'qrEnable') {
          selectData.qrEnable = value;
        }
      }

      if (baseKeys.includes(key)) {
        baseInfoConfig[key] = value;
      }
    });
    emits('select', selectData);
  }
}
</script>
<template>
  <div class="root-items">
    <el-collapse :model="activePane" :class="{ dark: theme === 'dark' }" @change="paneChange">
      <!-- 基础信息 -->
      <el-collapse-item :name="pane1Name">
        <template #title>
          <div class="item-header">
            <ConfiguedInfo
              id="baseConfigCount"
              :finished="baseCount"
              :count="5"
              :active="activePane.indexOf(pane1Name) > -1"
            />
            基础信息
          </div>
        </template>
        <div class="item-body" :class="{ dark: theme === 'dark' }">
          <table class="tb-list" border="0">
            <!-- 系统LOGO -->
            <tr class="align-top">
              <td>
                <span class="circle" :class="{ active: infoConfigData.logo !== '' }"></span>
              </td>
              <td>软件logo</td>
              <td>
                <div
                  id="brandLogo"
                  class="img-container"
                  :class="{ error: errorData.logo !== '' }"
                  @mouseenter="logoMaskRef.show()"
                  @mouseleave="logoMaskRef.hide()"
                >
                  <div
                    class="dz-sys-logo container"
                    @mouseenter="changeItem(2)"
                    @mouseleave="resetSelect"
                  >
                    <img :src="imgSrcData.logo" alt="" />
                    <ImageMask
                      ref="logoMaskRef"
                      target="logo"
                      :upload-config="{ accept: '.png', maxSize: 1024 * 1024 }"
                      @file-success="selectFileSuccess"
                      @file-error="selectFileError"
                    />
                  </div>
                </div>
                <p v-if="errorData.logo !== ''" class="error-msg">{{ errorData.logo }}</p>
              </td>
            </tr>

            <!-- 系统名称 -->
            <tr class="align-top">
              <td>
                <span class="circle" :class="{ active: infoConfigData.software !== '' }"></span>
              </td>
              <td>软件名称</td>
              <td
                :class="{ 'is-error': errorData.software !== '' }"
                @mouseenter="changeItem(0)"
                @mouseleave="resetSelect"
              >
                <el-input
                  id="brandSoftName"
                  v-model="infoConfigData.software"
                  v-clearable
                  clearable
                  type="text"
                  :class="{ error: errorData.software !== '' }"
                  :placeholder="'openUBMC'"
                  @input="softValidator"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
                <p v-if="errorData.software !== ''" id="brandSoftError" class="error-msg">
                  {{ errorData.software }}
                </p>
                <p
                  id="brandSoftDes"
                  class="descript"
                  :class="{ errored: errorData.software !== '' }"
                >
                  0~8个字符，支持数字或英文字母、不能包含空格。
                </p>
              </td>
            </tr>

            <!-- 版权信息 -->
            <tr class="align-top">
              <td>
                <span class="circle" :class="{ active: infoConfigData.copyright !== '' }"></span>
              </td>
              <td>版权信息</td>
              <td @mouseenter="changeItem(1)" @mouseleave="resetSelect">
                <el-input
                  id="brandCopyRight"
                  v-model="infoConfigData.copyright"
                  class="text-copyright"
                  type="textarea"
                  :class="{ error: errorData.copyright !== '' }"
                  :rows="3"
                  :placeholder="'Huawei Technologies Co., Ltd.2004-2021. All rights reserved.'"
                  @input="copyRightValidator"
                ></el-input>
                <p v-if="errorData.copyright !== ''" id="brandCopyrightError" class="error-msg">
                  {{ errorData.copyright }}
                </p>
              </td>
            </tr>

            <!-- 首页机型图 -->
            <tr class="align-top">
              <td>
                <span class="circle" :class="{ active: infoConfigData.model !== '' }"></span>
              </td>
              <td>首页机型图</td>
              <td>
                <div
                  id="brandHomeModelImg"
                  class="img-container"
                  :class="{ error: errorData.model !== '' }"
                  @mouseenter="modelMaskRef.show()"
                  @mouseleave="modelMaskRef.hide()"
                >
                  <div
                    class="dz-model-image container"
                    @mouseenter="changeItem(3)"
                    @mouseleave="resetSelect"
                  >
                    <img :src="imgSrcData.model" alt="" />
                    <ImageMask
                      ref="modelMaskRef"
                      target="model"
                      :upload-config="{ accept: '.png', maxSize: 1024 * 1024 }"
                      @file-success="selectFileSuccess"
                      @file-error="selectFileError"
                    />
                  </div>
                </div>
                <p v-if="errorData.model !== ''" id="brandModelError" class="error-msg">
                  {{ errorData.model }}
                </p>
                <p id="brandModelDes" class="descript" :class="{ errored: errorData.model !== '' }">
                  用于首页服务器机型展示。支持.png格式，建议尺寸588*332像素，且不超过1MB，图片主体保留透明边距。
                </p>
              </td>
            </tr>

            <!-- ICO图标 -->
            <tr class="align-top">
              <td>
                <span class="circle" :class="{ active: infoConfigData.ico !== '' }"></span>
              </td>
              <td>ico图标</td>
              <td>
                <div
                  id="brandIcon"
                  class="img-container"
                  :class="{ error: errorData.ico !== '' }"
                  @mouseenter="iconMaskRef.show()"
                  @mouseleave="iconMaskRef.hide()"
                >
                  <div
                    class="dz-ico container"
                    @mouseenter="changeItem(4)"
                    @mouseleave="resetSelect"
                  >
                    <img :src="imgSrcData.ico" alt="" />
                    <ImageMask
                      ref="iconMaskRef"
                      target="ico"
                      :upload-config="{ accept: '.ico', maxSize: 1024 * 1024 }"
                      @file-success="selectFileSuccess"
                      @file-error="selectFileError"
                    />
                  </div>
                </div>
                <p v-if="errorData.ico !== ''" id="brandIconError" class="error-msg">
                  {{ errorData.ico }}
                </p>
                <p
                  id="brandIconDes"
                  class="descript icon"
                  :class="{ errored: errorData.ico !== '' }"
                >
                  用于浏览器标签页图标显示。支持.ico格式，建议尺寸16*16像素，且不超过1MB。
                </p>
              </td>
            </tr>
          </table>
        </div>
      </el-collapse-item>

      <!-- 登录页 -->
      <el-collapse-item :name="pane2Name">
        <template #title>
          <div class="item-header">
            <ConfiguedInfo
              id="loginConfigCount"
              :finished="loginCount"
              :count="loginCounts"
              :active="activePane.indexOf(pane2Name) > -1"
            />
            登录页
          </div>
        </template>
        <div class="item-body" :class="{ dark: theme === 'dark' }">
          <table class="tb-list" border="0">
            <!-- 背景图 -->
            <tr class="align-top">
              <td>
                <span class="circle" :class="{ active: loginConfigData.login !== '' }"></span>
              </td>
              <td>背景图</td>
              <td @mouseenter="changeItem(5)" @mouseleave="resetSelect">
                <div
                  id="loginBackImgContianer"
                  class="img-container"
                  :class="{ error: errorData.login !== '' }"
                  @mouseenter="loginMaskRef.show()"
                  @mouseleave="loginMaskRef.hide()"
                >
                  <div class="dz-back-image container">
                    <img id="loginBackImg" :src="imgSrcData.login" alt="" />
                    <ImageMask
                      ref="loginMaskRef"
                      target="login"
                      :upload-config="{ accept: '.jpg', maxSize: 1024 * 1024 }"
                      @file-success="selectFileSuccess"
                      @file-error="selectFileError"
                    />
                  </div>
                </div>
                <p v-if="errorData.login !== ''" id="loginBackImgError" class="error-msg">
                  {{ errorData.login }}
                </p>
              </td>
            </tr>

            <!-- 卡片大小 -->
            <tr class="align-top">
              <td>
                <span class="circle" :class="{ active: loginConfigData.size !== '' }"></span>
              </td>
              <td>卡片大小</td>
              <td>
                <div class="dz-pane-size-container">
                  <div
                    id="cardSamll"
                    class="img-container mr16 pane-item"
                    :class="{ active: selectData.size === 'small' || selectData.size === '' }"
                    @click="selectSize('small')"
                  >
                    <div class="dz-pane-size container">
                      <div class="pane pane-s"></div>
                    </div>
                  </div>

                  <div
                    id="cardLarge"
                    class="img-container pane-item"
                    :class="{ active: selectData.size === 'large' }"
                    @click="selectSize('large')"
                  >
                    <div class="dz-pane-size container">
                      <div class="pane pane-l"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>

            <!-- 卡片位置 -->
            <tr v-if="selectData.size === 'small' || selectData.size === ''" class="align-top">
              <td>
                <span class="circle" :class="{ active: loginConfigData.position !== '' }"></span>
              </td>
              <td>卡片位置</td>
              <td>
                <div class="dz-pane-pos">
                  <!-- small类型显示以下2个，居中还是靠右 -->
                  <div
                    id="cardRight"
                    class="img-container mr16 pane-item"
                    :class="{
                      active:
                        selectData.position === 'right' ||
                        (selectData.size === '' && selectData.position === '')
                    }"
                    @click="selectPosition('right')"
                  >
                    <div class="dz-pane-size container">
                      <div class="pane pane-s"></div>
                    </div>
                  </div>

                  <div
                    id="cardCenter"
                    class="img-container pane-item"
                    :class="{ active: selectData.position === 'center' }"
                    @click="selectPosition('center')"
                  >
                    <div class="dz-pane-size container">
                      <div class="pane pane-s pane-mid"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>

            <!-- 二维码功能 -->
            <tr class="pl-qrCode">
              <td>
                <span class="circle" :class="{ active: loginConfigData.qrEnable !== true }"></span>
              </td>
              <td>二维码功能</td>
              <td>
                <div class="dz-qr-switch">
                  <el-switch
                    v-model="loginConfigData.qrEnable"
                    v-addId.radio="'qrCodeSwitch'"
                    :active-value="true"
                    :inactive-value="false"
                    @change="switchQrCode"
                  ></el-switch>
                  <p class="descript">开启后，可扫码查看帮助资料。</p>
                </div>
              </td>
            </tr>

            <!-- 二维码内容 -->
            <tr v-if="loginConfigData.qrEnable" class="align-top">
              <td>
                <span class="circle" :class="{ active: loginConfigData.qrCode !== '' }"></span>
              </td>
              <td>二维码内容</td>
              <td>
                <div
                  id="qrCodeContent"
                  class="img-container"
                  :class="{ error: errorData.qrCode !== '' }"
                  @mouseenter="qrMaskRef.show()"
                  @mouseleave="qrMaskRef.hide()"
                >
                  <div
                    class="dz-qrcode container"
                    @mouseenter="changeItem(9)"
                    @mouseleave="resetSelect"
                  >
                    <img id="qrCodeImg" :src="imgSrcData.qrCode" alt="" />
                    <ImageMask
                      ref="qrMaskRef"
                      target="qrCode"
                      :upload-config="{ accept: '.png', maxSize: 1024 * 1024 }"
                      @file-success="selectFileSuccess"
                      @file-error="selectFileError"
                    />
                  </div>
                </div>
                <p v-if="errorData.qrCode !== ''" id="qrCodeError" class="error-msg">
                  {{ errorData.qrCode }}
                </p>
              </td>
            </tr>

            <!-- 安全公告 -->
            <tr>
              <td>
                <span class="circle" :class="{ active: loginConfigData.notice !== '' }"></span>
              </td>
              <td>默认安全公告</td>
              <td></td>
            </tr>
          </table>
          <div class="dz-notice" @mouseenter="changeItem(10)" @mouseleave="resetSelect">
            <el-input
              id="brandSecNotice"
              v-model="loginConfigData.notice"
              class="text-notice"
              type="textarea"
              :class="{ error: errorData.notice !== '' }"
              :placeholder="'安全公告'"
              :rows="6"
              @input="noticeValidator"
            ></el-input>
            <p v-if="errorData.notice !== ''" class="error-msg">{{ errorData.notice }}</p>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style scoped lang="scss">
.root-items {
  height: 100%;
  overflow-y: auto;
  .items {
    padding: 0 16px;
    background-color: var(--o-bg-color-base);
    border-radius: 4px;
    &.login {
      margin-top: 8px;
    }
  }
  .item-header {
    padding: 0 16px;
    width: 100%;
    color: var(--o-color-black);
    font-size: var(--o-font-size-text);
    font-weight: 600;
  }
  .item-body {
    padding: 0 16px;
    &.dark {
      .tb-list {
        tr > td:nth-of-type(2) {
          color: var(--o-color-white);
        }
      }
    }
  }
  .tb-list {
    width: 100%;
    border-collapse: collapse;
    tr.align-top {
      td {
        vertical-align: top;
        font-size: var(--o-font-size-text);
        &:nth-of-type(1),
        &:nth-of-type(2) {
          padding-top: 20px;
        }
      }
    }
    tr.pl-qrCode {
      td {
        vertical-align: top;
      }
    }
    td {
      position: relative;
      padding: 12px 0;
      font-size: 12px;
    }
    .circle {
      display: inline-block;
      height: 8px;
      width: 2px;
      background-color: var(--o-border-color-light);
      &.active {
        background-color: var(--o-color-success);
      }
    }
    tr > td:nth-of-type(1) {
      padding-right: 4px;
    }
    tr > td:nth-of-type(2) {
      width: 86px;
    }
    tr > td:nth-of-type(3) {
      width: 232px;
    }
    .dz-pane-size-container,
    .dz-pane-pos {
      display: flex;
    }
    .img-container {
      display: inline-block;
      padding: 7px;
      border: 1px solid var(--o-border-color-lighter);
      border-radius: 2px;
      &.pane-item {
        width: 108px;
        height: 68px;
        box-sizing: border-box;
        &.active {
          border: 2px solid var(--o-color-band) !important;
          padding: 6px;
        }
        &:hover {
          border: 2px solid var(--o-color-primary-secondary);
          padding: 6px;
        }
      }
      &.error {
        border-color: #e42121;
      }
      &.mr16 {
        margin-right: 16px;
      }
      &:hover {
        border: 2px solid var(--o-color-primary-secondary);
        padding: 6px;
      }
      .container {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      .dz-sys-logo {
        width: 140px;
        height: 72px;
      }
      .dz-model-image {
        width: 216px;
        height: 122px;
      }

      .dz-ico {
        width: 70px;
        min-height: 72px;
      }
      .dz-back-image {
        width: 216px;
        height: 122px;
      }
      .dz-qrcode {
        width: 72px;
        height: 72px;
      }
      .dz-pane-size {
        position: relative;
        width: 92px;
        height: 52px;
        background-color: #e4eaf1;
        border-radius: 2px;
        .pane {
          position: absolute;
          background-color: #576372;
          border-radius: 2px;
          &.dark {
            background-color: var(--o-text-color-secondary);
          }
        }
        .pane-s {
          width: 24px;
          height: 26px;
          top: 10px;
          right: 10px;
        }
        .pane-l {
          width: 26px;
          height: 100%;
          right: 0px;
        }
        .pane-mid {
          right: 25px;
        }
      }
    }
    .error-msg {
      position: absolute;
      color: var(--o-color-danger);
      margin-top: 4px;
      line-height: 16px;
    }
    .descript {
      color: #8d98aa;
      line-height: 16px;
      margin-top: 8px;
      &.errored {
        margin-top: 28px;
      }
      &.icon {
        margin-bottom: 4px;
      }
    }
  }
  .dz-notice {
    margin-top: -4px;
    padding-bottom: 16px;
    padding-left: 6px;
  }
}
.dz-notice {
  .error-msg {
    color: var(--o-color-danger);
  }
}
:deep(.el-switch) {
  display: inherit;
}
:deep(.el-input.error) {
  input {
    box-shadow: 0 0 0 1px var(--o-color-danger);
  }
}
:deep(.el-textarea.error) {
  textarea {
    box-shadow: 0 0 0 1px var(--o-color-danger);
  }
}
:deep(.el-collapse) {
  border-color: transparent;
}
:deep(.el-input.error) {
  input {
    border-color: var(--o-color-danger);
    background-color: var(--o-color-danger-secondary);
  }
}
:deep(.el-textarea.error) {
  textarea {
    border-color: var(--o-color-danger);
    background-color: var(--o-color-danger-secondary);
  }
}

:deep(.text-copyright) {
  textarea {
    height: 64px;
  }
}
:deep(.text-notice) {
  textarea {
    height: 112px;
  }
}
:deep(.el-collapse-item__header) {
  border: none;
  border-radius: var(--o-border-radius);
  &.is-active {
    border-radius: var(--o-border-radius) var(--o-border-radius) 0 0;
  }
  &.dark {
    background-color: var(--o-bg-color-dark);
  }
}
:deep(.el-collapse.dark) {
  .el-collapse-item__header {
    background-color: var(--o-bg-color-base);
    .item-header {
      color: var(--o-color-white);
    }
  }
  .el-collapse-item__wrap {
    background-color: var(--o-bg-color-base);
  }
}
:deep(.el-collapse-item__wrap) {
  border: none;
  border-radius: 0 0 var(--o-border-radius) var(--o-border-radius);
}

:deep(.el-collapse-item:first-child) {
  margin-bottom: 8px;
}
:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}
:deep(.el-textarea__inner:hover) {
  border-color: var(--o-color-primary);
}
:deep(.el-collapse-item__arrow) {
  display: none;
}
</style>
