<template>
  <div id="createdRoom" @click.stop v-if="ifShow">
    <div class="created_dialog">
      <div class="blurBox"></div>

      <div class="content">
        <div class="dialog_title">{{ t('base.joinRoom') }}</div>
        <!-- <div class="dialog_title" v-if="role == 'leader'">创建一起逛</div>
        <div class="dialog_title" v-else>进入一起逛</div> -->
        <!-- <div
          class="avatar-box"
          v-if="role == 'leader'"
          :style="`background-image:url(${avatar || defaultAvatar});`"
        >
          <input type="file" @change="changeFile($event)" accept=".jpg,.png" />
          <div class="tips">更换</div>
        </div> -->
        <div class="user_name">
          <input
            class="input_name"
            maxlength="15"
            v-model.trim="userName"
            type="text"
            :placeholder="t('base.nickNameRequired')"
          />
          <span class="limitNum">{{ userName.length }}/15</span>
        </div>
        <!-- <div v-if="role!='customer'" class="mode_btn">
          <div @click="chooseMode(i.mode)" v-for="i,index in modeList" :key="index" :class="{ active: mode==i.mode }" class="mode">{{i.title}}</div>
        </div> -->
        <div class="created_btn">
          <div class="created_cancel" @click="closeCreated">{{ t('base.cancel') }}</div>
          <div class="created_confirm" @click="createdConfirm">{{ t('base.confirm') }}</div>
        </div>
      </div>
    </div>
    <!-- <Cropper v-bind="option" v-if="showCrop" @close="closeCrop" @ok="confirmCrop" /> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, watchEffect } from 'vue';

  import Dialog from '/@/components/basic/dialog';
  import { useI18n } from '/@/hooks/useI18n';
  import { useSocket } from '/@/hooks/userSocket';
  // import { useRtcStore } from '/@/store/modules/rtc';
  // import browser from '/@/utils/browser';
  // import Cropper from '@/components/cropper/cropper.vue';
  // Cropper
  const emit = defineEmits(['closeDialog', 'confirmDialog']);
  const { t } = useI18n();
  const regex = new RegExp('^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,15}$');

  const userName = ref('');
  // const rtcStore = useRtcStore();
  const ifShow = ref(false);
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
  });
  watchEffect(() => {
    if (props.show) {
      ifShow.value = props.show;
    }
  });

  const closeCreated = () => {
    ifShow.value = false;
    const { closeSocket } = useSocket();
    emit('closeDialog');
    closeSocket();
  };
  const createdConfirm = () => {
    if (unref(userName).length === 0) {
      Dialog.toast({ content: t('base.nickNameRequired'), type: 'error' });
    } else {
      if (unref(userName)?.length && !regex.test(unref(userName))) {
        Dialog.toast({ content: t('base.nickNameRegrexError'), type: 'error' });
        return;
      }
      Dialog.toast({ content: t('base.saveSuccess'), type: 'success' });
      ifShow.value = false;
      emit('confirmDialog', unref(userName));
    }
  };
</script>

<style scoped lang="scss">
  #createdRoom {
    width: 100vw;
    height: 100%;
    // background: rgba(0, 0, 0, 0.5);
    background: transparent;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000000;
    // pointer-events: none;
    .created_dialog {
      width: 8.64rem;
      min-height: 5rem;
      // background: #ffffff;
      pointer-events: auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      // overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;

      .blurBox {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        filter: blur(1px);
      }
      .content {
        position: relative;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .avatar-box {
        width: 1.7067rem;
        height: 1.7067rem;
        margin: 0.56rem auto 0;
        border: 1px #fff solid;
        border-radius: 50%;
        // background-image: url('@/assets/images/avatar_default.jpg');
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          border: 1px #ed5d18 solid;
          .tips {
            color: #ed5d18;
          }
        }
        .tips {
          width: 100%;
          height: 0.5rem;
          position: absolute;
          background: rgba(0, 0, 0, 0.5);
          bottom: 0;
          left: 0;
          text-align: center;
          line-height: 0.5rem;
          font-size: 0.22rem;
        }
        input {
          width: 100%;
          height: 100%;
          opacity: 0;
          position: relative;
          z-index: 10;
          cursor: pointer;
        }
      }
      .dialog_title {
        font-size: 0.39rem;
        width: 100%;
        height: 1.39rem;
        padding: 0 0.56rem;
        box-sizing: border-box;
        font-size: 0.39rem;
        color: #fff;
        line-height: 1.39rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(255, 255, 255, 0.1);
      }
      .user_name {
        width: 100%;
        height: 1.11rem;
        padding: 0 0.56rem;
        box-sizing: border-box;
        font-size: 0.39rem;
        line-height: 1.11rem;
        margin: 0.56rem 0;
        position: relative;
        .limitNum {
          position: absolute;
          right: 0.64rem;
          top: 50%;
          transform: translateY(-50%);
          font-size: 0.33rem;
          color: #b9bdbc;
        }
        .input_name {
          font-size: 0.39rem;
          width: 100%;
          height: 100%;
          line-height: 1.11rem;
          padding: 0 1.066667rem 0 0.28rem;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          color: #fff;
          border: none;
          outline: none;
          &::placeholder {
            color: rgba(255, 255, 255, 0.3);
          }
        }
      }
      .mode_btn {
        width: 100%;
        height: 1.11rem;
        padding: 0 0.56rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.56rem;
        > div.mode {
          width: 3.61rem;
          height: 100%;
          border-radius: 0.65rem;
          border: 0.03rem solid #fff;
          color: #fff;
          font-size: 0.39rem;
          line-height: 1.11rem;
          text-align: center;
          box-sizing: border-box;
          &.active {
            color: #ed5d18;
            border: 0.03rem solid #ed5d18;
          }
        }
      }
      .created_btn {
        width: 100%;
        height: 1.36rem;
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: rgba(255, 255, 255, 0.1);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.39rem;
        > div {
          width: 50%;
          height: 1.36rem;
          text-align: center;
          line-height: 1.36rem;
          font-size: 0.39rem;
          box-sizing: border-box;
          &.created_cancel {
            color: #fff;
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: rgba(255, 255, 255, 0.1);
          }
          &.created_confirm {
            color: #ed5d18;
          }
        }
      }
    }
  }
</style>
