<template>
  <div class="home">
    <h3 style="margin-bottom: 10px;margin-top: 10px">实时通话</h3>
    <div class="real-time-call">
      <LiveCall />
    </div>
    <div class="call-history">
      <h3>历史通话记录</h3>
      <fvTable ref="tableIns" :tableConfig="tableConfig" :isLoading="isLoading"></fvTable>
      <voice ref="voiceRef" title="语音详情" :rowUrl="rowUrl" />
      <infoLiveCall ref="infoLiveCallRef" v-model:value="orderNumber" />
    </div>
  </div>
</template>

<script setup lang="jsx">
import LiveCall from '@/components/liveCall/index.vue'
import Voice from '@/components/voice/index.vue'
import InfoLiveCall from '@/components/infoLiveCall/index.vue'
const orderNumber = ref('')
const rowUrl = ref()
const infoLiveCallRef = ref()
const isLoading = ref(false)
const voiceRef = ref()
const tableIns = ref()
const auths = reactive({
  record: ['order:dialogue:list'],
})
const tableConfig = reactive({
  columns: [
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width: 80,
    },
    {
      prop: 'orderNumber',
      label: '工单号',
      align: 'center',
    },
    {
      prop: 'orderName',
      label: '工单名称',
      align: 'center'
    },
    {
      prop: 'orderContent',
      label: '工单内容',
      align: 'center'
    },
    {
      prop: 'operationUser',
      // prop: 'destinationName',
      label: '处理人',
      align: 'center'
    },
    {
      prop: 'knotter',
      // prop: 'destinationName',
      label: '关单人',
      align: 'center'
    },
    {
      prop: 'destinationName',
      // prop: 'workOrderNumber',
      label: '用户名',
      align: 'center'
    },
    {
      prop: 'destinationNumber',
      label: '电话号码',
      align: 'center'
    },
    {
      prop: 'callState',
      label: '电话拨打状态',
      align: 'center',
      width: 120,
      showOverflowTooltip: false,
      currentRender: ({ row, index }) => {
        if (row.callState !== null) {
          return (<PointTag dictType={'call_status'} value={row.callState} />)
        } else {
          return '--'
        }
      }
    },
    {
      prop: 'createdTime',
      // prop: 'workOrderTime',
      label: '拨打时间',
      align: 'center',
      width: 200
    }, {
      prop: 'oper',
      label: '操作',
      align: 'center',
      fixed: 'right',
      width: 200,
      showOverflowTooltip: false,
      currentRender: ({ row, index }) => {
        // console.log(row);
        let btn = []
        btn.push({ label: '播放语音',  func: () => handleVoice(row), type: 'primary' })
        btn.push({ label: '通话记录', prem: auths.record, func: () => handleInfo(row), type: 'primary' })
        return (
          <div style={{ width: '100%' }}>
            {
              btn.map(item => (
                  item.prem?
                  <el-button
                    type={item.type}
                    v-perm={item.prem}
                    onClick={() => item.func()}
                    link>
                    {item.label}
                  </el-button>
                  : <el-button
                    type={item.type}
                    onClick={() => item.func()}
                    link>
                  {item.label}
                </el-button>
              ))
            }
          </div >
        )
      }
    }
  ],
  api: '/order/list',
  params: {
  }
})
const handleVoice = (row) => {
  if (row.recordUrl !== null) {
    voiceRef.value.open(true)
    rowUrl.value = row.recordUrl
  }else{
    ElMessage({
      message: '暂无语音',
      type: 'warning',
    })
  }

}
const handleInfo = (row) => {
  orderNumber.value = row.orderNumber
  infoLiveCallRef.value.open()
}
window.setInterval(() => {
  setTimeout(tableIns.value.refresh(), 0)
}, 2000)
</script>

<style lang="scss" scoped>
:deep(.el-table--fit){
  min-height: 180px;
}
.home {
  .real-time-call {
    width: 100%;
    height: 50vh;
    // background-color: red;
  }

  .call-history {
    width: 100%;
    //height: 50vh;
    // background-color: blue;
  }
}
</style>
