<template>
  <div>
    <el-dialog :title="dialogTitle" append-to-body width="800px"
    :visible.sync="visible" @closed="closeDia" :close-on-click-modal="false">
      <div style="padding: 10px 20px 35px 20px;">
        <el-form :model="todoForm" label-width="92px" 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>
  </div>
</template>

<script>
import { customInterence } from '../../../api/modules/crmApi';


  export default {
    name:"todoDialogEn",
    props:{
      visible:{
        type:Boolean,
        required:true
      },
      // todo数据
      todoInfo:{
        type:Object,
        required:true
      },
      // 新建、编辑、完成
      optionType:{
        type:String,
        default:'新建'
      }
    },
    computed:{
      dialogTitle(){
        return this.todoInfo.CompanyName+"——任务详情"
      }
    },
    watch:{
      visible(newVal){
        if(!newVal) return 
        this.todoForm.CompanyId=this.todoInfo.CompanyId
        if(this.optionType!='新建'){
          customInterence.todoEditListEn({CompanyId:this.todoInfo.CompanyId}).then(res=>{
            this.todoForm.Description = res.Data[0].Content
            this.todoForm.Createtime = res.Data[0].CreateTime
            this.todoForm.EndTime = res.Data[0].EndTimeStr
            this.todoForm.Id = res.Data[0].Id
          })
        }
      }
    },
    data() {
      return {
        todoForm:{
          CompanyId:0,
          Id:0,
          Description:"",
          EndTime:"",
          Createtime:"",
          Remark:""
        }
      }
    },
    methods: {
      // 确认提交
      todoConfirm(){
        console.log(this.todoForm);
        
        this.$refs.todoFormRef.validate(valid=>{
          if(valid){
            this.$emit("todoConfirm",this.todoForm)
            // this.closeDia()
          }
        })
      },
      // 关闭弹窗
      closeDia(){
        this.$emit("update:visible",false)
        this.todoForm={
          CompanyId:0,
          Description:"",
          EndTime:"",
          Createtime:"",
          Remark:""
        }
        this.$nextTick(()=>{
          this.$refs.todoFormRef.clearValidate()
        })
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>