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

      <div class="content">
        <div class="dialog_title">请输入房间密码</div>
        <div class="pass_container">
          <input v-model.trim="password" class="pass-input" type="password" maxlength="4" />
          <!-- <v-otp-input
            class="otp-input-container"
            ref="otpInput"
            input-classes="otp-input"
            separator="-"
            input-type="password"
            :num-inputs="4"
            :should-auto-focus="true"
            :is-input-num="true"
            :conditionalClass="['one', 'two', 'three', 'four']"
            :placeholder="['*', '*', '*', '*']"
            @on-change="handleOnChange"
            @on-complete="handleOnComplete"
          /> -->
        </div>

        <div class="created_btn">
          <div class="created_cancel" v-if="!isSingle" @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, watchEffect, computed, unref } from 'vue';
  import md5 from 'crypto-js/md5';
  import Dialog from '/@/components/basic/dialog';
  import { useI18n } from '/@/hooks/useI18n';
  import browser from '/@/utils/browser';
  import { useRoom } from '/@/hooks/useRoom';
  import { useRtcStore } from '/@/store/modules/rtc';

  const rtcStore = useRtcStore();
  const emit = defineEmits(['closeDialog', 'confirmDialog']);
  const { t } = useI18n();
  // const regex = new RegExp('^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,15}$');

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

  const closeCreated = () => {
    ifShow.value = false;
    emit('closeDialog');
  };
  const createdConfirm = async () => {
    const { validPassRoom, firstNum } = useRoom();
    if (unref(password).length > 0 && unref(password).length === 4) {
      const encyrptPassword = md5(unref(password)).toString();
      let rid = unref(roomId);
      if (!rid) {
        rid = browser.getURLParam('roomId');
      }
      const res = await validPassRoom(rid, encyrptPassword);
      if (res) {
        emit('confirmDialog');
        localStorage.setItem(`${rid}-${unref(firstNum)}`, '1');
      } else {
        Dialog.toast({ content: '请正确输入房间密码', type: 'error' });
      }
    }
  };
  // const handleOnChange = () => {};

  // const handleOnComplete = (value: string) => {
  //   console.log('OTP completed: ', value);
  //   password.value = value;
  // };
</script>

<style lang="scss">
  #opt-password {
    width: 100vw;
    height: 100%;
    // background: rgba(0, 0, 0, 0.5);
    background: transparent;
    overflow: hidden;
    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);
      }
      .pass_container {
        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;
        overflow: hidden;
        display: flex;
        .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;
          }
        }
      }
    }
    .otp-input-container {
      display: flex;
      width: 100%;
      flex-direction: row;
      > div {
        flex: 1;
      }
    }
    .otp-input {
      width: 100%;
      min-height: 60px;
      line-height: 60px;
      padding: 5px;
      margin: 0 10px;
      font-size: 22px;
      border-radius: 4px;
      background: rgba(46, 46, 46, 0.9);
      text-align: center;
      caret-color: #ed5d18;
      &::placeholder {
        font-size: 22px;
      }
    }
    /* Background colour of an input field with value */
    .otp-input.is-complete {
      // background-color: #f6eaea;
      background: rgba(46, 46, 46, 0.9);
    }
    .otp-input::-webkit-inner-spin-button,
    .otp-input::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .pass-input {
      font-size: 0.39rem;
      width: 100%;
      height: 100%;
      outline: none;
      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);
      }
    }
  }
</style>
<style lang="scss">
  html:focus-within {
    margin: 0 !important;
  }
</style>
