<template>
  <div class="outband">
    <Dialog
      v-model:show="dialogVisible"
      :show-cancel-button="isShowCancel"
      :confirm-button-text="confirmButtonText"
      :confirm-button-color="confirmButtonColor"
      width="310"
      teleport="body"
      @confirm="onConfirm"
      @close="onClose"
    >
      <div class="fcc-c outband-dialog">
        <div class="fss outband-dialog-content">
          <Icon
            :name="icon"
            class="outband-dialog-content_icon"
            :class="
              icon == 'clear' ? 'outband-dialog-content_icon--FF2B2D' : ''
            "
          />
          <span v-html="title"></span>
        </div>
        <span
          v-if="message"
          class="outband-dialog_message"
          v-html="message"
        ></span>
        <div
          class="mess_img"
          v-if="xw_info.xw_code_url && !xw_info.friend_flag"
        >
          <WlPic :src="xw_info.xw_code_url" />
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script lang="ts">
/*
 * @Author: Lai.xianxu
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-10-25 16:03:11
 */
export default {
  name: "CallOutDialog",
};
</script>

<script setup lang="ts">
import { Dialog, Icon } from "vant";
import { ref, watchEffect } from "vue";
import { callTelephone } from "@mobileUI/utils";
import WlPic from "@mobileUI/components/WlPic";
/**
 * type模板映射 弹窗底部内容
 * 1：默认模板
 * 2：可拨打模板
 * 3: 联系小微模板
 */
type TModelType = 1 | 2 | 3;

type Props = {
  modelValue: boolean;
  phone?: string;
  type: TModelType;
  title: string;
  icon: string;
  message: string;
  xw_info: any;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  phone: null,
  type: 1,
  title: "",
  icon: "warning",
  message: "",
  xw_info: null,
});

const emit = defineEmits<{
  (e: "update:modelValue", val: boolean);
  (e: "onCall");
}>();

const dialogVisible = ref(false);
const isShowCancel = ref(false);
const confirmButtonColor = ref("#5B5B5B");
const confirmButtonText = ref("我知道啦");

watchEffect(() => {
  switch (props.type) {
    // 默认模板
    case 1:
      break;
    // 可拨打模板
    case 2:
      isShowCancel.value = true;
      confirmButtonColor.value = "var(--wl-primary-color)";
      confirmButtonText.value = "去拨打";
      break;
    // 联系小微模板 暂不支持
    case 3:
      isShowCancel.value = true;
      confirmButtonColor.value = "var(--wl-primary-color)";
      confirmButtonText.value = "联系小微";
      break;
    default:
      console.error("外呼呼叫弹窗type检查错误");
      break;
  }
  dialogVisible.value = props.modelValue;
});

const onConfirm = () => {
  // 去拨打
  if (props.type == 2) {
    callTelephone(props.phone);
  }
  dialogVisible.value = false;
};

const onClose = () => {
  emit("update:modelValue", false);
};
</script>

<style lang="scss">
// .call-out-wrap[data-weiling-mobile-ui-bc-call-out] {
.outband {
  &-dialog {
    width: 100%;
    min-height: j(96);
    background-color: #fff;
    padding: j(30) 0;

    &-content {
      padding: 0 j(24);

      &_icon {
        color: #f5a300;
        margin: j(2) j(6) 0 0;
        font-size: j(18);

        &--FF2B2D {
          color: #ff2b2d;
        }
      }

      span {
        font-weight: 600;
        color: #000;
        line-height: j(24);
      }
    }

    &_message {
      margin-top: j(24);
      font-weight: 400;
      font-size: j(14);
      padding: 0 j(24);
      text-align: center;
    }

    .mess_img {
      width: j(114);
      height: j(114);
      border-radius: j(6);
      margin-top: j(24);
      overflow: hidden;
    }
  }
}

.fcc {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.fcc-c {
  @extend .fcc;
  flex-direction: column;
}

.fss {
  display: flex !important;
  justify-content: flex-start;
  align-items: flex-start;
}
// }
</style>
