<script setup>
import { reactive, ref,computed,watch } from 'vue'
import mPage from '@/components/mPage.vue';
import { customInterence } from '@/api/api.js'

const props = defineProps({
  visible:{
    type:Boolean,
    required:true
  },
  // todo数据
  todoInfo:{
    type:Object,
    required:true
  }
})
const emit = defineEmits(['close'])

const dialogTitle = computed(()=>{
  return props.todoInfo.CompanyName+"——任务历史记录"
})


const historyList = ref([])
const params = reactive({
  CurrentIndex:1,
  PageSize:10,
  CompanyId:0,
  SortType:""
})
const total = ref(0)
const firstLoading = ref(false)
function getList(){
  customInterence.getTodoListEn(params).then(res=>{
    firstLoading.value = false
    historyList.value = res.Data.List || []
    total.value = res.Data.Paging.Totals
  })
}

//切换页码
function pageChange(page_no){
  params.CurrentIndex=page_no
  getList()
}
// 排序
function createtimeSortChange({order}){
  params.SortType=order=="ascending"?'2':order=="descending"?'1':'0'
  getList()
}

function closeDia(){
  emit("close")
}


watch(
  () => props.visible,
  (newVal) =>{
    if(!newVal) return 
    firstLoading.value = true
    params.CompanyId = props.todoInfo.CompanyId
    getList()
  }
)

</script>
<template>
  <el-dialog :title="dialogTitle" append-to-body width="1042px" top="10vh"
  :model-value="visible" @closed="closeDia" :close-on-click-modal="false">
    <div  style="padding:10px 20px 35px 20px;">
      <el-table :data="historyList" border @sort-change="createtimeSortChange" 
      v-loading="firstLoading" element-loading-text="加载中">
        <el-table-column label="任务描述" align="center" prop="Content">
          <template #default="{row}">
            {{row.Content}}
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="CreateUserName" width="100">
          <template #default="{row}">
            {{row.CreateUserName}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="160" sortable="custom"
        prop="CreateTime">
          <template #default="{row}">
            {{row.CreateTime}}
          </template>
        </el-table-column>
        <el-table-column label="截止日期" align="center" width="120"
        prop="EndTimeStr">
          <template #default="{row}">
            {{row.EndTimeStr}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="150"
        prop="Remark">
          <template #default="{row}">
            {{row.Remark}}
          </template>
        </el-table-column>
        <el-table-column label="审核人" align="center" width="100"
        prop="ApproveUserName">
          <template #default="{row}">
            {{row.ApproveUserName || '--'}}
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" width="160"
        prop="ApproveTime">
          <template #default="{row}">
            {{row.ApproveTime || '--'}}
          </template>
        </el-table-column>
      </el-table>
      <!-- 页数选择器 -->
      <m-page
        v-show="total!=0"
        style="float: none;text-align: right;margin-top: 70px;"
        :page_no="params.CurrentIndex"
        :pageSize="params.PageSize"
        :total="total"
        @handleCurrentChange="pageChange"
      />
    </div>
  </el-dialog>
</template>
<style scoped lang="scss">
  .custom-title{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
  }
</style>