<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="类型" prop="type">
        <el-select
          v-model="ruleForm.type"
          class="select_picker"
          filterable
          @change="handleChange"
          placeholder="请选择类型">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select
          v-model="ruleForm.state"
          class="select_picker"
          filterable
          clearable
          placeholder="请选择状态">
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否提醒" prop="isRemind">
        <el-select  v-model="ruleForm.isRemind" placeholder="请选择是否提醒" width>
          <el-option label="否" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提醒时间" prop="remindDate">
        <el-date-picker
      v-model="ruleForm.remindDate"
      type="datetime"
      placeholder="请选择提醒时间">
    </el-date-picker>
      </el-form-item>
      <el-form-item label="待办标题" prop="title" v-if="showSchedule">
          <el-input v-model="ruleForm.title" placeholder="请输入待办标题"/>
      </el-form-item>
      <el-form-item label="待办内容" prop="content" v-if="showSchedule">
        <el-input v-model="ruleForm.content" type="textarea" autosize placeholder="请输入待办内容"/>
      </el-form-item>
      <el-form-item label="待联系人姓名" prop="name" v-if="showContacts" label-width="110px">
          <el-input v-model="ruleForm.name" placeholder="请输入待联系人姓名"/>
      </el-form-item>
      <el-form-item label="待联系人电话" prop="phone" v-if="showContacts" label-width="110px">
        <el-input v-model="ruleForm.phone" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="待联系人电话"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addTodo,editTodo,getTodo } from '@/api/todoManagement/todoList'
import { filterContent } from '@/utils'

export default {
  name: 'AddOrEdit',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        type: 0,
        state: '',
        isRemind: '0',
        remindDate: '',
        title: '',
        content: '',
        name: '',
        phone: '',
      },
      showSchedule:true,//日程展示
      showContacts:false,//联系人展示
      stateList: [
        {
          value:0,
          label:'未完成',
        },
        {
          value:1,
          label:'已完成',
        },
      ], // 待办状态数据
      typeList: [
        {
          value:0,
          label:'日程',
        },
        {
          value:1,
          label:'待联系人',
        },
      ], // 类型数据
      rules: {
        title: [{
          required: true,
          message: '请输入待办标题!',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择类型!',
          trigger: 'blur'
        }],
        state: [{
          required: true,
          message: '请选择状态!',
          trigger: 'change'
        }],
        content: [{
          required: true,
          message: '请输入待办内容!',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入待联系人姓名!',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入待联系人电话!',
          trigger: 'blur'
        }],
        isRemind: [{
          required: true,
          message: '请选择是否提醒!',
          trigger: 'blur'
        }],
      },
      positionData:[],//职位数据
      loading: false
    }
  },
  created() {
    if (this.rowid) {
      this.ruleForm.id = this.rowid
      this.getDetail(this.rowid)
    }
  },
  methods: {
    submitForm() {
      if(this.ruleForm.isRemind==1&&!this.ruleForm.remindDate){
        this.$message.error('请选择提醒时间')
        return
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const datas = {
            F_ID: this.ruleForm.id,
            F_Type: this.ruleForm.type,
            F_Name:this.ruleForm.title,
            F_State:this.ruleForm.state,
            F_IsRemind :this.ruleForm.isRemind,
            F_Remindertime :this.ruleForm.remindDate,
            F_Content: this.ruleForm.content,
            F_PeopleName: this.ruleForm.name,
            F_Tel: this.ruleForm.phone,
          }

          // 添加
          if (!this.rowid) {
            addTodo(datas).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getList() // 重新加载父级数据
                this.$message.success('恭喜你，待办信息添加成功!')
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }
          // 编辑
          editTodo(datas).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.getList() // 重新加载父级数据
              this.$message.success('恭喜你，待办信息编辑成功!')
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    //选择切换
    handleChange(val){
      if(val==0){
        this.ruleForm.name='';
        this.ruleForm.phone='';
        this.showSchedule=true;
        this.showContacts=false;
      }else if(val==1){
        this.ruleForm.title='';
        this.ruleForm.content='';
        this.showSchedule=false;
        this.showContacts=true;
        
      }
      
    },
    // 获取详情
    getDetail(rid) {
      getTodo(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          if(res.F_Type&&res.F_Type==0){
            this.showSchedule=true;
            this.showContacts=false;
          }else if(res.F_Type&&res.F_Type==1){
            this.showSchedule=false;
            this.showContacts=true;
          }
          this.ruleForm.type=res.F_Type;
          this.ruleForm.state=res.F_State;
          this.ruleForm.isRemind=res.F_IsRemind.toString();
          this.ruleForm.remindDate=res.F_Remindertime;
          this.ruleForm.title=res.F_Name;
          this.ruleForm.content=res.F_Content;
          this.ruleForm.name=res.F_PeopleName;
          this.ruleForm.phone=res.F_Tel;
        }
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.date_picker{
		width: 100%;
	}
	div.date_picker input.el-range-input{
		width: 46%;
	}
</style>
