<template>
  <el-dialog
    v-if="isHistoryDialogShow"
    :visible.sync="isHistoryDialogShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="1020px"
    v-dialogDrag
    center
  >
    <div slot="title" style="display: flex; alignitems: center">
      <span style="fontsize: 16px"
        >{{ todoInfo ? todoInfo.CompanyName : "" }}——任务历史记录</span
      >
    </div>
    <div class="dialog-container">
        <div class="table-container">
            <el-table
                v-if="todoData"
                :data="todoData"
                border
                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"
                    :prop="item.prop"
                    :width="item.widthsty" 
                    :min-width="item.minwidthsty"
                >
                <template slot-scope="{row}">
                  <span v-if="['CreateTime','ApproveTime'].includes(item.key)">
                   {{row[item.key]==='0001-01-01T00:00:00Z'?'--':$moment(row[item.key]).format('YYYY-MM-DD HH:mm:ss')}}
                  </span>
                  <span v-else-if="item.key==='ProductId'">{{row[item.key]===1?'ficc':'权益'}}</span>
                  <!-- <span v-else-if="item.key==='EndTimeStr'">
                    {{row[item.key]==='0001-01-01T00:00:00Z'?'':$moment(row[item.key]).format('YYYY-MM-DD')}}
                  </span> -->
                  <span v-else>{{row[item.key]||'--'}}</span>
                </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
  </el-dialog>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
  name: "",
  components: {},
  props: {
    isHistoryDialogShow: {
      type: Boolean,
      default: false,
    },//控制弹窗展示
    todoInfo: {
      type: Object,
    },//todo的info
  },
  data() {
    return {
        todoData:[],//表格数据
        tableLabel:[
            {
                label:'任务描述',
                key:'Content',
                widthsty:150
            },
            {
                label:'客户类型',
                key:'ProductId',
                widthsty:80
            },
            {
                label:'创建人',
                key:'CreateUserName'
            },
            {
                label:'创建时间',
                key:'CreateTime',
                minwidthsty:150
            },
            {
                label:'截止日期',
                key:'EndTimeStr',
                minwidthsty:120
            },
            {
                label:'备注',
                key:'Remark',
                widthsty:150
            },
            {
                label:'审核人',
                key:'ApproveUserName'
            },
            {
                label:'审核时间',
                key:'ApproveTime',
                minwidthsty:150
            }
        ],
    };
  },
  computed: {
  },
  watch:{
    isHistoryDialogShow(){
      if(!this.isHistoryDialogShow) return 
      //获取历史记录
      customInterence.getHistory({
        CompanyId:this.todoInfo.CompanyId
      }).then(res=>{
        if(res.Ret===200&&res.Data){
          this.todoData = res.Data
        }
      })
    },
/*     todoInfo(){
       if(!this.isHistoryDialogShow) return 
      //获取历史记录
      customInterence.getHistory({
        CompanyId:this.todoInfo.CompanyId
      }).then(res=>{
        if(res.Ret===200&&res.Data){
          this.todoData = res.Data
        }
      })
    } */
  },
  created() {
  },
  mounted() {},
  methods: {
    closeDia() {
      this.todoData=[]
      this.$emit("update:isHistoryDialogShow", false);
    },
  },
};
</script>
<style scoped lang="scss">
</style>
