<template>
  <el-dialog :title="dialogTitle" append-to-body width="1042px" top="10vh"
  :visible.sync="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 slot-scope="{row}">
            {{row.Content}}
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="CreateUserName" width="100">
          <template slot-scope="{row}">
            {{row.CreateUserName}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="160" sortable="custom"
        prop="CreateTime">
          <template slot-scope="{row}">
            {{row.CreateTime}}
          </template>
        </el-table-column>
        <el-table-column label="截止日期" align="center" width="120"
        prop="EndTimeStr">
          <template slot-scope="{row}">
            {{row.EndTimeStr}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="150"
        prop="Remark">
          <template slot-scope="{row}">
            {{row.Remark}}
          </template>
        </el-table-column>
        <el-table-column label="审核人" align="center" width="100"
        prop="ApproveUserName">
          <template slot-scope="{row}">
            {{row.ApproveUserName || '--'}}
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" width="160"
        prop="ApproveTime">
          <template slot-scope="{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>

<script>
import mPage from '@/components/mPage.vue';
import { customInterence } from '@/api/api.js'

  export default {
    name:"historyToDoDiaEn",
    components:{mPage},
    data() {
      return {
        historyList:[],
        params:{
          CurrentIndex:1,
          PageSize:10,
          CompanyId:0,
          SortType:""
        },
        total:0,
        firstLoading:false
      }
    },
    props:{
      visible:{
        type:Boolean,
        required:true
      },
      // todo数据
      todoInfo:{
        type:Object,
        required:true
      }
    },
    watch:{
      visible(newVal){
        if(!newVal) return 
        this.firstLoading = true
        this.params.CompanyId = this.todoInfo.CompanyId
        this.getList()
      }
    },
    computed:{
      dialogTitle(){
        return this.todoInfo.CompanyName+"——任务历史记录"
      }
    },
    methods: {
      getList(){
        customInterence.getTodoListEn(this.params).then(res=>{
          this.firstLoading = false
          this.historyList = res.Data.List || []
          this.total = res.Data.Paging.Totals
        })
      },
      //切换页码
      pageChange(page_no){
        this.params.CurrentIndex=page_no
        this.getList()
      },
      // 排序
      createtimeSortChange({order}){
        this.params.SortType=order=="ascending"?'2':order=="descending"?'1':'0'
        this.getList()
      },
      closeDia(){
        this.$emit("update:visible",false)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .custom-title{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
  }
</style>