<script setup>
import { reactive, ref,nextTick,computed,watch } from "vue";
import { customInterence } from '@/api/modules/crmApi';

const props = defineProps({
  visible:{
    type:Boolean,
    required:true
  },
  // todo数据
  todoInfo:{
    type:Object,
    required:true
  },
  // 新建、编辑、完成
  optionType:{
    type:String,
    default:'新建'
  }
})
const emit = defineEmits(['todoFormRef','close'])

const dialogTitle = computed(() =>{
  return props.todoInfo.CompanyName+"——任务详情"
})

const todoForm = reactive({
  CompanyId:0,
  Id:0,
  Description:"",
  EndTime:"",
  Createtime:"",
  Remark:""
})
const todoFormRef = ref(null)
// 确认提交
function todoConfirm(){
  
  todoFormRef.value.validate(valid=>{
    if(valid){
      emit("todoConfirm",todoForm)
      closeDia()
    }
  })
}

// 关闭弹窗
function closeDia(){
  emit("close")

  todoForm.CompanyId=0,
  todoForm.Description="",
  todoForm.EndTime="",
  todoForm.Createtime="",
  todoForm.Remark=""

  nextTick(()=>{
    todoFormRef.value.clearValidate()
  })
}

watch(
  () => props.visible,
  (newVal)=>{
    if(!newVal) return 
    todoForm.CompanyId=props.todoInfo.CompanyId
    if(props.optionType!='新建'){
      customInterence.todoEditListEn({CompanyId:props.todoInfo.CompanyId}).then(res=>{
        todoForm.Description = res.Data[0].Content
        todoForm.Createtime = res.Data[0].CreateTime
        todoForm.EndTime = res.Data[0].EndTimeStr
        todoForm.Id = res.Data[0].Id
      })
    }
  }
)

</script>
<template>
  <el-dialog
    :title="dialogTitle"
    append-to-body
    width="800px"
    :model-value="visible"
    @closed="closeDia"
    :close-on-click-modal="false"
  >
    <div style="padding: 10px 20px 35px 20px">
      <el-form :model="todoForm" label-width="100px" ref="todoFormRef">
        <el-form-item
          label="任务描述："
          prop="Description"
          :rules="{
            required: true,
            message: '任务描述不能为空',
            trigger: 'blur',
          }"
        >
          <el-input
            v-model="todoForm.Description"
            resize="none"
            :rows="10"
            placeholder="请输入任务描述"
            type="textarea"
            :disabled="optionType == '完成'"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="创建时间："
          prop="Createtime"
          v-if="optionType == '完成'"
          :rules="{
            required: true,
            message: '创建时间不能为空',
            trigger: 'blur',
          }"
        >
          <span>{{ todoForm.Createtime }}</span>
        </el-form-item>
        <el-form-item
          label="截止日期："
          prop="EndTime"
          :rules="{
            required: true,
            message: '截止日期不能为空',
            trigger: 'change',
          }"
        >
          <el-date-picker
            v-model="todoForm.EndTime"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
            :clearable="false"
            style="width: 329px"
            v-if="optionType != '完成'"
          ></el-date-picker>
          <span v-else>{{ todoForm.EndTime }}</span>
        </el-form-item>
        <el-form-item label="备注：" prop="Remark" v-if="optionType == '完成'">
          <el-input
            v-model="todoForm.Remark"
            resize="none"
            :rows="2"
            placeholder="请输入备注"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top: 40px; text-align: center">
        <el-button
          type="primary"
          style="width: 120px; margin-right: 10px"
          @click="todoConfirm"
          >确定</el-button
        >
        <el-button style="width: 120px" @click="closeDia">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<style scoped lang="scss"></style>
