<template>
  <div class="call-out-wrap" data-weiling-mobile-ui-bc-call-out>
    <div class="call-out" @click.stop="onCallTelephone">
      <template v-if="$slots.default">
        <slot />
      </template>
      <template v-else>
        <!-- 非纯icon样式 -->
        <div
          class="call-out-icon"
          :class="{ 'call-out-icon--opacity': isCalling }"
          v-if="styleType == 1"
        >
          <div class="pic-wrap" v-if="!isCalling">
            <WlPic :src="phone_white_icon" />
          </div>
          <div class="pic-wrap" v-else>
            <WlPic :src="calling_icon" />
          </div>
          <span>{{ isCalling ? "呼叫中..." : "打电话" }}</span>
        </div>
        <!-- 纯icon样式 -->
        <div class="opt_img" v-else>
          <WlPic round :src="phone_icon" />
        </div>
      </template>
    </div>
    <!-- 外呼弹窗 -->
    <CallOutSheet
      ref="CallOutSheetRef"
      v-bind="$attrs"
      v-model="outbandShow"
      :userInfo="userInfo"
      :mobiles="mobiles"
      :calleeInfo="calleeInfo"
      @onCalling="onCalling"
    />
  </div>
</template>

<script lang="ts">
/*
 * @Author: Lai.xianxu
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2024-05-15 10:50:17
 */
export default {
  name: "BCCallOut",
};
</script>

<script setup lang="ts">
import { ref } from "vue";
import Store from "@mobileUI/store";
import WlPic from "@mobileUI/components/WlPic";
import { callTelephone } from "@mobileUI/utils";
import CallOutSheet from "./components/CallOutSheet.vue";
import {
  calling_icon,
  phone_icon,
  phone_white_icon,
} from "@mobileUI/utils/cdn";

type Props = {
  env_data: TEnv.TEnvData;
  mobiles: string[]; //外呼号码
  calleeInfo?: any; //外呼人信息
  userInfo: any; //外呼人信息
  styleType: number; //按钮类型
};

const props = withDefaults(defineProps<Props>(), {
  env_data: () => {
    return {
      sid: "",
      token: "",
      domain: "",
      corp_id: "",
      card_resource: "",
      node_env: "dev",
      app_id: "",
    };
  },
  mobiles: null,
  calleeInfo: null,
  userInfo: null,
  styleType: 1,
});

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

Store.corp_id = props.env_data.corp_id;
Store.node_env = props.env_data.node_env;
Store.sid = props.env_data.sid;
Store.token = props.env_data.token;
Store.card_resource = props.env_data.card_resource;

const outbandShow = ref(false);
const isCalling = ref(false);

//外呼
const onCallTelephone = () => {
  if ((!props.mobiles && !Array.isArray(props.mobiles)) || isCalling.value)
    return;
  const isOutband = props.userInfo?.business_flags.some((e) => {
    if (e.flag_type == 2) return e.business_flag;
  });
  // 未开通外呼
  if (!isOutband && props.mobiles?.length <= 1) {
    callTelephone(props.mobiles?.length ? props.mobiles[0] : "");
    return;
  }
  outbandShow.value = true;
};
// 拨打中 产品需求固定5秒拨打状态
const onCalling = () => {
  isCalling.value = true;
  emit("onCalling", isCalling.value);
  setTimeout(() => {
    isCalling.value = false;
    emit("onCalling", isCalling.value);
  }, 5000);
};

// 直接拨打
const CallOutSheetRef = ref<any>(null);
const onCall = (phone: string | number) => {
  CallOutSheetRef.value?.onCall(phone);
};

defineExpose({
  onCallTelephone,
  onCall,
});
</script>

<style lang="scss">
.call-out-wrap[data-weiling-mobile-ui-bc-call-out] {
  width: 100%;
  font-size: j(14);

  .call-out {
    width: 100%;
    cursor: pointer;

    &-icon {
      cursor: pointer;
      padding: 0 0.08rem;
      height: 0.38rem;
      background: var(--wl-primary-color);
      border-radius: 1rem;
      font-weight: 500;
      font-size: 0.15rem;
      color: #ffffff;
      cursor: pointer;

      .pic-wrap {
        width: j(20);
        height: j(20);
        margin-right: j(6);
      }

      &--opacity {
        opacity: 0.5;
      }
    }
  }

  .opt_img {
    cursor: pointer;
    width: j(38) !important;
    height: j(38) !important;
    vertical-align: middle;
  }
}
</style>
