<template>
  <div class="jy-list" v-for="item in tableData" v-if="tableData.length > 0">
    <div class="title">来电号码：{{ getUnprefixNuber(item.caller) }}</div>
    <div class="content">
      <span style="margin-right: 15px"
        >呼叫状态：{{ getCallSate(item.callType, item.endTime) }}</span
      >
      坐席名称：{{ item.calleeAgent }}
    </div>
    <div class="bottom">
      开始时间：{{ item.createTime }}<br />
      结束时间：{{ item.endTime }}
    </div>
  </div>
  <div v-else style="text-align: center">暂无记录</div>
  <div style="margin-top: 15px" v-if="tableCount">
    <el-pagination
      v-model:page-size="pageSize4"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, prev, jumper, next"
      :total="tableCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getPageListData } from '@/api/main/system/system'
import { getCallSate, getUnprefixNuber } from '@/utils'

const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const tableData = ref([])
const tableCount = ref(0)
const paramsSearch = ref({})

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  paramsSearch.value.pageNum = val
  getCustomeData(paramsSearch.value.caller)
}
const props = defineProps({
  inCommingData: {
    type: Object,
    default: () => ({})
  }
})
onMounted(() => {
  paramsSearch.value.pageNum = 1
  paramsSearch.value.pageSize = pageSize4.value
  props.inCommingData.Number && getCustomeData(props.inCommingData.Number)
})
function getCustomeData(caller) {
  paramsSearch.value.caller = caller
  getPageListData('/call/calllog', paramsSearch.value).then(
    ({ data, total }) => {
      tableData.value = data
      tableCount.value = total
    }
  )
}
</script>
<style lang="scss" scoped>
.jy-list {
  margin: 15px;
  line-height: 30px;
  height: 125px;

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .content {
    line-height: 22px;
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .bottom {
    font-size: 12px;
  }
}
</style>
