<template>
  <!-- SIP执行计划 -->
  <div class="app-container">
    <!-- 执行时间说明 -->
    <el-alert
      title="执行时间说明"
      type="info"
      :closable="false"
      style="margin-bottom: 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);"
    >
      <div style="font-size: 13px; line-height: 1.8; color: #606266;">
        <p style="margin: 0; padding-left: 8px;">
          <i class="el-icon-time" style="color: #409EFF; margin-right: 5px;"></i>
          规则执行时间为每个小时的 <strong style="color: #409EFF;">0分、20分、40分</strong>
        </p>
        <p style="margin: 8px 0 0 0; padding-left: 8px;">
          <i class="el-icon-example" style="color: #67C23A; margin-right: 5px;"></i>
          例如：预计外呼时间为 <code style="background-color: #f4f4f5; padding: 2px 6px; border-radius: 3px; color: #E6A23C; font-size: 12px;">2026-01-01 10:00:00</code>
          ，实际执行时间则为 <code style="background-color: #f4f4f5; padding: 2px 6px; border-radius: 3px; color: #E6A23C; font-size: 12px;">2026-01-01 10:20:00</code>
        </p>
        <p style="margin: 8px 0 0 0; padding-left: 8px; color: #909399; font-size: 12px;">
          <i class="el-icon-warning-outline" style="margin-right: 5px;"></i>
          因任务多可能存在一定延时，一般不超过下一次执行时间
        </p>
      </div>
    </el-alert>

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="营期ID" prop="sopUserLogsId">
        <el-input
          v-model="queryParams.sopUserLogsId"
          placeholder="请输入营期ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="外呼任务" prop="status">
        <el-select v-model="queryParams.sipBatchId" placeholder="请选择外呼任务" clearable size="small">
          <el-option
            v-for="template in aiSipCallTaskList"
            :key="template.batchId"
            :label="template.batchName"
            :value="template.batchId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="执行状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择执行状态" clearable size="small">
          <el-option
            v-for="dict in sipTaskStatusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-row :gutter="10" class="mb8">-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="warning"-->
    <!--          plain-->
    <!--          icon="el-icon-download"-->
    <!--          size="mini"-->
    <!--          :loading="exportLoading"-->
    <!--          @click="handleExport"-->
    <!--        >导出</el-button>-->
    <!--      </el-col>-->
    <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    <!--    </el-row>-->

    <el-table v-loading="loading" :data="sipTaskList">
      <el-table-column label="ID" align="center" prop="id" width="80"/>
      <!--      <el-table-column label="sopId" align="center" prop="sopId" width="120"/>-->
      <el-table-column label="营期ID" align="center" prop="sopUserLogsId" width="120"/>
      <el-table-column label="课程配置" align="center" prop="contentJson" >
        <template slot-scope="scope">
          <el-button type="text" @click="showContentDialog(scope.row)">
            查看配置
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="企微员工账号" align="center" prop="qwUserid" width="100"/>
      <el-table-column label="企微员工名称" align="center" prop="qwUserName" width="100"/>
      <el-table-column label="外呼任务" align="center" prop="sipBatchName" width="120"/>
      <el-table-column label="预计外呼时间" align="center" prop="sendTime" width="180"/>
      <el-table-column label="任务来源" align="center" prop="taskSource" width="120">
        <template slot-scope="scope">
          <dict-tag :options="taskSourceOptions" :value="scope.row.taskSource + ''"/>
        </template>
      </el-table-column>
      <el-table-column label="执行状态" align="center" prop="status" width="120">
        <template slot-scope="scope">
          <dict-tag :options="sipTaskStatusOptions" :value="scope.row.status + ''"/>
        </template>
      </el-table-column>
      <el-table-column label="失败原因" align="center" prop="failReason" min-width="180"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == 3"
            size="mini"
            type="text"
            icon="el-icon-view"
            v-hasPermi="['company:aiSipCall:phone:hisSopList']"
            @click="handleViewDetail(scope.row)"
          >执行详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 暂无数据提示 -->
    <el-empty
      v-if="!loading && sipTaskList.length === 0"
      description="暂无数据"
      :image-size="200"
    ></el-empty>

    <!-- 查看详情对话框 -->
    <el-dialog
      title="执行详情"
      :visible.sync="detailDialog.visible"
      width="1600px"
      :close-on-click-modal="false"
      append-to-body
      custom-class="detail-dialog"
    >
      <!-- 数据同步说明 -->
      <el-collapse v-model="syncInfoExpanded" class="sync-collapse">
        <el-collapse-item name="sync">
          <template slot="title">
            <div class="sync-header">
              <i class="el-icon-info" style="color: #E6A23C; margin-right: 8px;"></i>
              <span class="sync-title">数据同步说明</span>
              <span class="sync-summary">存在延时 · 三重同步机制保障</span>
              <el-button type="text" size="mini" class="view-detail-btn">
                <i class="el-icon-arrow-down"></i> 点击查看详细说明
              </el-button>
            </div>
          </template>
          <div class="sync-detail-content">
            <el-row :gutter="16">
              <!-- 左侧：延时原因 -->
              <el-col :span="10">
                <div class="sync-card">
                  <div class="sync-card-header warning">
                    <i class="el-icon-warning-outline"></i>
                    <span>延时原因</span>
                  </div>
                  <ul class="compact-list">
                    <li>拨号队列排队中</li>
                    <li>外呼任务并发量过低</li>
                    <li>外呼平台异常</li>
                  </ul>
                </div>
              </el-col>

              <!-- 右侧：同步规则 -->
              <el-col :span="14">
                <div class="sync-card">
                  <div class="sync-card-header info">
                    <i class="el-icon-refresh"></i>
                    <span>三重同步机制</span>
                  </div>

                  <!-- 实时同步 -->
                  <div class="rule-detail-item">
                    <div class="rule-header">
                      <el-tag size="mini" type="success" effect="dark">实时</el-tag>
                      <span class="rule-desc">每分钟同步 <code>T-4分钟</code> 至 <code>T-3分钟</code> 的1分钟数据</span>
                    </div>
                    <div class="rule-example">
                      <i class="el-icon-time"></i>
                      示例：当前时间 <strong>08:00:00</strong> → 同步 <code>07:56:00 ~ 07:57:00</code> 的数据
                    </div>
                  </div>

                  <!-- 小时同步 -->
                  <div class="rule-detail-item">
                    <div class="rule-header">
                      <el-tag size="mini" effect="dark">小时</el-tag>
                      <span class="rule-desc">每小时整点同步 <code>T-2小时</code> 的1小时数据</span>
                    </div>
                    <div class="rule-example">
                      <i class="el-icon-time"></i>
                      示例：当前时间 <strong>08:00:00</strong> → 同步 <code>06:00:00 ~ 07:00:00</code> 的数据
                    </div>
                  </div>

                  <!-- 每日同步 -->
                  <div class="rule-detail-item">
                    <div class="rule-header">
                      <el-tag size="mini" type="warning" effect="dark">每日</el-tag>
                      <span class="rule-desc">每天凌晨4点同步前一天的全天数据</span>
                    </div>
                    <div class="rule-example">
                      <i class="el-icon-time"></i>
                      示例：当前时间 <strong>01-02 04:00:00</strong> → 同步 <code>01-01 00:00:00 ~ 23:59:59</code> 的数据
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>

      <el-form :model="detailDialog.queryParams" ref="detailQueryForm" :inline="true" label-width="100px" style="margin-bottom: 15px;">
        <el-form-item label="UUID" prop="uuid">
          <el-input
            v-model="detailDialog.queryParams.uuid"
            placeholder="请输入UUID"
            clearable
            size="small"
            @keyup.enter.native="handleDetailQuery"
          />
        </el-form-item>
        <el-form-item label="客户昵称" prop="externalUserName">
          <el-input
            v-model="detailDialog.queryParams.externalUserName"
            placeholder="请输入客户昵称"
            clearable
            size="small"
            @keyup.enter.native="handleDetailQuery"
          />
        </el-form-item>
        <el-form-item label="外呼结果" prop="callstatus">
          <el-select v-model="detailDialog.queryParams.callstatus" placeholder="请选择外呼结果" clearable size="small">
            <el-option
              v-for="item in callStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户意向" prop="intent">
          <el-input
            v-model="detailDialog.queryParams.intent"
            placeholder="请输入客户意向"
            clearable
            size="small"
            @keyup.enter.native="handleDetailQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDetailQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetDetailQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="detailDialog.loading"
        :data="detailDialog.list"
        border
        size="small"
        max-height="500"
        :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: 'bold'}"
      >
        <el-table-column label="ID" align="center" prop="id" width="160" />
<!--        <el-table-column label="UUID" align="center" prop="uuid" min-width="180" show-overflow-tooltip/>-->
        <el-table-column label="客户昵称" align="center" prop="externalUserName" min-width="120" show-overflow-tooltip/>
        <el-table-column label="预计外呼时间" align="center" prop="sendTime" width="180" />
        <el-table-column label="实际外呼时间" align="center" prop="calloutTimeStr" width="180" />
        <el-table-column label="外呼结果" align="center" prop="callstatusName" min-width="150">
          <template slot-scope="scope">
            <el-tag
              :type="getCallStatusType(scope.row.callstatus)"
              size="small"
            >
              {{ scope.row.callstatusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="客户意向" align="center" prop="intent" min-width="60" show-overflow-tooltip/>
        <el-table-column label="挂机原因" align="center" prop="hangupCause" min-width="180" show-overflow-tooltip/>
        <el-table-column label="创建时间" align="center" prop="createtimeStr" width="180" />
      </el-table>
      <pagination
        v-show="detailDialog.total > 0"
        :total="detailDialog.total"
        :page.sync="detailDialog.queryParams.pageNum"
        :limit.sync="detailDialog.queryParams.pageSize"
        @pagination="getDetailList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialog.visible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 查看课程详情对话框 -->
    <el-dialog :visible.sync="contentDialog.isDialogVisible" title="课程详情" width="560px" append-to-body :close-on-click-modal="false">
      <div v-loading="contentDialog.loading" style="max-height: 65vh; overflow-y: auto; overflow-x: hidden; padding-right: 8px; box-sizing: border-box;">
        <!-- 内容类型标题 -->
        <div v-if="contentDialog.contentType === '9'"
             style="padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; margin-bottom: 10px; text-align: center; font-size: 13px; color: #606266; word-wrap: break-word;">
          <i class="el-icon-mobile-phone" style="margin-right: 5px;"></i>APP发课
        </div>

        <!-- 课程信息 -->
        <el-card class="box-card" v-if="contentDialog.courseInfo" style="margin-bottom: 10px;">
          <div slot="header" class="clearfix" style="padding: 8px 15px; line-height: 1.2;">
            <span style="font-weight: 600; font-size: 13px;">课程信息</span>
          </div>
          <div style="padding: 8px 15px;">
            <!-- 课程封面居中显示 -->
            <div v-if="contentDialog.courseInfo.imgUrl" style="text-align: center; margin-bottom: 10px;">
              <img :src="contentDialog.courseInfo.imgUrl" alt=""
                   @click="openImageViewer(contentDialog.courseInfo.imgUrl)"
                   style="width: 200px; height: 150px; cursor: pointer; border-radius: 6px; border: 1px solid #e4e7ed; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"/>
            </div>
            <!-- 课程信息字段 -->
            <div style="overflow: hidden; margin-bottom: 6px; line-height: 1.5;">
              <span style="color: #909399; font-size: 13px; float: left; width: 70px;">课程ID:</span>
              <div style="margin-left: 70px; font-size: 13px; word-break: break-all;">{{ contentDialog.courseInfo.courseId || '-' }}</div>
            </div>
            <div style="overflow: hidden; line-height: 1.5;">
              <span style="color: #909399; font-size: 13px; float: left; width: 70px;">课程名称:</span>
              <div style="margin-left: 70px; font-size: 13px; word-break: break-all;">{{ contentDialog.courseInfo.courseName || '-' }}</div>
            </div>
          </div>
        </el-card>

        <!-- 课程小节信息 -->
        <el-card class="box-card" v-if="contentDialog.videoInfo" style="margin-bottom: 10px;">
          <div slot="header" class="clearfix" style="padding: 8px 15px; line-height: 1.2;">
            <span style="font-weight: 600; font-size: 13px;">课程小节信息</span>
          </div>
          <div style="padding: 8px 15px;">
            <div style="overflow: hidden; margin-bottom: 6px; line-height: 1.5;">
              <span style="color: #909399; font-size: 13px; float: left; width: 70px;">小节ID:</span>
              <div style="margin-left: 70px; font-size: 13px; word-break: break-all;">{{ contentDialog.videoInfo.videoId || '-' }}</div>
            </div>
            <div style="overflow: hidden; line-height: 1.5;">
              <span style="color: #909399; font-size: 13px; float: left; width: 70px;">小节名称:</span>
              <div style="margin-left: 70px; font-size: 13px; word-break: break-all;">{{ contentDialog.videoInfo.title || '-' }}</div>
            </div>
          </div>
        </el-card>

        <!-- 消息类型 -->
        <div v-if="contentDialog.messageType !== null && contentDialog.messageType !== undefined"
             style="padding: 10px 15px; border: 1px solid #dcdfe6; border-radius: 4px; margin-bottom: 10px; display: flex; align-items: center; background-color: #f5f7fa;">
          <span style="color: #606266; font-size: 13px; font-weight: 600; margin-right: 10px; white-space: nowrap;">消息类型:</span>
          <el-tag :type="getMessageTypeTag(contentDialog.messageType)" size="small">
            {{ getMessageTypeName(contentDialog.messageType) }}
          </el-tag>
        </div>

        <!-- 无数据提示 -->
        <div v-if="!contentDialog.courseInfo && !contentDialog.videoInfo && contentDialog.contentType !== '9' && !contentDialog.loading" style="text-align: center; padding: 25px; color: #999;">
          <i class="el-icon-info" style="font-size: 36px;"></i>
          <p style="margin-top: 6px; font-size: 13px;">暂无课程或视频信息</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" style="padding: 10px 20px;">
        <el-button @click="contentDialog.isDialogVisible = false" size="small">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getUserCourse} from "@/api/course/userCourse";
import {getUserCourseVideo} from "@/api/course/userCourseVideo";
import { listAiSipCallTask } from '@/api/aiSipCall/aiSipCallTask'
import { companySopList } from '@/api/aiSipCall/aiSipCallPhone'
import {getSopSipTask} from "@/api/qw/sopLogs";

export default {
  name: "SipTaskDetails",
  props:{
    rowDetailFrom:{},
  },

  watch:{
    rowDetailFrom:{
      handler(newVal){
        // 当formData变化时重新查询
        this.getList(newVal);
      },
      deep: true
    }
  },
  data() {
    return {
      // 数据同步说明折叠状态
      syncInfoExpanded: [],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // SIP任务表格数据
      sipTaskList: [],

      // 任务状态字典
      sipTaskStatusOptions: [],
      // 处理状态字典
      handleStatusOptions: [],
      // 任务来源字典
      taskSourceOptions: [],
      // AI通话任务列表
      aiSipCallTaskList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sopUserLogsId: null,
        appCustomerId: null,
        status: null,
      },
      // 外呼结果选项
      callStatusOptions: [
        { value: 0, label: '待呼叫/未接听' },
        { value: 1, label: '已进入呼叫队列' },
        { value: 2, label: '正在拨号' },
        { value: 3, label: '未接通（如果关闭空号检测）' },
        { value: 4, label: '已接通' },
        { value: 5, label: '通话中断' },
        { value: 6, label: '成功转人工或AI' },
        { value: 7, label: '线路故障' },
        { value: 30, label: '未接通' },
        { value: 31, label: '客户正在通话中' },
        { value: 32, label: '关机' },
        { value: 33, label: '空号' },
        { value: 34, label: '无人接听' },
        { value: 35, label: '停机' },
        { value: 36, label: '网络忙' },
        { value: 37, label: '语音助手' },
        { value: 38, label: '暂时无法接通' },
        { value: 39, label: '呼叫限制' }
      ],
      // 详情对话框
      detailDialog: {
        visible: false,
        loading: false,
        data: {},
        list: [],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          sipTaskId: null,
          status: 0,
          executeType: '0',
          externalUserName: null,
          intent: null,
          uuid: null,
          callstatus: null,
        }
      },
      contentDialog:{
        isDialogVisible:false,
        json: [],
        videoId:null,
        courseId:null,
        contentType: null,
        messageType: null,
        courseInfo: null,
        videoInfo: null,
        loading: false,
        currentRow: {},
      },
    };
  },
  created() {
    this.getList(this.rowDetailFrom);

    // 获取任务状态字典（如果不存在则使用默认值）
    this.sipTaskStatusOptions = [
      { dictValue: '1', dictLabel: '待执行' },
      { dictValue: '2', dictLabel: '执行中' },
      { dictValue: '3', dictLabel: '执行成功' },
      { dictValue: '4', dictLabel: '执行失败' },
      { dictValue: '5', dictLabel: '没有标签跳过' },
      { dictValue: '6', dictLabel: '没有营期跳过' }
    ];

    // 获取处理状态字典
    this.handleStatusOptions = [
      { dictValue: '0', dictLabel: '待处理' },
      { dictValue: '1', dictLabel: '处理中' },
      { dictValue: '2', dictLabel: '处理完成' },
      { dictValue: '3', dictLabel: '不再自动处理' }
    ];

    // 获取任务来源字典
    this.taskSourceOptions = [
      { dictValue: '0', dictLabel: '未知' },
      { dictValue: '1', dictLabel: '一键群发' },
      { dictValue: '2', dictLabel: '任务模板' }
    ];

    this.getAiSipCallTask();
  },
  methods: {
    /** 查询SIP任务列表 */
    getList(val) {
      let qp = {...this.queryParams};
      qp['sopId'] = val.id || this.rowDetailFrom.id;
      this.loading = true;
      getSopSipTask(qp).then(response => {
        this.sipTaskList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(this.rowDetailFrom);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        sopUserLogsId: null,
        appCustomerId: null,
        status: null,
      };
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      let qp = {...this.queryParams};
      qp['sopId'] = this.rowDetailFrom.id;
      this.$confirm('是否确认导出所有SIP任务数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        // 这里需要添加导出API调用
        // return exportSipTask(qp);
      }).then(response => {
        // this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    /** 查看详情 */
    handleViewDetail(row) {
      this.detailDialog.data = { ...row };
      this.detailDialog.queryParams.sipTaskId = row.id;
      this.detailDialog.queryParams.externalUserName = null;
      this.detailDialog.queryParams.intent = null;
      this.detailDialog.queryParams.uuid = null;
      this.detailDialog.queryParams.pageNum = 1;
      this.detailDialog.visible = true;
      this.getDetailList();
    },
    /** 详情搜索按钮操作 */
    handleDetailQuery() {
      this.detailDialog.queryParams.pageNum = 1;
      this.getDetailList();
    },
    /** 详情重置按钮操作 */
    resetDetailQuery() {
      this.detailDialog.queryParams.externalUserName = null;
      this.detailDialog.queryParams.intent = null;
      this.detailDialog.queryParams.uuid = null;
      this.detailDialog.queryParams.callstatus = null;
      this.getDetailList();
    },
    /** 获取通话记录列表 */
    getDetailList() {
      this.detailDialog.loading = true;
      companySopList(this.detailDialog.queryParams).then(response => {
        this.detailDialog.list = response.rows || [];
        this.detailDialog.total = response.total || 0;
        this.detailDialog.loading = false;
      }).catch(() => {
        this.detailDialog.loading = false;
      });
    },
    /** 格式化时间戳 */
    formatDate(timestamp) {
      if (!timestamp) return '-';
      const date = new Date(timestamp * 1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 获取呼叫状态标签类型 */
    getCallStatusType(status) {
      const typeMap = {
        0: 'info',
        1: 'warning',
        2: 'warning',
        3: 'danger',
        4: 'success',
        5: 'warning',
        6: 'success',
        7: 'danger',
        30: 'danger',
        31: 'warning',
        32: 'danger',
        33: 'info',
        34: 'warning',
        35: 'danger',
        36: 'warning',
        37: 'info',
        38: 'warning',
        39: 'danger'
      };
      return typeMap[status] || 'info';
    },
    /** 获取呼叫状态标签文本 */
    getCallStatusLabel(status) {
      const labelMap = {
        0: '未拨打',
        1: '已进入队列',
        2: '正在拨号',
        3: '未接通',
        4: '已接通',
        5: '通话中断',
        6: '转人工/AI',
        7: '线路故障',
        30: '未接通',
        31: '正在通话',
        32: '关机',
        33: '空号',
        34: '无人接听',
        35: '停机',
        36: '网络忙',
        37: '语音助手',
        38: '无法接通',
        39: '呼叫限制'
      };
      return labelMap[status] || '未知';
    },
    /** 查看对话详情 */
    viewDialogueDetail(row) {
      if (row.dialogue) {
        try {
          const dialogueData = typeof row.dialogue === 'string' ? JSON.parse(row.dialogue) : row.dialogue;
          this.$alert(JSON.stringify(dialogueData, null, 2), '对话内容', {
            confirmButtonText: '确定',
            customClass: 'dialogue-detail-dialog',
            dangerouslyUseHTMLString: false
          });
        } catch (e) {
          this.$message.error('解析对话数据失败');
        }
      } else {
        this.$message.info('暂无对话记录');
      }
    },
    // 显示消息详情对话框
    showContentDialog(row) {
      this.contentDialog.currentRow = row;
      this.contentDialog.isDialogVisible = true;
      this.contentDialog.loading = true;
      this.contentDialog.courseInfo = null;
      this.contentDialog.videoInfo = null;
      this.contentDialog.contentType = null;
      this.contentDialog.messageType = null;


      try {
        const courseId = row.courseId;
        const videoId = row.videoId;
        const type = row.courseType;

        this.contentDialog.courseId = courseId;
        this.contentDialog.videoId = videoId;
        this.contentDialog.messageType = type;

        // 并行请求课程和视频详情
        const promises = [];

        if (courseId) {
          promises.push(
            getUserCourse(courseId).then(response => {
              this.contentDialog.courseInfo = response.data;
            }).catch(err => {
              console.error('获取课程信息失败:', err);
            })
          );
        }

        if (videoId) {
          promises.push(
            getUserCourseVideo(videoId).then(response => {
              this.contentDialog.videoInfo = response.data;
            }).catch(err => {
              console.error('获取视频信息失败:', err);
            })
          );
        }

        // 等待所有请求完成
        Promise.all(promises).finally(() => {
          this.contentDialog.loading = false;
        });

      } catch (e) {
        console.error('解析 contentJson 失败:', e);
        this.contentDialog.loading = false;
      }
    },
    // 获取消息类型标签样式
    getMessageTypeTag(type) {
      const tagMap = {
        0: '',
        1: 'warning',
        2: 'danger',
        3: 'success',
        4: 'info'
      };
      return tagMap[type] !== undefined ? tagMap[type] : '';
    },
    // 获取消息类型名称
    getMessageTypeName(type) {
      const typeMap = {
        0: '普通消息',
        1: '待看课消息',
        2: '看课中断消息',
        3: '已完课消息',
        4: '待看和中断消息'
      };
      return typeMap[type] !== undefined ? typeMap[type] : '未知类型';
    },
    openImageViewer(url) {
      // 打开大图预览对话框
      this.dialogImageUrl=url
      this.dialogVisible = true;
    },
    // 获取sip模板信息
    getAiSipCallTask() {
      if (this.aiSipCallTaskList.length === 0) {
        listAiSipCallTask({taskType: 1,status: 0,pageNum: 1,pageSize: 100}).then(response => {
          this.aiSipCallTaskList = response.rows || response.data || [];
        }).catch(error => {
          console.error('加载sip模板失败:', error);
          this.$message.error('加载sip模板失败');
        });
      }
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>

<style>
/* 详情对话框样式 */
.detail-dialog .el-dialog__body {
  padding: 20px;
}

.detail-dialog .el-table {
  font-size: 13px;
}

.detail-dialog .el-table th {
  padding: 12px 0;
}

.detail-dialog .el-table td {
  padding: 10px 0;
}

.detail-dialog .el-tag {
  font-weight: 500;
}

/* 数据同步说明 - 紧凑折叠样式 */
.sync-collapse {
  margin-bottom: 16px;
  border: none;
}

.sync-collapse .el-collapse-item__header {
  height: auto;
  min-height: 40px;
  line-height: 20px;
  padding: 8px 15px;
  background-color: #fdf6ec;
  border-left: 3px solid #E6A23C;
  border-radius: 4px;
  font-size: 13px;
}

.sync-collapse .el-collapse-item__header.is-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sync-collapse .el-collapse-item__wrap {
  border: 1px solid #EBEEF5;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #fafafa;
}

.sync-collapse .el-collapse-item__content {
  padding: 16px;
}

.sync-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.sync-title {
  font-weight: 600;
  color: #303133;
  margin-right: 12px;
}

.sync-summary {
  color: #909399;
  font-size: 12px;
}

.view-detail-btn {
  margin-left: auto;
  color: #409EFF !important;
  font-size: 12px !important;
  padding: 0 8px !important;
}

.view-detail-btn i {
  transition: transform 0.3s;
}

.sync-collapse .el-collapse-item__header.is-active .view-detail-btn i {
  transform: rotate(180deg);
}

.view-detail-btn {
  margin-left: auto;
  color: #409EFF !important;
  font-size: 12px !important;
  padding: 0 8px !important;
}

.view-detail-btn i {
  transition: transform 0.3s;
}

.sync-collapse .el-collapse-item__header.is-active .view-detail-btn i {
  transform: rotate(180deg);
}

.sync-detail-content {
  font-size: 13px;
}

.sync-card {
  background-color: #fff;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  padding: 12px;
  height: 100%;
}

.sync-card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EBEEF5;
}

.sync-card-header.warning {
  color: #E6A23C;
}

.sync-card-header.info {
  color: #409EFF;
}

.sync-card-header i {
  margin-right: 6px;
}

.compact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.compact-list li {
  padding: 4px 0;
  color: #606266;
  position: relative;
  padding-left: 14px;
  font-size: 12px;
}

.compact-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: #909399;
}

.sync-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rule-detail-item {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 10px 12px;
  border-left: 3px solid #409EFF;
}

.rule-detail-item:nth-child(1) {
  border-left-color: #67C23A;
}

.rule-detail-item:nth-child(2) {
  border-left-color: #409EFF;
}

.rule-detail-item:nth-child(3) {
  border-left-color: #E6A23C;
}

.rule-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rule-desc {
  font-size: 12px;
  color: #606266;
  margin-left: 8px;
  flex: 1;
}

.rule-desc code {
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 11px;
  margin: 0 2px;
}

.rule-example {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #909399;
  padding-left: 52px;
  line-height: 1.6;
}

.rule-example i {
  color: #C0C4CC;
  margin-right: 6px;
  font-size: 13px;
}

.rule-example strong {
  color: #606266;
  font-weight: 600;
  margin: 0 3px;
}

.rule-example code {
  background-color: #fdf6ec;
  color: #E6A23C;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 11px;
  margin: 0 2px;
}

/* 数据同步说明 - 紧凑折叠样式 */
.sync-collapse {
  margin-bottom: 16px;
  border: none;
}

.sync-collapse .el-collapse-item__header {
  height: auto;
  min-height: 40px;
  line-height: 20px;
  padding: 8px 15px;
  background-color: #fdf6ec;
  border-left: 3px solid #E6A23C;
  border-radius: 4px;
  font-size: 13px;
}

.sync-collapse .el-collapse-item__header.is-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sync-collapse .el-collapse-item__wrap {
  border: 1px solid #EBEEF5;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #fafafa;
}

.sync-collapse .el-collapse-item__content {
  padding: 16px;
}

.sync-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.sync-title {
  font-weight: 600;
  color: #303133;
  margin-right: 12px;
}

.sync-summary {
  color: #909399;
  font-size: 12px;
}

.sync-detail-content {
  font-size: 13px;
}

.sync-card {
  background-color: #fff;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  padding: 12px;
  height: 100%;
}

.sync-card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EBEEF5;
}

.sync-card-header.warning {
  color: #E6A23C;
}

.sync-card-header.info {
  color: #409EFF;
}

.sync-card-header i {
  margin-right: 6px;
}

.compact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.compact-list li {
  padding: 4px 0;
  color: #606266;
  position: relative;
  padding-left: 14px;
  font-size: 12px;
}

.compact-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: #909399;
}

.sync-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rule-detail-item {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 10px 12px;
  border-left: 3px solid #409EFF;
}

.rule-detail-item:nth-child(1) {
  border-left-color: #67C23A;
}

.rule-detail-item:nth-child(2) {
  border-left-color: #409EFF;
}

.rule-detail-item:nth-child(3) {
  border-left-color: #E6A23C;
}

.rule-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rule-desc {
  font-size: 12px;
  color: #606266;
  margin-left: 8px;
  flex: 1;
}

.rule-desc code {
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 11px;
  margin: 0 2px;
}

.rule-example {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #909399;
  padding-left: 52px;
  line-height: 1.6;
}

.rule-example i {
  color: #C0C4CC;
  margin-right: 6px;
  font-size: 13px;
}

.rule-example strong {
  color: #606266;
  font-weight: 600;
  margin: 0 3px;
}

.rule-example code {
  background-color: #fdf6ec;
  color: #E6A23C;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 11px;
  margin: 0 2px;
}
</style>
