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

const props = defineProps({
  isHistoryDialogShow: {
    type: Boolean,
    default: false,
  },//控制弹窗展示
  todoInfo: {
    type: Object,
  },//todo的info
})
const emit = defineEmits(['close'])

watch(
  () =>props.isHistoryDialogShow,
  (newval) => {
     if(!newval) return 
      //获取历史记录
      customInterence.getHistory({
        CompanyId:props.todoInfo.CompanyId
      }).then(res=>{
        if(res.Ret===200&&res.Data){
          todoData.value = res.Data
        }
      })
  }
)

const todoData = ref([])//表格数据
const 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
    }
]


function closeDia() {
  todoData.value=[]
  emit("close");
}


</script>

<template>
  <el-dialog
    v-if="isHistoryDialogShow"
    :model-value="isHistoryDialogShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="1020px"
    draggable
    center
  >
    <template #header>
      <div style="display: flex; align-items: center">
        <span style="fontsize: 16px"
          >{{ todoInfo ? todoInfo.CompanyName : "" }}——任务历史记录</span
        >
      </div>
    </template>
    <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 #default="{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>{{row[item.key]||'--'}}</span>
                </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
  </el-dialog>
</template>


<style>
</style>