<template>
  <Popup
    v-model:show="visible"
    teleport="body"
    round
    :overlay-style="{ 'background-color': 'rgba(0,0,0,.4)' }"
  >
    <div class="xw-code-url">
      <div class="tips">{{ tip }}</div>
      <div class="code-text">长按扫码，添加小微为好友</div>
      <div class="code_url">
        <WlPic :src="url" />
      </div>
      <div class="xw-close" @click.stop="visible = false">
        <div class="wl-plc">
          <WlPic :src="xw_close" />
        </div>
      </div>
    </div>
  </Popup>
</template>

<script lang="ts">
export default {
  name: "XWCodeUrl",
};
</script>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { xw_close } from "@mobileUI/utils/cdn";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import { Popup } from "vant";

interface Props {
  modelValue: boolean;
  tip: string;
  url: string;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  tip: "是遇到什么问题了吗？",
  url: "",
});
const emit = defineEmits<{
  (e: "update:modelValue", val: boolean): void;
}>();
const visible = ref(false);
/* v-model */
watchEffect(() => {
  if (props.modelValue) visible.value = props.modelValue;
});
watchEffect(() => {
  if (!visible.value) emit("update:modelValue", visible.value);
});
</script>

<style lang="scss" scoped>
.xw-code-url {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: j(290);
  height: j(260);
  box-sizing: border-box;
  .tips {
    margin-top: j(30);
    font-weight: 500;
    font-size: j(15);
    line-height: j(28);
    text-align: center;
    color: #18191a;
  }
  .code-text {
    font-size: j(13);
    line-height: j(24);
    color: #616466;
  }
  .code_url {
    width: j(126);
    height: j(126);
    margin-top: j(24);
  }
  .xw-close {
    position: absolute;
    top: 0;
    right: 0;
    width: j(34);
    height: j(34);
    background: #eaeaea;
    border-bottom-left-radius: j(26);
    .wl-plc {
      width: j(16);
      height: j(16);
      margin: j(6) 0 0 j(12);
    }
  }
}
</style>
