<template>
  <div id="createdRoom" @click.stop>
    <div class="created_dialog">
      <div class="blurBox"></div>
      <div class="content">
        <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="20"
            v-model.trim="userName"
            type="text"
            :placeholder="role == 'leader' ? ' 请输入发起人昵称' : '请输入您的昵称'"
          />
          <span class="limitNum">{{ userName.length }}/20</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">取消</div>
          <div class="created_confirm" @click="createdConfirm">确认</div>
        </div>
      </div>
    </div>
    <Cropper v-bind="option" v-if="showCrop" @close="closeCrop" @ok="confirmCrop" />
  </div>
</template>

<script lang="ts">
  import Dialog from '/@/components/basic/dialog';
  import browser from '/@/utils/browser';
  import Cropper from '@/components/cropper/cropper.vue';
  export default {
    components: { Cropper },
    data() {
      return {
        role: browser.getURLParam('role') || 'leader',
        mode: browser.getURLParam('mode') || 2,
        modeList: [
          {
            mode: 1,
            title: '1V1',
          },
          {
            mode: 2,
            title: '多人模式',
          },
        ],
        store: useStore(),
        userName: '',
        roomId: browser.getURLParam('roomId'),
        showCrop: false,
        // base64: null,
        defaultAvatar: require('@/assets/images/avatar_default.png'),
        // avatar: null,
        option: {
          // img: 'https://4dkk.4dage.com/scene_edit_data/KK-t-SfG2Xcb8QX/user/thumb-1k.jpg?_=1661768330305',
          img: '',
        },
      };
    },
    computed: {
      avatar: function () {
        return this.$store.getters['rtc/avatar'];
      },
    },

    mounted() {},
    // created: {},
    // mounted:{},
    methods: {
      changeFile(e) {
        let file = e.target.files[0];

        let blob = window.URL.createObjectURL(file);
        console.log(blob);
        this.option.img = blob;
        this.openCrop();
        e.target.value = '';
      },
      confirmCrop(base64) {
        this.$store.commit('rtc/setAvatar', base64);
      },
      openCrop() {
        this.showCrop = true;
      },
      closeCrop() {
        this.showCrop = false;
      },
      getUrl(href, queryArr) {
        queryArr.forEach((item) => {
          if (!browser.hasURLParam(item.key)) {
            let ttt = href.split('index.html?');
            href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
          } else {
            href = browser.replaceQueryString(href, item.key, item.val);
          }
        });

        return href;
      },

      chooseMode(mode) {
        this.mode = mode;
      },
      closeCreated() {
        this.$emit('closeCreated');
      },
      createdConfirm() {
        if (this.userName == '') {
          Dialog.toast({ content: '请输入入您的昵称', type: 'error' });
          return;
        }
        let name = encodeURIComponent(this.userName);
        let hh = window.location.href;

        if (this.role == 'customer') {
          let tempUrl = this.getUrl(hh, [
            {
              key: 'mode',
              val: this.mode,
            },
            {
              key: 'name',
              val: name,
            },
            {
              key: 'role',
              val: 'customer',
            },
            {
              key: 'roomId',
              val: this.roomId,
            },
          ]);
          // history.replaceState(null, null, hh + "&mode=" + this.mode + "&name=" + name + "&role=customer&roomId=" + this.roomId);
          history.replaceState(null, null, tempUrl);
        } else {
          let tempUrl = this.getUrl(hh, [
            {
              key: 'mode',
              val: this.mode,
            },
            {
              key: 'name',
              val: name,
            },
            {
              key: 'role',
              val: 'leader',
            },
          ]);

          // history.replaceState(null, null,hh + "&mode=" + this.mode + "&name=" + name + "&role=leader");
          history.replaceState(null, null, tempUrl);
          console.log(tempUrl);
        }
        this.store.commit('rtc/setRole', this.role);

        this.$nextTick(() => {
          this.$emit('createdConfirm');
        });
      },
    },
  };
</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>
