<template>
  <div class="app-container">
    <!-- ============================================================ -->
    <!-- 一键外呼组件 CallPhoneDialog 使用示例                           -->
    <!-- 文件名: sipCallPhoneDialogDemo.vue                             -->
    <!-- ============================================================ -->

    <el-card class="demo-card" shadow="hover">
      <div slot="header" class="demo-header">
        <span>一键外呼组件 (CallPhoneDialog) 使用示例</span>
      </div>

      <!-- 方式一：从表格数据中触发外呼（最常见的使用场景） -->
      <el-divider content-position="left">表格中点击外呼按钮</el-divider>
      <p class="desc">
        在客户列表/订单列表等页面中，每条记录通常都有一个 <code>phoneMk</code>（加密手机号）字段。
        点击"一键外呼"按钮时，将该加密手机号传入组件，弹窗内自动完成解密 → 连接IPCC → 注册JsSIP → 发起外呼。
      </p>
      <el-table :data="customerList" border stripe style="width: 100%">
        <el-table-column prop="id" label="客户ID" width="80" />
        <el-table-column prop="name" label="客户姓名" width="120" />
        <el-table-column prop="phoneMk" label="加密手机号" min-width="180" />
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-phone"
              @click="openCallDialog(scope.row)"
            >一键外呼</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <!-- ============================================================ -->
    <!-- 一键外呼弹窗组件                                                -->
    <!-- ============================================================ -->
    <call-phone-dialog
      :sip-visible.sync="callDialogVisible"
      :sip-encrypted-phone="currentEncryptedPhone"
      :sip-dial-type="currentDialType"
    />
  </div>
</template>

<script>
/**
 * ============================================================
 * 一键外呼组件 (CallPhoneDialog) 使用说明
 * ============================================================
 *
 * 【组件路径】 @/components/sipCall/sipCallPhoneDialog.vue
 * 【组件名称】 CallPhoneDialog
 *
 * 【Props 参数说明】（统一 sip 前缀）
 *   - sipVisible (Boolean, 必填)     : 控制弹窗显示/隐藏，支持 .sync → update:sipVisible
 *   - sipEncryptedPhone (String)     : 加密手机号（与明文二选一，优先加密）
 *   - sipPlainPhone (String)         : 明文手机号
 *   - sipDialType (String)           : 'audio' / 'video'，默认 audio
 *   - sipRecordId (String/Number)    : 业务关联 ID，挂断后经 sip-call-ended 回传
 *
 * 【Events 事件】
 *   - update:sipVisible : 弹窗关闭/打开时触发，配合 .sync
 *   - sip-call-ended    : 通话结束后触发，回传 sipRecordId
 *
 * 【工作流程】
 *   弹窗打开后：解析号码 → 选择线路 → 连接 IPCC → 注册 JsSIP → 发起外呼
 *   挂断后延迟同步话单，再自动关窗
 *
 * 【注意事项】
 *   1. 确保当前登录用户已绑定 SIP 分机
 *   2. 确保浏览器已授权麦克风权限
 *   3. 加密号场景需配置 VUE_APP_SIP_PHONE_ENCRYPT_PRIVATE_KEY
 *   4. 同一时间只能有一个外呼弹窗处于活跃状态
 * ============================================================
 */

// 导入一键外呼弹窗组件
import CallPhoneDialog from '@/components/sipCall/sipCallPhoneDialog.vue'

// 模拟获取客户列表的接口（实际项目中应使用真实的 API）
const mockFetchCustomerList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        rows: [
          {
            id: 1,
            name: '胡林',
            // ↓↓↓ 关键字段：加密手机号，从后端列表接口返回
            phoneMk: 'A-jajOXqaM9iGIjqPlptCuNw=='
          },
          {
            id: 2,
            name: '裴川江',
            // ↓↓↓ 关键字段：加密手机号，从后端列表接口返回
            phoneMk: 'A-OOY2v0R41pc44X+NrPnxmA=='
          }
        ]
      })
    }, 300)
  })
}

export default {
  name: 'SipCallPhoneDialogDemo',

  components: {
    CallPhoneDialog
  },

  data() {
    return {
      // ========== 外呼弹窗控制 ==========
      callDialogVisible: false,
      currentEncryptedPhone: '',
      currentDialType: 'audio',

      // ========== 演示数据 ==========
      customerList: [],
      manualEncryptedPhone: ''
    }
  },

  created() {
    this.fetchCustomerList()
  },

  methods: {
    /**
     * ============================================================
     * 核心方法：打开外呼弹窗
     * ============================================================
     *
     * 【使用步骤】
     * 1. 从列表数据中获取加密手机号（如 row.phoneMk）
     * 2. 设置 currentEncryptedPhone → 绑定到 sip-encrypted-phone
     * 3. 设置 callDialogVisible = true（绑定 sip-visible.sync），弹窗即会自动完成后续流程
     *
     * 【关键点】
     * - sipEncryptedPhone 必须是后端返回的加密值，不能是明文手机号（明文请用 sip-plain-phone）
     * - 组件内部会自动解密、选线路、连接 IPCC、注册 JsSIP、发起外呼
     */

    // 场景一：从表格行数据打开外呼弹窗
    openCallDialog(row) {
      if (!row.phoneMk) {
        this.$message.warning('该客户没有加密手机号，无法发起外呼')
        return
      }
      // 1. 设置加密手机号
      this.currentEncryptedPhone = row.phoneMk
      // 2. 设置外呼类型（可选，默认 audio）
      this.currentDialType = 'audio'
      // 3. 打开弹窗（组件内部自动完成所有流程）
      this.callDialogVisible = true
    },

    /**
     * ============================================================
     * 模拟获取客户列表（包含加密手机号）
     * ============================================================
     *
     * 实际项目中，加密手机号通常来自以下接口：
     * - 客户列表接口，字段名 phoneMk
     * - 订单列表接口，字段名 phoneMk / userPhoneMk
     * - 沟通记录列表接口，字段名 phoneMk
     *
     * 接口示例：
     *   GET /company/storeUser/list      → rows[].phoneMk
     *   GET /company/storeOrder/list     → rows[].userPhoneMk
     *   GET /company/aiSipCall/outboundCdr/list → rows[].phoneNum (加密)
     */
    fetchCustomerList() {
      mockFetchCustomerList().then((res) => {
        if (res.code === 200) {
          this.customerList = res.rows
        }
      })
    }
  }
}
</script>

<style scoped>
.demo-card {
  margin: 20px;
}

.demo-header {
  font-size: 16px;
  font-weight: 600;
}

.desc {
  color: #666;
  font-size: 13px;
  line-height: 1.8;
  margin: 8px 0;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.desc code {
  background: #e6effb;
  color: #409eff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.el-divider {
  margin: 24px 0 16px 0;
}
</style>
