<template>
  <div class="call-out-sheet">
    <ActionSheet
      v-model:show="actionSheetVisible"
      cancel-text="取消"
      close-on-click-action
      teleport="body"
      @close="onClose"
    >
      <div class="fcc-c call-out-sheet-cell" v-if="mobiles && mobiles.length">
        <div v-if="mobiles.length > 1" class="fcc call-out-sheet-cell_text">
          选择您要呼叫的号码
        </div>
        <div
          class="fcc call-out-sheet-cell_phone"
          v-for="item in mobiles"
          :key="item"
          @click.stop="onCall(item)"
        >
          <div class="phone_icon">
            <WlPic :src="phone_green_icon" />
          </div>
          <span>呼叫</span>
          <span class="ml5">{{ item }}</span>
        </div>
      </div>
    </ActionSheet>
    <!-- 拨打提示 -->
    <CallOutTip
      v-model="callOutTipVisible"
      :userInfo="userInfo"
      :phone="currentPhone"
      :calleeInfo="calleeInfo"
    />
    <!-- 外呼类型弹窗 -->
    <CallOutDialog
      v-model="callOutDialogVisible"
      :phone="currentPhone"
      :type="callType"
      :title="reasonTitle"
      :message="reasonMessage"
      :icon="reasonIcon"
      :xw_info="xw_info"
    />
  </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-26 17:15:17
 */
export default {
  name: "CallOutSheet",
};
</script>

<script setup lang="ts">
import Api from "../api/index";
import { ref, watchEffect } from "vue";
import CallOutTip from "./CallOutTip.vue";
import WlPic from "@mobileUI/components/WlPic";
import CallOutDialog from "./CallOutDialog.vue";
import { callTelephone } from "@mobileUI/utils";
import { phone_green_icon } from "@mobileUI/utils/cdn";
import { ActionSheet } from "vant";
import { debounce } from "lodash-es";

/**
 * type模板映射 弹窗底部内容
 * 1：默认模板
 * 2：可拨打模板
 * 3: 联系小微模板
 */
type TModelType = 1 | 2 | 3;

type Props = {
  modelValue: boolean;
  mobiles: string[];
  calleeInfo?: any; // 被呼叫者信息
  userInfo: any; // 呼叫者信息
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  mobiles: null,
  calleeInfo: null,
  userInfo: null,
});

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

const xw_info = ref({});
const actionSheetVisible = ref(false);
const callOutTipVisible = ref(false);
const callOutDialogVisible = ref(false);
const callType = ref<TModelType>(1);
const reasonTitle = ref("");
const reasonIcon = ref("");
const reasonMessage = ref("");
const currentPhone = ref("");
const failMap = ref({
  11: "系统异常，请重试或联系小微",
  13: "呼叫失败，请重试或联系小微",
  17: "请在 8:00~12:00 或 13:30~20:00 拨打哦",
  18: "你的手机号无效，快去看看是否写错了",
  19: "被叫号码无效，换个手机号试试吧",
  20: "拨打次数用完啦，请联系小微",
  21: "打这个电话的人太多啦，换个试试吧~",
  22: "你的号码在运营商黑名单中<br>请联系运营商进一步了解",
  23: "该号码在运营商黑名单中<br>换个号码试试吧~",
  24: "账户余额不足",
  25: "账户异常，请联系小微",
  29: "请求超时，请重试或联系小微",
  30: "线路暂停，过会再试试吧",
  31: "你的手机号还没有加白，请联系小微~",
  99: "联系小微，咨询原因～",
});
const onClose = () => {
  emit("update:modelValue", false);
};

watchEffect(() => {
  actionSheetVisible.value = props.modelValue;
});

const onCall = debounce(async (phone: string) => {
  try {
    emit("onCall");
    actionSheetVisible.value = false;
    const isOutband = props.userInfo?.business_flags?.some((e) => {
      if (e.flag_type == 2) return e.business_flag;
    });
    // 未开通外呼
    if (!isOutband) {
      callTelephone(phone);
      return;
    }
    let type = 0;
    if (props.calleeInfo?.type == "customer") type = 2;
    if (props.calleeInfo?.type == "clue") type = 3;
    const related_id =
      props.calleeInfo?.type == "clue"
        ? props.calleeInfo?.info?.clue_id
        : props.calleeInfo?.info?.id;
    const { data } = await Api.onTouchCall({
      callee: phone,
      type,
      related_id,
    });
    if (data?.status_code == 10) {
      emit("onCalling");
      currentPhone.value = phone;
      // 成功  拨打提示
      callOutTipVisible.value = true;
      setTimeout(() => {
        callOutTipVisible.value = false;
      }, 5000);
    } else {
      failType(data?.status_code);
    }
  } catch (error) {
    console.log("wlCallOut error:", error);
  }
}, 500);

// 失败类型弹窗
const failType = async (code) => {
  callType.value = 1;
  reasonIcon.value = "clear";
  reasonTitle.value = "呼叫失败";
  reasonMessage.value = failMap.value[code] || "联系小微，咨询原因~";
  const notXwCodes = [17, 18, 19, 21, 22, 23, 30]; // 不需要展示小微二维码的code码
  if (!notXwCodes.includes(+code)) {
    const res = await Api.getXwCodeUrl({ name: "common_use" });
    xw_info.value["xw_code_url"] = encodeURI(res.data.replace(/\ufeff/g, "")); // 接口返回的数据可能有bom
  }
  callOutTipVisible.value = false;
  callOutDialogVisible.value = true;
};

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

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

    .phone_icon {
      width: j(18);
      height: j(18);
      color: #52cb65;
      margin: j(2) j(10) 0 0;
    }

    &_text {
      width: 100%;
      height: j(40);
      font-size: j(14);
      color: #999;
    }

    &_phone {
      width: 100%;
      height: j(40);
      cursor: pointer;

      &:hover,
      &:active {
        background: var(--wl-btn-dashed-bg);
      }
    }
  }
}

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

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

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

.ml5 {
  margin-left: j(5);
}
// }
</style>
