<template>
  <div>
    <q-card flat class="bg-white q-pa-md" style="width:600px;">
      <div class="text-h6">添加客户</div>
      <div style="font-size:12px;" class="text-grey-6 q-my-md">必填资料</div>
      <div class="row q-col-gutter-md">
        <q-input
          class="col-6"
          filled
          v-model="customObj.StuName"
          dense
          label="客户名称"
        ></q-input>
        <q-input
          class="col-6"
          filled
          v-model="customObj.StuTel"
          dense
          full-mask
          mask="###########"
          label="客户电话"
          @blur="checkStuTel(1)"
        ></q-input>
      </div>
      <div class="q-mt-xs row q-col-gutter-md">
        <q-input
          class="col-6"
          filled
          v-model="customObj.QQ"
          dense
          full-mask
          mask="###########"
          label="客户QQ"
          @blur="checkStuTel(2)"
        ></q-input>
        <q-input
          class="col-6"
          filled
          v-model="customObj.WeChatNo"
          dense
          full-mask
          label="客户微信号"
          @blur="checkStuTel(3)"
        ></q-input>
      </div>
      <div class="q-mt-xs row q-col-gutter-md">
        <q-select
          filled
          v-model="customObj.CreateType"
          dense
          :options="customFromList"
          option-label="Name"
          option-value="Id"
          emit-value
          map-options
          label="客户来源"
          behavior="menu"
          class="col-6"
        />
        <q-select
          filled
          v-model="customObj.StuChannel"
          v-if="customObj.CreateType==1"
          label="获客渠道"
          dense
          :options="StuChannelList"
          option-label="Name"
          option-value="Id"
          emit-value
          map-options
          class="col-6"
          behavior="menu"
        />
        <q-select
          filled
          v-model="customObj.CustomerId"
          v-if="customObj.CreateType==2"
          label="关联同行"
          dense
          :options="customList"
          option-label="CustomerName"
          option-value="CustomerId"
          emit-value
          map-options
          class="col-6"
          behavior="menu"
        />
        <q-select
          v-if="customObj.CreateType == 3"
          filled
          v-model="customObj.StuSourceId"
          dense
          @filter="filterEmployee"
          use-input
          :options="myEmployeeList"
          option-label="EmployeeName"
          option-value="Id"
          emit-value
          map-options
          label="关联员工"
          behavior="menu"
          class="col-6"
        />
        <q-select
          v-if="customObj.CreateType == 4"
          filled
          v-model="customObj.StuSourceId"
          dense
          :options="customList"
          option-label="CustomerName"
          option-value="CustomerId"
          emit-value
          map-options
          label="转介人"
          behavior="menu"
          class="col-6"
        />
      </div>
      <div class="q-mt-xs row q-col-gutter-md">
        <q-select
          filled
          v-model="customObj.StuType"
          dense
          :options="customTypeList"
          option-label="Name"
          option-value="Id"
          emit-value
          map-options
          label="客户类型"
          behavior="menu"
          class="col-6"
        />
      </div>
      <div class="q-mt-xs row q-col-gutter-md">
        <q-input
          filled
          v-model="customObj.PlatformName"
          :label="customObj.StuChannel == 6 ? '平台名称' : '其他渠道名称'"
          dense
          class="col-6"
          v-if="customObj.CreateType==1&&(customObj.StuChannel == 6 || customObj.StuChannel == 7)"
        ></q-input>
      </div>
      <div style="font-size:12px;" class="text-grey-6 q-my-md">补充资料</div>
      <div class="row q-col-gutter-md">
        <q-field filled label="性别" stack-label class="col-6" dense>
          <template v-slot:control>
            <el-radio
              v-model="customObj.StuSex"
              :val="0"
              label="男"
              class="q-mr-md"
            ></el-radio>
            <el-radio v-model="customObj.StuSex" :val="1" label="女"></el-radio>
          </template>
        </q-field>
        <q-field
          filled
          label="出生日期"
          stack-label
          class="col-6 cursor-pointer"
          dense
        >
          <template v-slot:append>
            <q-icon name="event"></q-icon>
          </template>
          <template v-slot:control>
            <span>{{ customObj.StuBirth }}</span>
            <q-popup-proxy
              ref="qDateProxy1"
              transition-show="scale"
              transition-hide="scale"
            >
              <q-date
                v-model="customObj.StuBirth"
                minimal
                @input="() => $refs.qDateProxy1.hide()"
              />
            </q-popup-proxy>
          </template>
        </q-field>
        <q-select
          filled
          v-model="customObj.StuStage"
          dense
          :options="customState"
          option-label="Name"
          option-value="Id"
          emit-value
          map-options
          class="col-6"
          label="客户阶段"
          behavior="menu"
        />
        <q-select
          filled
          v-model="customObj.JapanBaseInfo"
          dense
          :options="basicList"
          option-label="Name"
          option-value="Id"
          class="col-6"
          label="日语基础"
          emit-value
          map-options
          behavior="menu"
        />
        <q-input
          filled
          v-model="customObj.StuProfession"
          dense
          class="col-6"
          label="职业"
        ></q-input>
        <q-select
          filled
          v-model="customObj.StuEducation"
          dense
          :options="educationList"
          option-label="Name"
          option-value="Id"
          emit-value
          map-options
          class="col-6"
          label="最高学历"
          behavior="menu"
        />
        <q-select
          filled
          v-model="customObj.StuPurpose"
          dense
          :options="goalsList"
          option-label="Name"
          option-value="Id"
          emit-value
          map-options
          class="col-6"
          label="学习目的"
          behavior="menu"
        />
      </div>
      <q-separator class="q-my-md" />
      <div class="text-right q-py-xs">
        <q-btn
          flat
          color="dark"
          @click="closeForm"
          class="q-mr-md q-px-xs"
          label="取消"
        ></q-btn>
        <q-btn
          unelevated
          color="primary"
          class="q-px-md"
          label="保存"
          @click="saveStu"
        ></q-btn>
      </div>
    </q-card>
  </div>
</template>
<script>
import {
  getStudentInfo, //获取学员客户信息
  queryStuStageList, //获取客户阶段列表
  saveStudent, //保存学员信息
  GetStudentTypeList
} from "../../../api/school/index";
import {
  getGuestBasicsEnumList,
  getGuestEducationEnumList,
  getGuestLearningGoalsEnumList,
  GetStuChannelList,
  CreateTypeList,
  GetCustomerList
} from "../../../api/sale/sale";
import { queryEmployee, queryStudentByTel } from "../../../api/users/user";
export default {
  meta: {
    title: "学员管理"
  },
  components: {},
  props: {
    saveObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      //客户阶段状态列表
      customState: [],
      customMsg: {
        StuId: 0
      },
      //客户对象
      customObj: {
        AssistList: [
          {
            Id: 0, //编号
            AssistId: 1, //员工编号
            AssistType: 1, //类型
            StuId: 1 //学员编号
          }
        ],
        StuSex: 1
      },
      //日语基础列表
      basicList: [],
      //学历列表
      educationList: [],
      //学习目的列表
      goalsList: [],
      //员工列表
      employeeList: [],
      myEmployeeList: [],
      customFromList: [],
      StuChannelList: [], //收客渠道
      AssistDropList: [], //协助人员
      customList:[],
      customTypeList:[] //客户类型
    };
  },
  created() {
    this.getStuStageList();
    this.getBasicList();
    this.queryGuestEducationEnumList();
    this.queryGoalsList();
    this.getEmployeeList();
    this.GetStuChannelList();
    this.getCustomFrom();
    this.GetCustomerList();
    this.getCustomTypeList();
    if (this.saveObj && this.saveObj.StuId > 0) {
      this.customMsg.StuId = this.saveObj.StuId;
      this.queryStuInfo();
    }
  },
  mounted() {},
  methods: {
    //获取客户来源
    getCustomFrom() {
      CreateTypeList({}).then(res => {
        if (res.Code == 1) {
          this.customFromList = res.Data;
        }
      });
    },
    checkStuTel(type) {
      //验证手机
      if(type==1){
        if (this.customObj.StuTel && this.customObj.StuTel.length == 11) {
          queryStudentByTel({ StuTel: this.customObj.StuTel, QQ:'', WeChatNo:'' }).then(r => {
            if (r.Data) {
              this.$emit("success", r.Data, 1);
            }
          });
        }
      }
      //验证QQ
      if(type==2){
        if (this.customObj.QQ) {
          queryStudentByTel({ StuTel: '', QQ:this.customObj.QQ , WeChatNo:'' }).then(r => {
            if (r.Data) {
              this.$emit("success", r.Data, 1);
            }
          });
        }
      }
      //验证微信
      if(type==3){
        if (this.customObj.WeChatNo) {
          queryStudentByTel({ StuTel: '', QQ:'' , WeChatNo:this.customObj.WeChatNo }).then(r => {
            if (r.Data) {
              this.$emit("success", r.Data, 1);
            }
          });
        }
      }
    },
    validate() {
      let msg = "";
      if (!this.customObj.StuName) {
        msg = "请输入客户名称";
      } else if (!this.customObj.StuTel && !this.customObj.QQ && !this.customObj.WeChatNo) {
        msg = "请至少输入一个手机号QQ号微信号";
      } else if (!this.customObj.CreateType) {
        msg = "请选择客户来源";
      } else if (!this.customObj.StuChannel) {
        msg = "请选择客户获客渠道";
      } else if (
        this.customObj.StuChannel == 6 ||
        this.customObj.StuChannel == 7
      ) {
        if (!this.customObj.PlatformName) {
          msg = "请填写具体渠道信息";
        }
      }
      return msg;
    },
    //保存学员信息
    saveStu() {
      let msg = this.validate();
      if (msg) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: msg
        });
        return;
      }
      saveStudent(this.customObj).then(res => {
        if (res.Code == 1) {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "数据保存成功！",
            position: "top"
          });
          this.$emit("success", res.Data, 0);
        }
      });
    },
    closeForm() {
      this.$emit("close");
    },
    //获取员工列表
    getEmployeeList() {
      queryEmployee({
        IsLeave: 1
      }).then(res => {
        this.employeeList = res.Data;
        this.myEmployeeList = res.Data;
      });
    },
    //获取收客渠道
    GetStuChannelList() {
      GetStuChannelList({}).then(res => {
        if (res.Code == 1) {
          this.StuChannelList = res.Data;
        }
      });
    },
    //筛选员工
    filterEmployee(val, update, abort) {
      update(() => {
        this.myEmployeeList = this.employeeList.filter(
          v => v.EmployeeName.indexOf(val) > -1
        );
      });
    },
    //获取日语基础列表
    getBasicList() {
      getGuestBasicsEnumList({}).then(res => {
        this.basicList = res.Data;
      });
    },
    //获取学历列表
    queryGuestEducationEnumList() {
      getGuestEducationEnumList({}).then(res => {
        this.educationList = res.Data;
      });
    },
    //获取学习目的列表
    queryGoalsList() {
      getGuestLearningGoalsEnumList({}).then(res => {
        this.goalsList = res.Data;
      });
    },
    //获取客户阶段列表
    getStuStageList() {
      queryStuStageList().then(res => {
        this.customState = res.Data;
      });
    },
    //获取客户下拉数据
    GetCustomerList() {
      GetCustomerList().then(res => {
        if (res.Code == 1) {
          this.customList = res.Data;
        }
      })
    },
    //获取客户类型
    getCustomTypeList(){
      GetStudentTypeList().then(res => {
        if (res.Code == 1) {
          this.customTypeList = res.Data;
        }
      })
    },
    queryStuInfo() {
      getStudentInfo({
        StuId: this.customMsg.StuId
      }).then(res => {
        if (res.Code == 1) {
          this.customObj = res.Data;
        }
      });
    },
    //新增协助人员
    addAssist() {
      let obj = {
        Id: 0, //编号
        AssistId: 1, //员工编号
        AssistType: 1, //类型
        StuId: 1 //学员编号
      };
      this.customObj.AssistList.push(obj);
    },
    //删除协助人员
    delAssist(index) {
      this.customObj.AssistList.splice(index, 1);
    }
  }
};
</script>
