<template>
  <div>
    <div class="box">
      <div class="left">
        <mailLeft ref="leftDom"></mailLeft>
      </div>
      <div class="right">
        <mailMain></mailMain>
      </div>
    </div>
    <div>
      <!-- 右边弹窗 -->
      <div :class="mailCon">
        <div :class="iconCon">
          <i :class="iconClose" @click="handleClose(iconClose)"></i>
        </div>
        <mailRight v-show="showRight" />
      </div>
    </div>
  </div>
</template>

<script setup>
import mailLeft from "./com/left.vue";
import mailMain from "./com/main.vue";
import mailRight from "./com/right.vue";
const mailCon = ref("mail-right-con");
const iconCon = ref("icon-con");
const iconClose = ref("iconfont icon-iconm_yewtx");
const showRight = ref(true);
const handleClose = (icon) => {
  let iconConArr = "";
  let iconArr = "";
  let conArr = "";
  if (icon.split(" ").indexOf("icon-closed") !== -1) {
    iconConArr = "icon-con";
    iconArr = "iconfont icon-iconm_yewtx";
    conArr = "mail-right-con";
    showRight.value = true;
  } else {
    iconConArr = "icon-con icon-con-closed";
    iconArr = "iconfont icon-iconm_yewtx icon-closed";
    conArr = "mail-right-con move-to-close";
    showRight.value = false;
  }
  mailCon.value = conArr;
  iconClose.value = iconArr;
  iconCon.value = iconConArr;
};
const route = useRoute();
const leftDom = ref(null);
onMounted(() => {
  if (route.query.mail) {
    leftDom.value.handleGoWrite(route.query.mail);
  }
});
</script>

<style lang="scss" scoped>
.box {
  width: calc(100vw - 20px);
  height: calc(100vh - 50px - 50px);
  padding: 10px;
  display: flex;
  position: relative;
  // box-sizing: border-box;

  .left,
  .right {
    background: #fff;
  }
  .left {
    width: 300px;
    margin-right: 10px;
    box-sizing: border-box;
  }
  .right {
    flex: 1;
  }
  .mail-right {
    position: absolute;
    right: 10px;
  }
}

.mail-right-con {
  // border-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 2000;
  position: fixed;
  margin-top: 100px;
  top: 0;
  width: 400px;
  transition: all cubic-bezier(0.05, 0.91, 0.22, 1.03) 0.5s;
  padding: 0px 10px;
  height: calc(100vh - 50px - 50px - 10px);
  background: white;
  left: 100%;
  margin-left: -428px;
  box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 20px 0)
    var(--devui-shadow, rgba(0, 0, 0, 0.08));
  i {
    cursor: pointer;
    transition: all cubic-bezier(0, 0.88, 0, 1.29) 1s;
    font-size: 15px;
    position: relative;
    &:hover {
      color: #169bd5;
      transform: rotate(360deg);
    }
  }
}

.move-to-close {
  transform: translateX(400px);
  .mail-right {
    transition: all linear 0.3s;
    padding-left: 20px;
  }
}
.icon-closed {
  // display: block;
  transform: rotate(-180deg);
  &:hover {
    transform: rotate(180deg) !important;
  }
}
.icon-con {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  left: 100%;
  // top: 13px;
  margin-left: -17px;
  position: relative;
}
.icon-con-closed {
  left: 0;
  margin-left: -10px;
}
</style>