<template>
  <div class="w100">
    <div class="w100 cp" @click.stop="onCallTelephone">
      <template v-if="$slots.default">
        <slot />
      </template>
      <template v-else>
        <!-- 非纯icon样式 -->
        <div
          class="call_out fcc"
          :class="{ 'call_out--opacity': isCalling }"
          v-if="styleType == 1"
        >
          <div class="pic_img" v-if="!isCalling">
            <WlPic :src="phone_white_icon" />
          </div>
          <div class="pic_img" 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
      v-model="outbandShow"
      :userInfo="userInfo"
      :mobiles="mobiles"
      :calleeInfo="calleeInfo"
      @onCall="onCall"
    />
    <!-- <CallOutDialog
      v-model="outbandDiaShow"
      :phone="mobiles[0]"
      :type="callType"
      :title="reasonTitle"
      getContainer="body"
    /> -->
  </div>
</template>

<script>
import CallOutSheet from './components/CallOutSheet.vue';
// import CallOutDialog from "./components/CallOutDialog.vue";
import { callTelephone } from '@packages/utils/index.js';
import Store from '@packages/store/index.js';
import {
  calling_icon,
  phone_icon,
  phone_white_icon,
} from '@packages/utils/cdn';
import WlPic from '@packages/components/Common/WlPic/src/index.vue';

export default {
  name: 'WlCallOut',
  components: {
    CallOutSheet,
    // CallOutDialog
    WlPic,
  },
  props: {
    /* 外呼号码 */
    mobiles: {
      type: Array,
      default: () => {
        return [];
      },
    },
    /* 外呼人信息 */
    calleeInfo: {
      type: Object,
      default: () => {
        return {
          // '为clue或qw'
          type: '',
          // type='clue'时必传clue_id和user_name，或直接传线索详情数据
          // type='customer'时必传id和avatar，或直接传企微好友详情external_common_info参数的数据
          info: {},
        };
      },
    },
    /* get_current_user数据 必传call_platform和business_flags参数 */
    userInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    /* 全局参数 */
    env_data: {
      type: Object,
      default: () => {
        return {
          sid: '',
          corp_id: '',
          node_env: '',
        };
      },
    },
    /* 按钮类型 */
    styleType: {
      type: [Number, String],
      default: 1,
    },
  },
  data() {
    return {
      outbandShow: false,
      // outbandDiaShow: false,
      // countObj: 0,
      // callType: 1,
      // reasonTitle: "",
      isCalling: false,
      calling_icon:  Object.freeze(calling_icon),
      phone_icon:  Object.freeze(phone_icon),
      phone_white_icon:  Object.freeze(phone_white_icon),
    };
  },
  watch: {
    // 全局参数配置
    env_data: {
      handler(val) {
        Store.sid = val.sid;
        Store.corp_id = val.corp_id;
        Store.node_env = val.node_env;
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 外呼
    async onCallTelephone() {
      if ((!this.mobiles && !Array.isArray(this.mobiles)) || this.isCalling) return;
      const isOutband = this.userInfo?.business_flags.some((e) => {
        if (e.flag_type == 2) return e.business_flag;
      });
      // 未开通外呼
      if (!isOutband && this.mobiles?.length <= 1) {
        callTelephone(this.mobiles?.length ? this.mobiles[0] : '');
        return;
      }
      // 已开通
      // const { data } = await Api.onTouchCallCount({
      //   caller: this.userInfo.mobile,
      //   callee: this.mobiles[0]
      // });
      // if (data?.month_count >= 5) {
      //   this.callType = isOpenInPc() ? 1 : 2;
      //   this.reasonTitle = "本月外呼该号码的次数已达上限<br/>请用手机拨打";
      //   this.outbandDiaShow = true;
      // } else if (data?.day_count >= 3) {
      //   this.callType = isOpenInPc() ? 1 : 2;
      //   this.reasonTitle = "今日外呼该号码的次数已达上限<br/>请用手机拨打";
      //   this.outbandDiaShow = true;
      // } else {
      //   this.countObj = data;
      //   this.outbandShow = true;
      // }
      this.outbandShow = true;
    },
    // 拨打中 产品需求固定5秒拨打状态
    onCall() {
      this.isCalling = true;
      this.$emit('onCalling', this.isCalling);
      setTimeout(() => {
        this.isCalling = false;
        this.$emit('onCalling', this.isCalling);
      }, 5000);
    },
  },
};
</script>

<style lang="scss" scoped>
.w100 {
  width: 100%;
}
.call_out {
  cursor: pointer;
  padding: 0 0.08rem;
  height: 0.38rem;
  background: #1c9fff;
  border-radius: 1rem;
  font-weight: 500;
  font-size: 0.15rem;
  color: #ffffff;
  .pic_img {
    width: j(20);
    height: j(20);
    margin-right: j(6);
  }
}
.call_out--opacity {
  opacity: 0.5;
}
.opt_img {
  cursor: pointer;
  width: j(38) !important;
  height: j(38) !important;
  vertical-align: middle;
}

.fcc {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.cp {
  cursor: pointer;
}
</style>
