<template>
  <div>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      top="25vh"
      v-model="props.showTalkUsDialog"
      width="40%"
      center
      :title="$t(`shop.talkUs`)"
    >
      <div class="TalkUsDialog">
        <div class="TalkUsDialog-content">
          <!-- 电话 -->
          <div class="phoneBox">
            <img src="../assets/img/phone.png" alt="" />
            <div>+86 138 0013 8000</div>
          </div>
          <!-- 二维码 -->
          <div class="codeBox">
            <img src="../assets/img/code.png" alt="" />
            <div>{{ lanChange == "zh-cn" ? "微信" : "Wechat " }}</div>
          </div>
          <!-- 邮箱 -->
          <div class="EmailBox">
            <img src="../assets/img/Email.png" alt="" />
            <div class="sendEmail" @click="EmailDialog = true">
              {{ lanChange == "zh-cn" ? "发送邮件" : "Send Email" }}
            </div>
          </div>
        </div>
        <div class="close" @click="close">
          {{ $t(`public.close`) }}
        </div>
      </div>
    </el-dialog>

    <el-dialog
      top="30vh"
      v-model="EmailDialog"
      width="20%"
      center
      :title="$t(`shop.talkUs`)"
    >
      <div style="text-align: center">
        {{ lanChange == "zh-cn" ? "暂未开放,敬请期待" : "COMING SOON" }}
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus/es";
import { ref, reactive, watch } from "vue";
import { awsImgUpload, saveImgApi } from "../apis/createVideo";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const lanChange = ref(locale);

const emit = defineEmits(["updateShowTalkUsDialog"]);

const props = defineProps({
  showTalkUsDialog: {
    default: false,
    type: Boolean,
  },
});

function close() {
  emit("updateShowTalkUsDialog");
}
const EmailDialog = ref(false);
</script>
<style lang="scss" scoped>
:deep(.el-dialog__headerbtn) {
  display: none;
}

.TalkUsDialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  &-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    > div {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
        margin-bottom: 40px;
      }
    }
    .sendEmail {
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .close {
    margin-top: 50px;
    width: 100px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    border-radius: 15px;
    border: 2px solid #ccc;
    cursor: pointer;
  }
}
</style>
