<template>
  <el-dialog
    v-if="ischeckToDoDialogShow"
    :visible.sync="ischeckToDoDialogShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="889px"
    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="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 slot-scope="scope">
                {{scope.row['Content']||'--'}}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="CreateTime" :min-width="120">
              <template slot-scope="{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 slot-scope="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 slot-scope="scope">
                  <span>
                   {{scope.row['Remark']||'--'}}
                  </span>
              </template>
            </el-table-column>
        </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
  name: "",
  components: {},
  props: {
    ischeckToDoDialogShow: {
      type: Boolean,
      default: false,
    },//控制弹窗展示
    todoInfo: {
      type: Object,
    },//todo的info
  },
  data() {
    return {
      textarea: "", //任务描述
      remake:"",//任务备注
      activeTab: 1,
      todoData:[],//表格数据
      todoId:0,//任务的id
    };
  },
  computed: {
  },
   watch:{
     ischeckToDoDialogShow(){
      if(!this.ischeckToDoDialogShow) return 
      //获取历史记录
      customInterence.getHistory({
        CompanyId:this.todoInfo.CompanyId
      }).then(res=>{
        if(res.Ret===200){
          this.todoData = res.Data
        }
      })
      //获取最新记录
      customInterence.getToDoItem({
          CompanyId:this.todoInfo.CompanyId
        }).then(res=>{
          if(res.Ret===200&&res.Data){
            this.textarea = res.Data[0].Content
            this.todoId = res.Data[0].Id
            this.remake = res.Data[0].Remark||''
          }
      })
     },
  },
  created() {
  },
  mounted() {},
  methods: {
    closeDia(type) {
       if(type==='confirm'){
        this.$emit('check',{Id:this.todoId,Remark:this.remake})
      }else{
        this.$emit("update:ischeckToDoDialogShow", false);
      }
      this.textarea= ""
      this.remake=""
      this.todoData=[]
      this.todoId=0
    },
    isLast(info){
      if(info.$index===this.todoData.length-1){
        return true
      }else{
        return false
      }
    }
  },
};
</script>
<style scoped lang="scss">
.el-dialog {
  .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;
    }
  }
  .table-container{

  }
}
</style>
