<script setup>
import { ref, watch } from 'vue'
import { customInterence } from '@/api/api.js'

const props = defineProps({
  visible:{
    type:Boolean,
    default:false
  }
})
const emit = defineEmits(['close'])

const tableLabel = [{
  key:'CompanyName',
  label:'客户名称'
},
{
  key:'Content',
  label:'任务描述'
},
{
  key:'EndTime',
  label:'截止时间',
  sortable:'custom'
}]

const tableData = ref([])
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const sortType = ref(0)

function getTableData(){
  customInterence.getUnDoList({
    PageSize:pageSize.value,
    CurrentIndex:pageNo.value,
    SortType:sortType.value
  }).then(res=>{
    if(res.Ret!==200) return 
    tableData.value = res.Data.List
    total.value = res.Data.Paging.Totals
  })
}

function handleCurrentChange(page){
  pageNo.value = page
  getTableData()
}

function closeDia(){
  tableData.value=[]
  sortType.value=0
  pageNo.value = 1
  emit("close")
}

function sortChange({order}){
  sortType.value = order?order==='ascending'?1:2:0
  getTableData()
}


watch(() =>props.visible,
  (newVal) => {
    if(newVal){
        getTableData()
    }
  }
)
</script>
<template>
<div class="un-do-statistic-wrap">
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="889px"
    draggable
    center
  >
    <template #header>
      <div style="display: flex; align-items: center">
        <span style="font-size: 16px"
          >未完成To-Do</span
        >
      </div>
    </template>
    <div class="dialog-container">
      <div class="table-container">
          <el-table
            v-if="tableData&&visible"
            :data="tableData"
            border
            @sort-change="sortChange"
            max-height="600"
            style="width: 100%; margin-bottom: 20px">
            <el-table-column align="center"
                v-for="item in tableLabel" :key="item.key"
                :label="item.label"
                :width="item.widthsty" 
                :min-width="item.minwidthsty"
                :sortable="item.sortable"
            >
            <template #default="{row}">
              <span>{{row[item.key]}}</span>
            </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            layout="total,prev,pager,next" 
            background
            :current-page="pageNo"
            @current-change="handleCurrentChange"
            :page-size="pageSize" 
            :total="total"
            style="text-align:right;">
          </el-pagination>
      </div>
    </div>
  </el-dialog>
</div>
</template>
<style scoped lang="scss">
.dialog-container{
  padding:0 50px 15px 50px;
}
</style>