<template>
  <div class="un-do-statistic-wrap">
    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeDia"
      width="889px"
      v-dialogDrag
      center
    >
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px"
          >未完成To-Do</span
        >
      </div>
      <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 slot-scope="{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>

<script>
import { customInterence } from '@/api/api.js'
export default {
  props:{
    visible:{
      type:Boolean,
      default:false
    }
  },
  watch:{
    visible(newVal){
      if(newVal){
        this.getTableData()
      }
    }
  },
  data() {
    return {
      tableData:[],
      tableLabel:[{
        key:'CompanyName',
        label:'客户名称'
      },
      {
        key:'Content',
        label:'任务描述'
      },
      {
        key:'EndTime',
        label:'截止时间',
        sortable:'custom'
      }],
      pageNo:1,
      pageSize:10,
      total:0,
      sortType:0
    };
  },
  methods: {
    getTableData(){
      customInterence.getUnDoList({
        PageSize:this.pageSize,
        CurrentIndex:this.pageNo,
        SortType:this.sortType
      }).then(res=>{
        if(res.Ret!==200) return 
        this.tableData = res.Data.List
        this.total = res.Data.Paging.Totals
      })
    },
    handleCurrentChange(page){
      this.pageNo = page
      this.getTableData()
    },
    closeDia(){
      this.tableData=[]
      this.sortType=0
      this.pageNo = 1
      this.$emit("update:visible",false)
    },
    sortChange({order}){
      this.sortType = order?order==='ascending'?1:2:0
      this.getTableData()
    }
  },
};
</script>

<style scoped lang="scss">
.dialog-container{
  padding:0 50px 15px 50px;
}
</style>
