<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.StuRealMobile" 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: [], //收客渠道
        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.StuRealMobile && this.customObj.StuRealMobile.length == 11) {
            queryStudentByTel({
              StuRealMobile: this.customObj.StuRealMobile,
              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.StuRealMobile && !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>