<template>
  <el-divider content-position="left">布局切换 </el-divider>
  <div class="layout-drawer-content-flex">
    <!-- defaults 布局 -->
    <div
      class="layout-drawer-content-item"
      @click="handleSetLayout('defaults')"
    >
      <section
        class="el-container el-circular"
        :class="{
          active: themeConfig.layout === 'defaults',
        }"
      >
        <aside class="el-aside" style="width: 20px"></aside>
        <section class="el-container is-vertical">
          <header class="el-header" style="height: 10px"></header>
          <main class="el-main"></main>
        </section>
      </section>
      <div class="layout-tips-warp">
        <div class="layout-tips-box">
          <p class="layout-tips-txt">默认</p>
        </div>
      </div>
    </div>
    <!-- classic 布局 -->
    <div class="layout-drawer-content-item" @click="handleSetLayout('classic')">
      <section
        class="el-container is-vertical el-circular"
        :class="{
          active: themeConfig.layout === 'classic',
        }"
      >
        <header class="el-header" style="height: 10px"></header>
        <section class="el-container">
          <aside class="el-aside" style="width: 20px"></aside>
          <section class="el-container is-vertical">
            <main class="el-main"></main>
          </section>
        </section>
      </section>
      <div class="layout-tips-warp">
        <div class="layout-tips-box">
          <p class="layout-tips-txt">经典</p>
        </div>
      </div>
    </div>
    <!-- transverse 布局 -->
    <div
      class="layout-drawer-content-item"
      @click="handleSetLayout('transverse')"
    >
      <section
        class="el-container is-vertical el-circular"
        :class="{
          active: themeConfig.layout === 'transverse',
        }"
      >
        <header class="el-header" style="height: 10px"></header>
        <section class="el-container">
          <section class="el-container is-vertical">
            <main class="el-main"></main>
          </section>
        </section>
      </section>
      <div class="layout-tips-warp">
        <div class="layout-tips-box">
          <p class="layout-tips-txt">横向</p>
        </div>
      </div>
    </div>
    <!-- columns 布局 -->
    <div class="layout-drawer-content-item" @click="handleSetLayout('columns')">
      <section
        class="el-container el-circular"
        :class="{
          active: themeConfig.layout === 'columns',
        }"
      >
        <aside class="el-aside-dark" style="width: 10px"></aside>
        <aside class="el-aside" style="width: 20px"></aside>
        <section class="el-container is-vertical">
          <header class="el-header" style="height: 10px"></header>
          <main class="el-main"></main>
        </section>
      </section>
      <div class="layout-tips-warp">
        <div class="layout-tips-box">
          <p class="layout-tips-txt">分栏</p>
        </div>
      </div>
    </div>
  </div>
  <div class="copy-config">
    <el-alert
      title="点击下方按钮，复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。"
      type="warning"
      :closable="false"
    />

    <el-button
      size="small"
      class="copy-config-btn"
      icon="el-icon-document-copy"
      type="primary"
      ref="copyConfigBtnRef"
      @click="handleCopyConfigClick"
      >一键复制配置
    </el-button>
  </div>
</template>

script
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "@/hooks/useStore";
import { copyTextUtil } from "@/utils";
import { setLocalThemeConfig } from "@/utils/theme";

export default defineComponent({
  name: "layout-theme",

  setup() {
    const store = useStore();
    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });
    /**
     * 设置store里面的layout数据
     * @param layout 被选中的layout
     */
    const handleSetLayout = (layout: string) => {
      if (themeConfig.value.layout === layout) return;
      Object.assign(themeConfig.value, {
        layout,
        isDrawer: false,
      });
      setLocalThemeConfig(themeConfig.value);
    };

    const handleCopyConfigClick = () => {
      copyTextUtil(JSON.stringify(themeConfig.value)).then(() => {
        themeConfig.value.isDrawer = false;
      });
    };

    return {
      themeConfig,
      handleSetLayout,
      handleCopyConfigClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.layout-drawer-content-flex {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0 -5px;
  .layout-drawer-content-item {
    width: 50%;
    height: 70px;
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
    padding: 5px;
    .el-container {
      height: 100%;
      opacity: 0.4;
      &.active {
        border: 1px solid;
        border-color: var(--color-primary);
        opacity: 1;
      }
      .el-aside-dark {
        background-color: #b3c0d1;
      }
      .el-aside {
        background-color: #d3dce6;
      }
      .el-header {
        background-color: #b3c0d1;
      }
      .el-main {
        background-color: #e9eef3;
      }
    }
    .el-circular {
      border-radius: 2px;
      overflow: hidden;
      border: 1px solid transparent;
      transition: all 0.3s ease-in-out;
    }

    .layout-tips-warp,
    .layout-tips-warp-active {
      transition: all 0.3s ease-in-out;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid;
      border-color: var(--color-primary-light-4);
      border-radius: 100%;
      padding: 4px;
      .layout-tips-box {
        transition: inherit;
        width: 30px;
        height: 30px;
        z-index: 9;
        border: 1px solid;
        border-color: var(--color-primary-light-4);
        border-radius: 100%;
        .layout-tips-txt {
          transition: inherit;
          position: relative;
          top: 5px;
          font-size: 12px;
          line-height: 1;
          letter-spacing: 2px;
          white-space: nowrap;
          color: var(--color-primary-light-4);
          text-align: center;
          transform: rotate(30deg);
          left: -1px;
          background-color: #e9eef3;
          width: 32px;
          height: 17px;
          line-height: 17px;
        }
      }
    }
    .layout-tips-warp-active {
      border: 1px solid;
      border-color: var(--color-primary);
      .layout-tips-box {
        border: 1px solid;
        border-color: var(--color-primary);
        .layout-tips-txt {
          color: var(--color-primary) !important;
          background-color: #e9eef3 !important;
        }
      }
    }
    &:hover {
      .el-circular {
        transition: all 0.3s ease-in-out;
        border: 1px solid;
        border-color: var(--color-primary);
        opacity: 1;
      }
      .layout-tips-warp {
        transition: all 0.3s ease-in-out;
        border-color: var(--color-primary);
        .layout-tips-box {
          transition: inherit;
          border-color: var(--color-primary);
          .layout-tips-txt {
            transition: inherit;
            color: var(--color-primary) !important;
            background-color: #e9eef3 !important;
          }
        }
      }
    }
  }
}
.copy-config {
  margin: 10px 0 60px 0;
  .copy-config-btn {
    width: 100%;
    margin-top: 15px;
  }
  .copy-config-last-btn {
    margin: 10px 0 0;
  }
}
</style>
