<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 {
    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;
  }

  .stuHeadImg {
    width: 80px;
    height: 80px;
    position: relative;
  }

  .stage_value .q-field__native span {
    width: 100%;
    overflow: hidden;
  }
</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">头像</div>
          <div class="stage_value">
            <div class="stuHeadImg">
              <el-upload :before-upload="uploadFile" :multiple="false" action="" :show-file-list="false">
                <q-avatar size="80px" font-size="36px" text-color="white">
                  <img :src="customObj.StuIcon" v-if="customObj.StuIcon" />
                  <img v-else src="../../../assets/images/administration/litheader.png" alt="" />
                </q-avatar>
              </el-upload>
            </div>
          </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-input filled v-model="customObj.StuName" style="width:185px;" ref="StuName" dense :disable="noEdit">
            </q-input>
          </div>
        </div>
      </div>
      <!-- <div class="customer_info_component" v-if="BelongType==3">
        <div class="customer_info_Stage">
          <div class="stage_label">
            客户电话
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.StuTel" style="width:185px;" 
              ref="StuRealMobile" :disable="noEdit" 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.StuRealMobile" style="width:185px;" @blur="CheckExistsStu(1)"
              ref="StuRealMobile" :disable="noEdit" dense>
            </q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component" v-if="BelongType != 3">
        <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)" :disable="noEdit"
              @keyup.native="checkInteger(customObj, 'QQ')" ref="QQ" dense></q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component" v-if="BelongType != 3">
        <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"
              :disable="noEdit" dense></q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage items-center">
          <div class="stage_label">
            <span class="student_require">*</span>客户状态
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuStage" dense :options="customState" option-label="Name"
              :disable="noEdit" style="width:185px;" option-value="Id" emit-value map-options label="客户状态" />
          </div>
        </div>
      </div>
      <template v-if="IsShowStuSourceIdName(customObj)">
        <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;"
                :disable="noEdit || isHaveOrder" @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">
              <span class="student_require">*</span>介绍人
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.StuSourceId" style="width:185px;" dense @filter="filterEmployee"
                :disable="noEdit || isHaveOrder" 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">
              <span class="student_require">*</span>转介人
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.StuSourceId" style="width:185px;" use-input @filter="filterStudent"
                :disable="noEdit || isHaveOrder" 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">
              <span class="student_require">*</span>收客渠道
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.StuChannel" style="width:185px;" dense :options="StuChannelList"
                :disable="noEdit || isHaveOrder" option-label="Name" option-value="Id" emit-value map-options use-input
                @filter="filterStuChannel">
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      未找到相关数据
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>
        </div>
        <div class="customer_info_component" v-if="customObj.CreateType == 2">
          <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.StuSourceId" style="width:185px" dense :options="customList" use-input
                :disable="noEdit || isHaveOrder" @filter="filterFn" option-label="CustomerName"
                option-value="CustomerId" emit-value map-options>
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      未找到相关数据
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>
        </div>
        <template v-if="customObj.CreateType == 1">
          <div class="info_item" v-if="customObj.StuChannel == 17">
            <div class="item_label">第三方平台名称</div>
            <div class="item_value">
              <q-input filled v-model="customObj.PlatformName" dense :disable="noEdit"></q-input>
            </div>
          </div>
          <div class="info_item" v-if="customObj.StuChannel == 20">
            <div class="item_label">其他平台名称</div>
            <div class="item_value">
              <q-input filled v-model="customObj.PlatformName" dense :disable="noEdit"></q-input>
            </div>
          </div>
        </template>
      </template>
      <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.StuType" style="width:185px" dense :options="customTypeList"
              :disable="noEdit" option-label="Name" option-value="Id" emit-value map-options label="客户类型" />
          </div>
        </div>
      </div>
      <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.StuNeeds" style="width:185px" dense :options="NeedData"
              :disable="noEdit" 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="男" :disable="noEdit" />
            <q-radio v-model="customObj.StuSex" :val="1" label="女" :disable="noEdit" />
          </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"
                  :disabled="noEdit" 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.JapanBaseInfo" dense :options="basicList" option-label="Name"
              :disable="noEdit" 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 :disable="noEdit"></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"
              :disable="noEdit" 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"
              :disable="noEdit" option-value="Id" emit-value map-options />
          </div>
        </div>
        <div class="info_item" v-if="!noEdit">
          <q-btn color="accent" class="q-mr-md" label="保存" @click="saveStu()" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getStudentInfo, //获取学员客户信息
    queryStuStageList, //获取客户阶段列表
    saveStudent, //保存学员信息
    GetStudentTypeList,
    getStudentDorpDownList,
    GetNeedsList
  } from "../../../api/school/index";
  import {
    getGuestBasicsEnumList,
    getGuestEducationEnumList,
    getGuestLearningGoalsEnumList,
    GetStuChannelList,
    CreateTypeList,
    CheckExistsStu,
    GetCustomerList
  } from "../../../api/sale/sale";
  import {
    queryEmployee
  } from "../../../api/users/user";
  import {
    queryStuOrderPage //学员订单分页列表
  } from "../../../api/customerstudent/customerstudent";
  import {
    UploadSelfFile
  } from "../../../api/common/common";

  export default {
    meta: {
      title: "学员管理"
    },
    components: {},
    props: {
      stuData: {
        type: Object,
        default: null
      },
      saveObj: {
        type: Object,
        default: null
      },
      AddType: {
        type: Number,
        default: null
      },
      //1-当前登录人自己创建,3-不是当前登录人创建
      BelongType: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        //客户阶段状态列表
        customState: [],
        customMsg: {
          StuId: 0
        },
        //客户对象
        customObj: {
          StuId: 0,
          StuIcon: "", //学院头像
          StuName: "", //客户名称
          StuRealMobile: "", //客户电话
          CreateType: "", //客户来源
          StuSourceId: "", //介绍人
          StuChannel: "", //收客渠道
          PlatformName: "", //平台名称
          StuSex: 0, //性别
          StuBirth: "", //出生日期
          StuStage: "", //客户阶段状态
          JapanBaseInfo: "", //日语基础
          StuProfession: "", //职业
          StuEducation: "", //学历
          StuPurpose: "", //学习目的
          CreateBy: "", //创建人
          CustomerId: 0, //关联同行
          QQ: "", //qq
          WeChatNo: "", //微信号
          StuType: "", //客户类型
          StuNeeds: 0, //客户需求
          StuTel: "", //显示使用
        },
        //日语基础列表
        basicList: [],
        //学历列表
        educationList: [],
        //学习目的列表
        goalsList: [],
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        StuChannelList: [], //收客渠道
        allStuChannelList: [], //所有收客渠道
        AssistDropList: [], //协助人员
        customFromList: [], //客户来源
        customTypeList: [], //客户类型
        customList: [], //同行列表
        allCustomList: [], //所有同行列表
        TransListData: [], //转介人数据
        MyTransListData: [],
        checkMsg: {
          StuId: 0,
          StuRealMobile: "",
          QQ: "",
          WeChatNo: ""
        },
        NeedData: [], //客户需求列表
        noEdit: false, //是否可以修改编辑客户信息
        isHaveOrder: false, //学员是否有订单
        userInfo: {}, //当前登录人员
      };
    },
    created() {
      this.userInfo = this.getLocalStorage();
      this.getStuStageList();
      this.getBasicList();
      this.queryGuestEducationEnumList();
      this.queryGoalsList();
      this.getEmployeeList();
      this.GetStuChannelList();
      this.getCustomFrom();
      this.GetCustomerList();
      this.getCustomTypeList();
      this.getStudentDorpDown();
      this.getGetNeedsList();

      if (this.saveObj) {
        if (this.saveObj.StuId > 0) {
          this.customMsg.StuId = this.saveObj.StuId;
          this.checkMsg.StuId = this.saveObj.StuId;
        }
        if (this.saveObj.noEdit && this.saveObj.noEdit == true) {
          this.noEdit = true;
        }
      }
    },
    watch: {
      stuData() {
        this.init();
      }
    },
    methods: {
      //是否显示关联来源人信息
      IsShowStuSourceIdName(item) {
        var isHaveAuth = false;
        if (this.userInfo && this.userInfo.ActionMenuList && this.userInfo.ActionMenuList.length >
          0) {
          this.userInfo.ActionMenuList.forEach((x) => {
            if (x.FunctionCode == "Look_StuSourceId") {
              isHaveAuth = true;
            }
          });
        }
        if (item.CreateBy == this.userInfo.Id || isHaveAuth) {
          return true;
        } else if (item.StuId == 0) {
          return true;
        } else {
          return false;
        }
      },
      uploadFile(files) {
        UploadSelfFile("studentIcon", files, res => {
          if (res.Code == 1) {
            this.customObj.StuIcon = res.FileUrl;
          }
        });
      },
      //获取客户需求
      getGetNeedsList() {
        GetNeedsList().then(res => {
          if (res.Code == 1) {
            this.NeedData = res.Data;
          }
        });
      },
      //保存学员信息
      saveStu() {
        if (this.customObj.StuName == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请输入客户名称`
          });
          return;
        }
        if (
          this.customObj.StuRealMobile == "" &&
          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.CreateType == 1 && !this.customObj.StuChannel) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择收客渠道`
          });
          return;
        }
        if (this.customObj.CreateType == 2 && !this.customObj.StuSourceId) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择关联同行`
          });
          return;
        }
        if (this.customObj.CreateType == 3 && !this.customObj.StuSourceId) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择介绍人`
          });
          return;
        }
        if (this.customObj.CreateType == 4 && !this.customObj.StuSourceId) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择转介人`
          });
          return;
        }
        if (this.customObj.StuStage == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择客户状态`
          });
          return;
        }
        if (this.customObj.StuType == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: `请选择客户类型`
          });
          return;
        }
        if (this.customObj.StuRealMobile != "") {
          var myreg = /^[1][3-9][\d]{9}/;
          if (!myreg.test(this.customObj.StuRealMobile)) {
            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("update");
            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;
            this.allStuChannelList = res.Data;
          }
        });
      },
      //筛选渠道
      filterStuChannel(val, update) {
        update(() => {
          if (val === "") {
            this.StuChannelList = JSON.parse(
              JSON.stringify(this.allStuChannelList)
            );
          } else {
            const needle = val.toLowerCase();
            this.StuChannelList = this.allStuChannelList.filter(
              v => v.Name.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //筛选员工
      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() {
        let msg = {
          QCreateBy: 0
        };
        GetCustomerList(msg).then(res => {
          if (res.Code == 1) {
            this.customList = res.Data;
            this.allCustomList = res.Data;
          }
        });
      },
      //筛选客户
      filterFn(val, update) {
        update(() => {
          if (val === "") {
            this.customList = JSON.parse(JSON.stringify(this.allCustomList));
          } else {
            const needle = val.toLowerCase();
            this.customList = this.allCustomList.filter(
              v => v.CustomerName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取客户类型
      getCustomTypeList() {
        GetStudentTypeList().then(res => {
          if (res.Code == 1) {
            this.customTypeList = res.Data;
          }
        });
      },
      //获取转介人下拉
      getStudentDorpDown() {
        getStudentDorpDownList().then(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
          );
        });
      },
      init() {
        const tempDate = this.stuData;
        this.customObj.StuId = tempDate.StuId;
        this.customObj.StuName = tempDate.StuName;
        this.customObj.StuIcon = tempDate.StuIcon;
        this.customObj.StuRealMobile = tempDate.StuRealMobile;
        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;
        this.customObj.StuNeeds = tempDate.StuNeeds;
        this.customObj.StuTel = tempDate.StuTel;
        //有订单
        if (tempDate.OrderCount && tempDate.OrderCount > 0) {
          this.isHaveOrder = true;
        }
      },
      //验证手机号
      CheckExistsStu(type) {
        if (type == 1) {
          if (this.customObj.StuRealMobile && this.customObj.StuRealMobile.length == 11) {
            this.checkMsg.StuRealMobile = this.customObj.StuRealMobile;
            this.checkMsg.QQ = "";
            this.checkMsg.WeChatNo = "";
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
        if (type == 2) {
          if (this.customObj.QQ) {
            this.checkMsg.StuRealMobile = "";
            this.checkMsg.QQ = this.customObj.QQ;
            this.checkMsg.WeChatNo = "";
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
        if (type == 3) {
          if (this.customObj.WeChatNo) {
            this.checkMsg.StuRealMobile = "";
            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>
<style scoped>
  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
  }
</style>