<!-- ChatItem.vue -->
<template>
  <div :class="['init-card']">
    <div
        v-if="props.visible"
        class="init-card_bg"
    >
      <img
          class="avatar"
          src="../../../src/assets/avatar.png"
      >
      <div
          class="loading"
      >
        <img
            src="../../../src/assets/animation/loading.gif"
        >
        <span>正在接通…</span>
      </div>
    </div>
    <div
        v-else
        :class="['init-card_module',step===1? 'step_module_1':'',step===2? 'step_module_2':'']"
    >
      <template
          v-if="step===1"
      >
        <div
            class="step_1"
            @click="nextStep"
        >
          <div class="text">
            点击“相机”拍摄馆内的展品，向导游瑶瑶了解它们的历史和故事哦~
          </div>
          <div class="step_btn">
            继续
            <img src="../../../src/assets/step_btn.png">
          </div>
          <img
              class="pointer"
              src="../../../src/assets/pointer.png"
          >
        </div>
      </template>
      <template
          v-if="step===2"
      >
        <div
            class="step_2"
            @click="nextStep"
        >
          <div class="text">
            点击“语音”向导游瑶瑶提出你的问题，等待她的回答哦~
          </div>
          <div class="step_btn">
            结束
            <img src="../../../src/assets/step_btn.png">
          </div>
          <img
              class="pointer"
              src="../../../src/assets/pointer.png"
          >
        </div>
      </template>
    </div>

    <template
        v-if="!props.visible"
    >
      <div class="digital_human_video">
        <div class="digital_human_video_bg" />
        <img src="../../../src/assets/digital_humans.png">
      </div>
      <div
          class="bottom_btn_area"
      >
        <div class="keyboard">
          <img
              src="../../../src/assets/keyboard_unselected.png"
          >
        </div>
        <div class="taking_pictures">
          <img
              src="../../../src/assets/taking_pictures.png"
          >
        </div>
        <div class="voice">
          <img
              src="../../../src/assets/voice_unselected.png"
          >
        </div>
      </div>
    </template>
    <!--    :maskStyle=""-->
    <!--    :centered="true"-->
    <a-modal
        v-model:open="open"
        :closable="false"
        wrap-class-name="init-modal"
        :mask-style="{
        background: '#000000B2'
      }"
        :body-style="{
        color:'#111111',
        fontSize: '18px',
        fontWeight:500,
        padding: '0 50px',
        textAlign:'center',
      }"
        :mask-closable="false"
        :confirm-loading="confirmLoading"
    >
      <p>{{ modalText }}</p>
      <template #title />
      <template #footer>
        <div
            style="
        width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;"
        >
          <a-button
              key="back"
              class="cancel_btn"
              @click="handleCancel"
          >
            不允许
          </a-button>
          <a-button
              key="submit"
              class="submit_btn"
              type="primary"
              :loading="confirmLoading"
              @click="handleOk"
          >
            允许
          </a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { toRefs, defineEmits, ref, watch, watchEffect, unref, defineExpose } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    required: false
  },
  introduced: {
    type: Boolean,
    required: false
  }
})
// 使用 defineEmits 定义事件
const emit = defineEmits([ 'init', 'end' ])

const modalText = ref('是否允许“导游瑶瑶”访问麦克风？')
const open = ref(false)
const confirmLoading = ref(false)
const introductionBegins = ref(false)
const step = ref(1)

const showModal = () => {
  open.value = true
}

// 监听 visible 的变化
watch(() => props.visible, (newVal, oldVal) => {
  console.log(`visible 从 ${oldVal} 变为 ${newVal}`)
})

// 监听 introduced 的变化
watch(() => props.introduced, (newVal, oldVal) => {
  console.log(`introduced 从 ${oldVal} 变为 ${newVal}`)
  if (props?.introduced) {
    introductionBegins.value = true
  }
})

watchEffect(()=>{
  console.log(`visible 为 ${props.visible}`)
  props.visible && showModal()
})

const handleOk = () => {
  confirmLoading.value = true
  emit('init')
}

const handleCancel = () => {
  open.value = false
  confirmLoading.value = false
}

function nextStep() {
  if (unref(step) === 1){
    step.value = unref(step) + 1
  } else {
    emit('end')
  }
}

defineExpose({
  handleCancel
})
</script>

<style lang="less">
.init-card {
  width: 100%;
  height: 100%;
  //background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;           /* 使用 flex 布局 */
  justify-content: center; /* 居中视频 */
  align-items: center;     /* 垂直居中 */
  z-index: 997;
  .bottom_btn_area {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 85%;
    width: calc(100% - 60px);
    left: 30px;

    .keyboard {
      width: 84.76px;
      height: 58px;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .taking_pictures {
      width: 102.3px;
      height: 70px;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .voice {
      width: 84.76px;
      height: 58px;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
  }

  .digital_human_video {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    display: flex;           /* 使用 flex 布局 */
    justify-content: center; /* 居中视频 */
    align-items: center;     /* 垂直居中 */

    &_bg {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('../../assets/home_bg.png') no-repeat;
      background-size: 100% 210px;
      background-position: bottom center;
      bottom: 0;
      left: 0;
    }

    img {
      width: 100%;
      height: calc(100% - 50px);
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .step_module_1 {
    mask-image: radial-gradient(circle 50px at 50% 89%, transparent 58px, black 58px);
  }

  .step_module_2 {
    mask-image: radial-gradient(circle 50px at 80% 89%, transparent 50px, black 50px);
  }

  &_module {
    position: relative;
    background: #000000B2;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    display: flex;           /* 使用 flex 布局 */
    justify-content: center; /* 居中视频 */
    align-items: center;     /* 垂直居中 */
    z-index: 99;

    .step_1, .step_2 {
      width: 290px;
      height: 200px;
      background: url('../../assets/step_bg.png') no-repeat;
      background-size: 100%;
      background-position: bottom center;
      position: absolute;
      bottom: 240px;
      padding: 40px 20px 20px 20px;
      box-sizing: border-box;
      .text {
        margin-top: 20px;
        color: #000000;
        font-size: 17px;
        font-weight: 400;
        text-align: left;
      }
      .step_btn {
        position: absolute;
        bottom: 20px;
        right: 20px;
        display: flex;
        justify-content: right;
        align-items: center;
        color: #096355;
        font-size: 18px;
        font-weight: 500;
        img {
          width: 16px;
          height: 10px;
          margin-left: 10px;
        }
      }
    }

    .step_1 {
      .pointer {
        position: absolute;
        bottom: -60px;
        width: 6px;
        height: 43px;
      }
    }

    .step_2 {
      .pointer {
        position: absolute;
        bottom: -60px;
        right: 40px;
        width: 6px;
        height: 43px;
        transform: rotate(-15deg);
      }
    }

  }

  &_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../../assets/init_bg.png') no-repeat;
    background-size: cover;
    background-position: bottom center;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar {
      position: absolute;
      top: 188px;
      width: 150px;
      height: 150px;
    }

    .loading {
      position: absolute;
      bottom: 130px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        width: 160px;
        height: 120px;
      }
      span {
        color: #426B65;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
}
.cancel_btn ,.submit_btn {
  width: calc(50% - 10px);
  height: 40px !important;
}
.cancel_btn {
  border: 1px solid #36C9B1 !important;
  color: #36C9B1 !important;
}

.submit_btn {
  background: #36C9B1 !important;
}
.init-modal {
  :deep(.ant-modal .ant-modal-content) {
    color: #111111 !important;
    font-size: 18px !important;
  }
}
</style>
