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

const unitSwitch = reactive({
  leftText: '菜单2',
  rightText: '菜单1',
  default: 2,
});
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 dialogVisible = ref(true);
</script>

<template>
  <div class="customize-layout-container">
    <div class="preview-background">
      <div class="preview">
        <div class="list">
          <el-button type="primary">重要按钮</el-button>
          <el-button>次要按钮</el-button>
        </div>
        <div class="list">
          <TabSwitch :data="unitSwitch" />
        </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>
        </div>
        <div class="list">
          <el-tag type="danger">严重</el-tag>
          <el-tag type="major">紧急</el-tag>
          <el-tag type="warning">轻微</el-tag>
          <el-tag type="primary">运行</el-tag>
          <el-tag type="success">已启用</el-tag>
        </div>
        <div v-if="dialogVisible" v-reqKeepAlive.dialog class="list demo-dialog-warp">
          <el-dialog
            v-model="dialogVisible"
            title="弹窗"
            :close-on-click-modal="false"
            modal-class="o-overlay--section"
            class="o-dialog"
            :append-to-body="false"
          ></el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.customize-layout-container {
  .preview-background {
    width: 100%;
    height: 431px;
    background-color: var(--o-bg-color-light);
    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;
    .el-input {
      max-width: 188px;
      margin-right: 16px;
    }
    .el-tag {
      width: 64px;
      height: 16px;
      padding: 0;
      margin-right: 16px;
    }
  }
  .demo-dialog-warp {
    position: relative;
    height: 200px;
    background: var(--o-bg-color-base);
    margin-bottom: 0;
    :deep(.el-overlay) {
      background-color: var(--o-bg-color-base);
      .el-dialog {
        max-height: none;
        width: 544px;
        .el-dialog__body {
          min-height: 94px;
        }
      }
    }
  }
}
</style>
