<template>
  <div class="listBox" style="">
    <div class="jy-list" v-for="item in tableData" v-if="tableData.length > 0">
      <div class="title">{{ item.workordercode }}</div>
      <div class="content">{{ item.content }}<br /></div>

      <div class="bottom">创建时间：{{ item.createtime }}</div>
      <div class="orderState">
        <!-- <el-tag :type="getStateColor(item.workorderstatename)">{{
          item.workorderstatename
        }}</el-tag> -->
        <el-tag
                effect="plain"
                :type="tagTypeFn(item.workorderstatename)"
              >{{ item.workorderstatename }}</el-tag>
      </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>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getPageListData } from '@/api/main/system/system'
import { tagTypeFn } from '@/utils/index'

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()
}
const props = defineProps({
  inCommingData: {
    type: Object,
    default: () => ({})
  },
  customerId: {
    type: String,
    default: ''
  }
})
watch(props, (nweProps) => {
  if (nweProps.customerId) {
    if (nweProps.customerId) {
      paramsSearch.value.customerno = props.customerId
      getCustomeData()
    }
  }
})
onMounted(() => {
  paramsSearch.value.pageNum = 1
  paramsSearch.value.pageSize = pageSize4.value
  if (props.customerId) {
    paramsSearch.value.customerno = props.customerId
    getCustomeData()
  } else if (props.inCommingData.Number) {
    paramsSearch.value.callnum = props.inCommingData.Number
    getCustomeData()
  }
})
function getCustomeData() {
  // if (!callnum || !customerId) {
  //   tableData.value = []
  //   tableCount.value = 0
  //   return
  // }
  tableData.value = []
  paramsSearch.value.listType = 0
  getPageListData('/order/workorder', paramsSearch.value).then(
    ({ data, total }) => {
      tableData.value = data
      tableCount.value = total
    }
  )
}
function rightMethod() {
  getCustomeData()
}
defineExpose({
  rightMethod
})
function getStateColor(orderState) {
  let stateColor = ''
  if (orderState === '待交办' || orderState === '待接单') {
    stateColor = 'default'
  } else if (orderState === '待处理') {
    stateColor = 'warning'
  } else if (orderState === '待审核') {
    stateColor = 'danger'
  } else if (orderState === '待回访') {
    stateColor = 'success'
  } else if (orderState === '已完结') {
    stateColor = 'info'
  }
}
</script>
<style lang="scss" scoped>
.listBox {
  overflow-y: auto;
  height: 100%;
}
.listBox::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.jy-list {
  margin: 15px;
  line-height: 30px;
  height: 125px;
  position: relative;

  .orderState {
    position: absolute;
    right: 15px;
    top: 0px;
    font-size: 12px;
  }
  .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>
