<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="业务场景" prop="sceneCode">
        <el-select v-model="queryParams.sceneCode" placeholder="请选择业务场景" clearable size="small" style="width: 160px">
          <el-option label="外呼" value="CALL" />
          <el-option label="短信" value="SMS" />
          <el-option label="加微" value="ADD_WX" />
        </el-select>
      </el-form-item>
      <el-form-item label="对象类型" prop="targetType">
        <el-select v-model="queryParams.targetType" placeholder="请选择对象类型" clearable size="small" style="width: 160px">
          <el-option label="手机号码" :value="1" />
          <el-option label="客户ID" :value="2" />
          <el-option label="企微客户ID" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="对象值" prop="targetValue">
        <el-input
          v-model="queryParams.targetValue"
          placeholder="请输入手机号或对象值"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="黑名单ID" prop="blacklistId">
        <el-input
          v-model="queryParams.blacklistId"
          placeholder="请输入黑名单ID"
          clearable
          size="small"
          style="width: 140px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户ID" prop="customerId">
        <el-input
          v-model="queryParams.customerId"
          placeholder="请输入客户ID"
          clearable
          size="small"
          style="width: 140px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="外呼任务ID" prop="roboticId">
        <el-input
          v-model="queryParams.roboticId"
          placeholder="请输入外呼任务ID"
          clearable
          size="small"
          style="width: 140px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="拦截时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </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"
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['company:companyVoiceBlacklistIntercept:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table v-loading="loading" :data="list" border height="500">
      <el-table-column label="ID" align="center" prop="id" width="80" />
      <el-table-column label="业务场景" align="center" prop="sceneCode" width="100">
        <template slot-scope="scope">
          <span>{{ formatSceneCode(scope.row.sceneCode) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="黑名单ID" align="center" prop="blacklistId" width="100" />
      <el-table-column label="对象类型" align="center" prop="targetType" width="110">
        <template slot-scope="scope">
          <span>{{ formatTargetType(scope.row.targetType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="对象值" align="center" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.targetValue || '-' }}</span>
          <el-button
            v-if="canQueryPhone(scope.row)"
            type="text"
            icon="el-icon-zoom-in"
            size="mini"
            style="margin-left: 8px"
            @click="handlePhone(scope.row)"
            v-hasPermi="['company:companyVoiceBlacklistIntercept:query']"
          />
        </template>
      </el-table-column>
      <el-table-column label="拉黑原因" align="center" prop="blacklistReason" min-width="120" show-overflow-tooltip />
      <el-table-column label="拦截说明" align="center" prop="interceptReason" min-width="140" show-overflow-tooltip />
      <el-table-column label="客户ID" align="center" prop="customerId" width="100" />
      <el-table-column label="被叫人ID" align="center" prop="calleeId" width="100" />
      <el-table-column label="外呼任务ID" align="center" prop="roboticId" width="110" />
      <el-table-column label="操作人ID" align="center" prop="companyUserId" width="100" />
      <el-table-column label="业务ID" align="center" prop="bizId" min-width="120" show-overflow-tooltip />
      <el-table-column label="请求IP" align="center" prop="requestIp" width="130" />
      <el-table-column label="拦截时间" align="center" prop="createTime" width="160" />
      <el-table-column label="备注" align="center" prop="remark" min-width="120" show-overflow-tooltip />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-hasPermi="['company:companyVoiceBlacklistIntercept:query']"
          >详情</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-dialog title="拦截明细详情" :visible.sync="detailOpen" width="640px" append-to-body>
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="ID">{{ detail.id || '-' }}</el-descriptions-item>
        <el-descriptions-item label="业务场景">{{ formatSceneCode(detail.sceneCode) }}</el-descriptions-item>
        <el-descriptions-item label="黑名单ID">{{ detail.blacklistId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="对象类型">{{ formatTargetType(detail.targetType) }}</el-descriptions-item>
        <el-descriptions-item label="对象值" :span="2">{{ detail.targetValue || '-' }}</el-descriptions-item>
        <el-descriptions-item label="拉黑原因" :span="2">{{ detail.blacklistReason || '-' }}</el-descriptions-item>
        <el-descriptions-item label="拦截说明" :span="2">{{ detail.interceptReason || '-' }}</el-descriptions-item>
        <el-descriptions-item label="客户ID">{{ detail.customerId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="被叫人ID">{{ detail.calleeId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="外呼任务ID">{{ detail.roboticId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="操作人ID">{{ detail.companyUserId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="业务ID">{{ detail.bizId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="链路ID">{{ detail.bizTraceId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="请求IP">{{ detail.requestIp || '-' }}</el-descriptions-item>
        <el-descriptions-item label="拦截时间">{{ detail.createTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listApi,
  getApi,
  exportApi,
  queryPhoneApi
} from '@/api/company/companyVoiceBlacklistIntercept'

export default {
  name: 'CompanyVoiceBlacklistIntercept',
  data() {
    return {
      loading: true,
      exportLoading: false,
      showSearch: true,
      total: 0,
      list: [],
      dateRange: [],
      detailOpen: false,
      detail: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sceneCode: null,
        targetType: null,
        targetValue: null,
        blacklistId: null,
        customerId: null,
        roboticId: null,
        beginTime: null,
        endTime: null
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    formatSceneCode(code) {
      const map = { CALL: '外呼', SMS: '短信', ADD_WX: '加微' }
      return map[code] || code || '-'
    },
    formatTargetType(type) {
      const map = { 1: '手机号', 2: '客户ID', 3: '企微客户ID' }
      return map[type] || type || '-'
    },
    canQueryPhone(row) {
      return row && row.id != null && Number(row.targetType) === 1
    },
    buildQueryParams() {
      const params = { ...this.queryParams }
      if (this.dateRange && this.dateRange.length === 2) {
        params.beginTime = this.dateRange[0]
        params.endTime = this.dateRange[1] + ' 23:59:59'
      } else {
        params.beginTime = null
        params.endTime = null
      }
      return params
    },
    getList() {
      this.loading = true
      listApi(this.buildQueryParams()).then(res => {
        this.list = res.rows || []
        this.total = res.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.queryParams.beginTime = null
      this.queryParams.endTime = null
      this.handleQuery()
    },
    handleDetail(row) {
      if (!row || !row.id) return
      getApi(row.id).then(res => {
        this.detail = res.data || {}
        this.detailOpen = true
      })
    },
    handleExport() {
      this.$confirm('是否确认导出当前筛选条件下的拦截明细数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.exportLoading = true
        const data = this.buildQueryParams()
        delete data.pageNum
        delete data.pageSize
        return exportApi(data)
      }).then(res => {
        this.download(res.msg)
        this.exportLoading = false
      }).catch(() => {
        this.exportLoading = false
      })
    },
    handlePhone(row) {
      if (!row || !row.id) return
      queryPhoneApi(row.id).then(res => {
        const mobile = (res && res.mobile) || (res && res.data && res.data.mobile)
        if (mobile) {
          this.$alert(mobile, '手机号', { confirmButtonText: '确定' })
        } else {
          this.msgError((res && res.msg) || '获取手机号失败')
        }
      })
    }
  }
}
</script>
