<template>
    <el-dialog title="邀约" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="600px" @close="closeDialog">
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px" :disabled="dialogForm.invitationId != undefined">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="dialogForm.phone" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="场地" prop="placeId">
            <el-select v-model="dialogForm.placeId" filterable placeholder="请选择" clearable style="width: 100%;" @change="getCoaChes">
              <el-option v-for="dict in placeOptions" :key="dict.placeId" :label="dict.name" :value="dict.placeId" />
            </el-select>
        </el-form-item>
        <el-form-item label="约定时间" prop="invitationTime">
          <el-date-picker clearable
            v-model="dialogForm.invitationTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            placeholder="请选择约定时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dialogForm.remark" type="textarea" placeholder="请输入" />
        </el-form-item>
      </el-form>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="(visible = false)">取消</el-button>
        <el-button v-jclick type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </template>
    <script>
  import { addInvitation, getInvitationByClue } from '@/api/zs/invitation';
  import { getAllPlaces } from '@/api/sch/place';

  export default {
    name: 'InvitationFormDialog',
  
    data() {
      return {
        visible: false,
        canSubmit: true,
        dialogForm: {
            invitationId: undefined,
            clueId: undefined,
            name: undefined,
            phone: undefined,
            address: undefined,
            placeId: undefined,
            invitationTime: undefined,
            remark: undefined
        },
        rules: {
          name: { required: true, message: '姓名不能为空', trigger: 'blur'},
          phone: { required: true, message: '姓名不能为空', trigger: 'blur'},
          placeId: { required: true, message: '场地不能为空', trigger: 'blur'},
          placeId: { required: true, message: '场地不能为空', trigger: 'blur'},
          invitationTime: { required: true, message: '约定时间不能为空', trigger: 'blur'}

        },
        placeOptions:[]
      };
    },
    methods: {
       init(info = undefined) {
        this.visible = true;
        this.getPlaces()
        this.$nextTick(() => {
          this.resetDialogForm();
          this.$refs['dialogForm'].resetFields();
          if (info) {
            this.dialogForm = {
                invitationId: undefined,
                clueId: info.clueId,
                name: info.name,
                phone: info.phone,
                address: info.address,
                placeId: undefined,
                invitationTime: undefined,
                remark: undefined
            };
            if(info.clueId){
                getInvitationByClue({clueId:info.clueId}).then(resp => {
                if(resp.data){
                    this.dialogForm = resp.data;
                } 
              })
            }
          }
        });
      },
      resetDialogForm() {
        this.dialogForm = {
            invitationId:undefined,
            clueId: undefined,
            name: undefined,
            phone: undefined,
            address: undefined,
            placeId: undefined,
            invitationTime: undefined,
            remark: undefined
        };
      },
      closeDialog() {
        this.$emit('update:dialog.batchUpdateVisible', false);
      },
      async getInvitationInfo(clueId){
        l
      },
      // 表单提交
      dialogFormSubmit() {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            this.canSubmit = false;
            // 校验完成，调接口
            addInvitation(this.dialogForm)
              .then((resp) => {
                this.canSubmit = true;
                if (resp.code == 200) {
                  this.$message.success('邀约成功');
                  this.$emit('refreshDataList');
                  this.visible = false;
                }
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        });
      },
      getPlaces () {
        getAllPlaces({ status: '0' }).then((resp) => {
            this.placeOptions = resp.data;
        });
      },
    }
  };
    </script>
    
    