<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="校区ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="schoolDistrictId">
              <j-dict-select-tag type="list" v-model="model.schoolDistrictId" dictCode="school_organization,name,id" placeholder="请选择校区ID" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入姓名"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex">
              <j-dict-select-tag type="list" v-model="model.sex" dictCode="sex" placeholder="请选择性别" />
            </a-form-model-item>
          </a-col>
           <a-col :span="8">
            <a-form-model-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <j-date placeholder="请选择生日" v-model="model.birthday"  style="width: 100%" @change="handleDateChange"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="年龄" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              {{age}}
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="家长电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactPhone">
              <a-input v-model="model.contactPhone" placeholder="请输入家长电话"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="学校" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="school">
              <j-dict-select-tag type="list" v-model="model.school" dictCode="school_school,name,id" placeholder="请选择学校" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="年级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="grade">
              <j-dict-select-tag type="list" v-model="model.grade" dictCode="customer_grade" placeholder="请选择年级" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="渠道类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="channelType">
  	          <j-tree-select
                ref="treeSelect"
                placeholder="请选择渠道类型"
                v-model="model.channelType"
                dict="promotion_channel,name,id"
                pidValue="0"
                >
              </j-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="意向课程" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="intendedCourse">
              <j-dict-select-tag type="list" v-model="model.intendedCourse" dictCode="education_course,name,id" placeholder="请选择意向课程" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="顾问" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="saleCode">
              <j-select-user-by-dep v-model="model.saleCode" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="推荐人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="referencesPhone">
              <a-input v-model="model.referencesPhone" placeholder="请输入推荐人"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="采单员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="collectinoCode">
              <j-select-user-by-dep v-model="model.collectinoCode" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="customer_pc_status" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="班级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classes">
              <a-input v-model="model.classes" placeholder="请输入班级"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" pull="8" >
            <a-form-model-item style="margin-left: 122px;width: 133.5%" label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" :maxlength="16" prop="markString">
              <a-textarea v-model="model.markString" rows="4" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { getAge } from '@/utils/util';
  export default {
    name: 'CustomerPotentialForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
            intendedDegress:1,
            status:0,
            followStatus:0,
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           schoolDistrictId: [
              { required: true, message: '请输入校区ID!'},
           ],
           name: [
              { required: true, message: '请输入姓名!'},
           ],
           sex: [
              { required: true, message: '请输入性别!'},
           ],
           contactPhone: [
              { required: true, message: '请输入家长电话!'},
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
           ],
           contact1Phone: [
              { required: false},
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
           ],
           contact2Phone: [
              { required: false},
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
           ],
           idCard: [
              { required: false},
              { validator: (rule, value, callback) => validateDuplicateValue('customer_potential', 'id_card', value, this.model.id, callback)},
           ],
        },
        url: {
          add: "/customer/customerInfo/add",
          edit: "/customer/customerInfo/edit",
          queryById: "/customer/customerInfo/queryById"
        },
        age: undefined,
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      handleDateChange() {
        this.age = getAge(this.model.birthday);
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>