<script lang="ts" setup>
import { ref, reactive } from 'vue';
import TabSwitch from '@/pages/System/Power/components/common/TabSwitch.vue';
import WarningState from '@/components/WarningState/WarningState.vue';
import { IconCaretUp } from '@computing/opendesign-icons';

const unitSwitch = reactive({
  leftText: '菜单2',
  rightText: '菜单1',
  default: 2,
});
const activeName = ref('second');
const selectOption = ref('');
const options = [
  {
    id: 'Option1',
    label: 'Option1',
  },
  {
    id: 'Option2',
    label: 'Option2',
  },
  {
    id: 'Option3',
    label: 'Option3',
  },
  {
    id: 'Option4',
    label: 'Option4',
  },
  {
    id: 'Option5',
    label: 'Option5',
  },
];
const radioValue = ref('1');
const checked1 = ref(true);
</script>

<template>
  <div class="customize-color-container">
    <div class="preview-background">
      <div class="preview">
        <div class="list">
          <el-button type="primary">重要按钮</el-button>
          <el-button>次要按钮</el-button>
          <el-button type="text">链接</el-button>
        </div>
        <div class="list">
          <TabSwitch :data="unitSwitch" />
          <el-tabs v-model="activeName" :stretch="true" class="demo-tabs">
            <el-tab-pane label="菜单1" name="first"></el-tab-pane>
            <el-tab-pane label="菜单2" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list">
          <el-input placeholder="请输入"></el-input>
          <el-select v-model="selectOption" :suffix-icon="IconCaretUp" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
          <el-radio v-model="radioValue" label="1">单选选项1</el-radio>
          <el-checkbox v-model="checked1" label="多选选项1" />
        </div>
        <div class="list">
          <WarningState :critical="100" :major="100" :minor="100" />
          <div class="tags">
            <el-tag type="danger">紧急</el-tag>
            <el-tag type="major">严重</el-tag>
            <el-tag type="warning">轻微</el-tag>
          </div>
        </div>
        <div class="list">
          <div class="alert-item">
            <el-tag type="primary">运行</el-tag>
            <el-alert title="信息提示" type="info" show-icon />
          </div>
        </div>
        <div class="list">
          <div class="alert-item">
            <el-tag type="success">已启用</el-tag>
            <el-alert title="操作成功" type="success" show-icon />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.customize-color-container {
  .preview-background {
    width: 100%;
    height: 431px;
    background-color: var(--o-bg-color-dark);
    padding: 16px;
    margin-top: 16px;
    border-radius: 4px;
    .preview {
      height: 100%;
      background-color: var(--o-bg-color-base);
      padding: 16px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .list {
    display: flex;
    margin-bottom: 19px;

    :deep(.switch-box) {
      max-width: 257px;
      margin-right: 18px;
      .switch-item {
        width: calc(50% - 1px);
      }
    }
    .demo-tabs {
      max-width: 172px;
    }
    .el-input {
      max-width: 188px;
      margin-right: 16px;
    }
    .el-select {
      margin-right: 16px;
    }
    .el-tag {
      width: 64px;
      height: 16px;
      padding: 0;
    }
    .tags {
      height: 100%;
      line-height: 20px;
      margin-left: 14px;
      .el-tag {
        margin-right: 16px;
      }
    }
    .alert-item {
      width: 100%;
      display: inline-flex;
      .el-tag {
        margin: auto;
      }
      .el-alert {
        width: 100%;
        margin-left: 16px;
      }
    }
  }
  :deep(.el-alert--info) {
    .el-alert__icon {
      color: #0077ff !important;
    }
  }
  :deep(.el-alert--success) {
    .el-alert__icon {
      color: #24ab36 !important;
    }
  }
}
</style>
