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

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

watch(
  () => props.ischeckToDoDialogShow,
  (newval) => {
    if(!newval) return 
      //获取历史记录
      customInterence.getHistory({
        CompanyId:props.todoInfo.CompanyId
      }).then(res=>{
        if(res.Ret===200){
          todoData.value = res.Data
        }
      })
      //获取最新记录
      customInterence.getToDoItem({
          CompanyId:props.todoInfo.CompanyId
        }).then(res=>{
          if(res.Ret===200&&res.Data){
            textarea.value = res.Data[0].Content
            todoId.value = res.Data[0].Id
            remake.value = res.Data[0].Remark||''
          }
      })
  }
)


const textarea = ref("") //任务描述
const remake = ref("")//任务备注
const activeTab = ref(1)
const todoData = ref([])//表格数据
const todoId = ref(0)//任务的id
function closeDia(type) {
    if(type==='confirm'){
    emit('check',{Id:todoId.value,Remark:remake.value})
  }else{
    emit("close");
  }
  textarea.value= ""
  remake.value=""
  todoData.value=[]
  todoId.value=0
}

function isLast(info){
  if(info.$index===todoData.value.length-1){
    return true
  }else{
    return false
  }
}

</script>

<template>
   <el-dialog
    v-if="ischeckToDoDialogShow"
    :model-value="ischeckToDoDialogShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="889px"
    draggable
    center
  >
    <template #header>
      <div style="display: flex; alignitems: center">
        <span style="fontsize: 16px"
          >{{ todoInfo ? todoInfo.CompanyName : "" }}——任务审核详情</span
        >
      </div>
    </template>
    <div class="dialog-container">
      <div class="input-container">
        <span>任务描述：</span>
        <el-input
          type="textarea"
          disabled
          :rows="2"
          resize="none"
          v-model="textarea"
        >
        </el-input>
      </div>
      <div class="input-container">
        <span>备注：</span>
        <el-input
          type="textarea"
          placeholder="请输入备注"
          :rows="2"
          resize="none"
          v-model="remake"
        >
        </el-input>
      </div>
    </div>
    <div class="foot-container">
      <el-button type="primary" @click="closeDia('confirm')">确 定</el-button>
      <el-button @click="closeDia('cancel')">取 消</el-button>
    </div>
    <div class="table-container">
        <el-table
			:data="todoData"
      v-if="todoData"
			border
			max-height="300"
			style="width: 100%; margin-top: 20px;margin-bottom: 20px">
            <el-table-column label="任务描述" align="center" prop="Content">
              <template #default="scope">
                {{scope.row['Content']||'--'}}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="CreateTime" :min-width="120">
              <template #default="{row}">
                  <span>
                   {{row['CreateTime']==='0001-01-01T00:00:00Z'?'':moment(row['CreateTime']).format('YYYY-MM-DD HH:mm:ss')}}
                  </span>
              </template>
            </el-table-column>
            <el-table-column label="截止日期" align="center" prop="EndTimeStr" :min-width="120">
              <template #default="scope">
                  <span :style="{color:isLast(scope)&&scope.row['EndTimeStr']?'red':'#606266'}">
                   {{scope.row['EndTimeStr']||'--'}}
                  </span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="Remark" :min-width="120">
              <template #default="scope">
                  <span>
                   {{scope.row['Remark']||'--'}}
                  </span>
              </template>
            </el-table-column>
        </el-table>
    </div>
  </el-dialog>
</template>


<style lang="scss" scoped>
  .dialog-container {
    .input-container {
      display: flex;
      align-items: center;
      font-size: 16px;
      margin-bottom: 30px;
      span{
        width:80px;
        font-size: 14px;
      }
      .el-textarea {
        font-size: 16px;
      }
    }
  }
  .foot-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
     .el-button {
      width: 224px;
      height: 40px;
    }
  }
</style>