<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" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
      <voice ref="voiceRef" />
      <infoLiveCall ref="infoLiveCallRef"/>
    </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 infoLiveCallRef=ref()
const voiceRef=ref()
const tableIns = ref()
const mockData = ref([
  {
    workOrderNumber: 1211,
    workOrderTime: '2022-02-09 00 : 12',
    state: 0,
    callState: '01'
  },
  {
    workOrderNumber: 232,
    state: 1,
    callState: '02'
  }
])
const auths = reactive({
  report: ['mosr:collect:reported'],
})
const tableConfig = reactive({
  columns: [
    {
      prop: 'index',
      type: 'index',
      label: '工单号',
      align: 'center',
      width: 80,
    },
    {
      prop: 'workOrderNumber',
      label: '工单名称',
      align: 'center'
    },
    {
      prop: 'workOrderNumber',
      label: '工单内容',
      align: 'center'
    },
    {
      prop: 'workOrderNumber',
      label: '处理人',
      align: 'center'
    },
    {
      prop: 'workOrderNumber',
      label: '关单人',
      align: 'center'
    },
    {
      prop: 'workOrderNumber',
      label: '用户名',
      align: 'center'
    },
    {
      prop: 'workOrderNumber',
      label: '号码',
      align: 'center'
    },
    {
      prop: 'callState',
      label: '电话拨打状态',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({ row, index }) => {
        if (row.callState !== null) {
          return (<PointTag dictType={'call_status'} value={row.callState} />)
        } else {
          return '--'
        }
      }
    },
    {
      prop: 'workOrderTime',
      label: '拨打时间',
      align: 'center',
      width: 200
    }, {
      prop: 'oper',
      label: '操作',
      align: 'center',
      fixed: 'right',
      // width: 150,
      showOverflowTooltip: false,
      currentRender: ({ row, index }) => {
        // console.log(row);
        let btn = []
        btn.push({ label: '播放语音', prem: auths.detail, func: () => handleVoice(row), type: 'primary' })
        btn.push({ label: '通话记录', prem: auths.detail, func: () => handleInfo(row), type: 'primary' })
        return (
          <div style={{ width: '100%' }}>
            {
              btn.map(item => (
                <>
                  <el-button
                    type={item.type}
                    // v-perm={item.prem}
                    onClick={() => item.func()}
                    link>
                    {item.label}
                  </el-button>
                </>
              ))
            }
          </div >
        )
      }
    }
  ],
  api: '',
  params: {},
  btns: [
    // {name: '新增', key: 'add',type:'primary',icon:'Plus'},
  ]
})
const handleVoice = (row) => {
  voiceRef.value.open(true)
}
const handleInfo = (row) => {
  infoLiveCallRef.value.open(true)
}
</script>

<style lang="scss" scoped>
.home {
  .real-time-call {
    width: 100%;
    height: 50vh;
    // background-color: red;
  }

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