<style>
  .info_title {
    padding: 0 22px;
    margin-bottom: 20px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: Microsoft YaHei, Avenir, Helvetica, Arial, sans-serif !important;
  }

  .customer_info_component {
    width: 100%;
  }

  .customer_info_Stage {
    width: 100%;
    padding: 0 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 22px;
    justify-content: space-between;
  }

  .stage_label {
    color: #606266;
    flex-shrink: 0;
    width: 65px;
    text-align: right;
  }

  .stage_value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .info_content {
    margin-bottom: 30px;
  }

  .info_item {
    position: relative;
    display: flex;
    padding: 12px 22px;
    align-items: center;
  }

  .item_value {
    flex: 1;
    font-size: 14px;
    word-break: break-all;
    overflow: hidden;
  }

  .item_label {
    color: #606266;
    flex-shrink: 0;
    width: 120px;
    font-size: 14px;
  }

  .student_require {
    color: red;
  }

</style>
<template>
  <div>
    <div class="info_title">客户管理</div>
    <div class="info_content" style="margin-bottom:0;">
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            <span class="student_require">*</span>客户名称
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.StuName" style="width:185px;" ref="StuName" dense></q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            客户电话
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.StuTel" style="width:185px;" @blur="CheckExistsStu(1)" ref="StuTel"
              dense>
            </q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            QQ
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.QQ" style="width:185px;" @blur="CheckExistsStu(2)"
              @keyup.native="checkInteger(customObj,'QQ')" ref="QQ" dense></q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            微信号
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.WeChatNo" @blur="CheckExistsStu(3)" style="width:185px;" ref="WeChatNo"
              dense></q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            <span class="student_require">*</span>客户来源
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.CreateType" @change="clearStuMsg()" style="width:185px;" @input="resetStuSource()" dense
              :options="customFromList" option-label="Name" option-value="Id" emit-value map-options label="客户来源" />
          </div>
        </div>
      </div>
      <div class="customer_info_component" v-if="customObj.CreateType==3">
        <div class="customer_info_Stage">
          <div class="stage_label">
            介绍人
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuSourceId" style="width:185px;" dense @filter="filterEmployee" use-input
              :options="myEmployeeList" option-label="EmployeeName" option-value="Id" emit-value map-options />
          </div>
        </div>
      </div>
      <div class="customer_info_component" v-if="customObj.CreateType==4">
        <div class="customer_info_Stage">
          <div class="stage_label">
            转介人
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuSourceId" style="width:185px;" use-input @filter="filterStudent" dense :options="MyTransListData"
              option-label="StuName" option-value="StuId" emit-value map-options />
          </div>
        </div>
      </div>
      <div class="customer_info_component" v-if="customObj.CreateType==1">
        <div class="customer_info_Stage">
          <div class="stage_label">
            收客渠道
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuChannel" style="width:185px;" dense :options="StuChannelList" option-label="Name"
              option-value="Id" emit-value map-options />
          </div>
        </div>
      </div>
      <div class="customer_info_component" v-if="customObj.CreateType==2">
        <div class="customer_info_Stage">
          <div class="stage_label">
            关联同行
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.CustomerId" style="width:185px" dense :options="customList" option-label="CustomerName"
              option-value="CustomerId" emit-value map-options />
          </div>
        </div>
      </div>
      <template v-if="customObj.CreateType==1">
        <div class="info_item" v-if="customObj.StuChannel==6">
          <div class="item_label">第三方平台名称</div>
          <div class="item_value">
            <q-input filled v-model="customObj.PlatformName" dense></q-input>
          </div>
        </div>
        <div class="info_item" v-if="customObj.StuChannel==7">
          <div class="item_label">其他平台名称</div>
          <div class="item_value">
            <q-input filled v-model="customObj.PlatformName" dense></q-input>
          </div>
        </div>
      </template>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            客户类型
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuType" style="width:185px" dense :options="customTypeList" option-label="Name"
              option-value="Id" emit-value map-options label="客户类型" />
          </div>
        </div>
      </div>
      <div class="custom_Line"></div>
      <div class="info_title">基本资料</div>
      <div class="info_content">
        <div class="info_item">
          <div class="item_label">性别</div>
          <div class="item_value">
            <q-radio v-model="customObj.StuSex" :val="0" label="男" />
            <q-radio v-model="customObj.StuSex" :val="1" label="女" />
          </div>
        </div>
        <div class="info_item studentDate">
          <div class="item_label">出生日期</div>
          <div class="item_value">
            <q-field filled dense>
               <template v-slot:control>
                <el-date-picker v-model="customObj.StuBirth" size="mini" style="width:150px" type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">客户阶段状态</div>
          <div class="item_value">
            <q-select filled v-model="customObj.StuStage" dense :options="customState" option-label="Name"
              option-value="Id" emit-value map-options label="客户状态" />
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">日语基础</div>
          <div class="item_value">
            <q-select filled v-model="customObj.JapanBaseInfo" dense :options="basicList" option-label="Name"
              option-value="Id" emit-value map-options />
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">职业</div>
          <div class="item_value">
            <q-input filled v-model="customObj.StuProfession" dense></q-input>
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">学历</div>
          <div class="item_value">
            <q-select filled v-model="customObj.StuEducation" dense :options="educationList" option-label="Name"
              option-value="Id" emit-value map-options />
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">学习目的</div>
          <div class="item_value">
            <q-select filled v-model="customObj.StuPurpose" dense :options="goalsList" option-label="Name"
              option-value="Id" emit-value map-options />
          </div>
        </div>
        <!-- <div class="info_item">
          <div class="item_label">创建人</div>
          <div class="item_value">
            <q-select filled v-model="customObj.CreateBy" dense disable @filter="filterEmployee" use-input
              :options="myEmployeeList" option-label="EmployeeName" option-value="Id" emit-value map-options />
          </div>
        </div> -->
        <div class="info_item">
          <q-btn color="accent" class="q-mr-md" label="保存" @click="saveStu()" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getStudentInfo, //获取学员客户信息
    queryStuStageList, //获取客户阶段列表
    saveStudent, //保存学员信息
    GetStudentTypeList,
    getStudentDorpDownList
  } from '../../../api/school/index';
  import {
    getGuestBasicsEnumList,
    getGuestEducationEnumList,
    getGuestLearningGoalsEnumList,
    GetStuChannelList,
    CreateTypeList,
    CheckExistsStu,
    GetCustomerList
  } from '../../../api/sale/sale'
  import {
    queryEmployee
  } from '../../../api/users/user'
  export default {
    meta: {
      title: "学员管理"
    },
    components: {

    },
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      AddType: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        //客户阶段状态列表
        customState: [],
        customMsg: {
          StuId: 0,
        },
        //客户对象
        customObj: {
          StuId: 0,
          StuName: '', //客户名称
          StuTel: '', //客户电话
          CreateType: '', //客户来源
          StuSourceId: '', //介绍人
          StuChannel: '', //收客渠道
          PlatformName: '', //平台名称
          StuSex: 0, //性别
          StuBirth: '', //出生日期
          StuStage: '', //客户阶段状态
          JapanBaseInfo: '', //日语基础
          StuProfession: '', //职业
          StuEducation: '', //学历
          StuPurpose: '', //学习目的
          CreateBy: '', //创建人
          CustomerId: 0, //关联同行
          QQ: '', //qq
          WeChatNo: '', //微信号
          StuType: '' //客户类型
        },
        //日语基础列表
        basicList: [],
        //学历列表
        educationList: [],
        //学习目的列表
        goalsList: [],
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        StuChannelList: [], //收客渠道
        AssistDropList: [], //协助人员
        customFromList: [], //客户来源
        customTypeList: [], //客户类型
        customList: [],
        TransListData:[], //转介人数据
        MyTransListData:[],
        checkMsg: {
          StuId: 0,
          StuTel: '',
          QQ: '',
          WeChatNo: ''
        }
      }
    },
    created() {
      this.getStuStageList();
      this.getBasicList();
      this.queryGuestEducationEnumList();
      this.queryGoalsList();
      this.getEmployeeList();
      this.GetStuChannelList();
      this.getCustomFrom();
      this.GetCustomerList();
      this.getCustomTypeList();
      this.getStudentDorpDown();
      if (this.saveObj && this.saveObj.StuId > 0) {
        this.customMsg.StuId = this.saveObj.StuId;
        this.checkMsg.StuId = this.saveObj.StuId;
        this.queryStuInfo();
      }
    },
    mounted() {},
    methods: {
      //保存学员信息
      saveStu() {
        if (this.customObj.StuName == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请输入客户名称`
          })
          return
        }
        if (this.customObj.StuTel == '' && this.customObj.QQ == '' && this.customObj.WeChatNo == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请输入电话QQ微信至少一个`
          })
          return
        }
        if (this.customObj.CreateType == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择客户来源`
          })
          return
        }
        if (this.customObj.StuTel != '') {
          var myreg = /^[1][3-9][\d]{9}/;
          if (!myreg.test(this.customObj.StuTel)) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请输入正确的电话号码`
            })
            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');
            this.$emit('getrecord');
            if (this.AddType == 1) {
              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;
        })
      },
      //获取客户来源
      getCustomFrom() {
        CreateTypeList({}).then(res => {
          if (res.Code == 1) {
            this.customFromList = 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;
          }
        })
      },
      //获取转介人下拉
      getStudentDorpDown(){
        getStudentDorpDownList().then(res => {
          console.log(res,'res');
          if (res.Code == 1) {
            this.TransListData = res.Data;
            this.MyTransListData = res.Data;
          }
        })
      },
      //筛选转介人
      filterStudent(val, update, abort){
        update(() => {
          this.MyTransListData = this.TransListData.filter(
            v => v.StuName.indexOf(val) > -1
          );
        });
      },
      queryStuInfo() {
        getStudentInfo({
          StuId: this.customMsg.StuId
        }).then(res => {
          if (res.Code == 1) {
            var tempDate = res.Data;
            this.customObj.StuId = tempDate.StuId;
            this.customObj.StuName = tempDate.StuName;
            this.customObj.StuTel = tempDate.StuTel;
            this.customObj.CreateType = tempDate.CreateType;
            this.customObj.StuSourceId = tempDate.StuSourceId;
            this.customObj.StuChannel = tempDate.StuChannel;
            this.customObj.PlatformName = tempDate.PlatformName;
            this.customObj.StuSex = tempDate.StuSex;
            this.customObj.StuBirth = tempDate.StuBirth;
            this.customObj.StuStage = tempDate.StuStage;
            this.customObj.JapanBaseInfo = tempDate.JapanBaseInfo;
            this.customObj.StuProfession = tempDate.StuProfession;
            this.customObj.StuEducation = tempDate.StuEducation;
            this.customObj.StuPurpose = tempDate.StuPurpose;
            this.customObj.CreateBy = tempDate.CreateBy;
            this.customObj.CustomerId = tempDate.CustomerId;
            this.customObj.StuType = tempDate.StuType;
            this.customObj.QQ = tempDate.QQ;
            this.customObj.WeChatNo = tempDate.WeChatNo;
          }
        });
      },
      //新增协助人员
      addAssist() {
        let obj = {
          Id: 0, //编号
          AssistId: 1, //员工编号
          AssistType: 1, //类型
          StuId: 1, //学员编号
        }
        this.customObj.AssistList.push(obj);
      },
      //删除协助人员
      delAssist(index) {
        this.customObj.AssistList.splice(index, 1);
      },
      //验证手机号
      CheckExistsStu(type) {
        if (type == 1) {
          if (this.customObj.StuTel && this.customObj.StuTel.length == 11) {
            this.checkMsg.StuTel = this.customObj.StuTel
            this.checkMsg.QQ = '';
            this.checkMsg.WeChatNo = '';
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
        if (type == 2) {
          if (this.customObj.QQ) {
            this.checkMsg.StuTel = '';
            this.checkMsg.QQ = this.customObj.QQ;
            this.checkMsg.WeChatNo = '';
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
        if (type == 3) {
          if (this.customObj.WeChatNo) {
            this.checkMsg.StuTel = ''
            this.checkMsg.QQ = '';
            this.checkMsg.WeChatNo = this.customObj.WeChatNo;
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
      },
      //切换客户来源重置
      resetStuSource() {
        this.customObj.StuChannel = '';
        this.customObj.CustomerId = '';
        this.customObj.StuSourceId = '';
        this.customObj.PlatformName = '';
      },
    }
  }

</script>
