<template>
  <q-dialog
    v-model="persistent"
    full-height
    maximized
    position="right"
    persistent
    @hide="closeCutomer"
    transition-show="slide-left"
  >
    <div class="customMain">
      <div class="custom_Top">
        <div class="custom_HLeft">
          <div class="nameplate_avatar">
            <img
              v-if="baseObj.StuIcon"
              style="width:100%;height:100%;"
              :src="baseObj.StuIcon"
              alt
            />
            <div class="student_Name" v-else>
              <span v-if="baseObj.StuName">{{
                baseObj.StuName.substring(0, 1)
              }}</span>
            </div>
          </div>
          <div class="Name_List">
            <div class="F_16">{{ baseObj.StuName }}</div>
          </div>
        </div>
        <div class="custom_HRight">
          <q-btn
            v-if="userInfo.IsTenCccUser == 1"
            @click="callUserHandler"
            class="q-mr-md"
            round
            unelevated
            color="primary"
            dense
            icon="phone"
            title="拨打电话"
          ></q-btn>
          <q-btn
            unelevated
            color="positive"
            v-if="
              !baseObj.IsHaveCurseManager && userInfo.Id == baseObj.CreateBy
            "
            size="sm"
            :loading="pushing"
            class="q-mr-md"
            @click="assistBatchHandler"
            >推送课程顾问</q-btn
          >
          <q-btn
            v-if="getJudgeTrans()"
            color="primary"
            unelevated
            size="sm"
            label="转交"
            @click="isShowTrans = true"
          >
            <q-popup-proxy :offset="[10, 10]">
              <q-banner v-if="isShowTrans">
                <q-select
                  style="margin-top:20px;"
                  filled
                  v-model="transMsg.CreateBy"
                  @filter="filterEmployee"
                  use-input
                  :options="myEmployeeList"
                  option-label="EmployeeName"
                  option-value="Id"
                  emit-value
                  map-options
                />
                <q-btn
                  label="保存"
                  style="float:right;margin-top:15px"
                  color="accent q-mb-lg"
                  size="sm"
                  @click="saveTransForm"
                />
              </q-banner>
            </q-popup-proxy>
          </q-btn>
        </div>
      </div>
      <div class="custom_Bottom">
        <div class="detail-info">
          <student-left
            :stuData="stuData"
            :save-obj="saveObj"
            :BelongType="BelongType"
            @success="refreshStudentPage"
            @getrecord="getrecord"
            @update="queryStuInfo"
          ></student-left>
        </div>
        <div class="detail-travel">
          <div class="detail_first">
            <q-tabs
              v-model="ckedTab"
              dense
              align="left"
              class="text-teal"
              style="margin-bottom:20px;"
            >
              <q-tab name="1" label="记录" />
              <q-tab name="2" label="操作" />
              <q-tab name="3" label="订单" />
              <q-tab name="4" label="合同" />
              <q-tab v-if="!baseObj.noEdit" name="5" label="服务人员" />
            </q-tabs>
            <div class="operate_Content" style="flex:1;">
              <div class="detail_Main">
                <div
                  row
                  style="display: flex;justify-content: space-between;"
                  v-if="ckedTab == 2"
                >
                  <div class="tripTypeContent" style="flex-shrink:0">
                    <div
                      v-for="(qItem, qIndex) in visitList"
                      :key="qIndex"
                      :class="{ StuCkedType: qIndex + 1 == secondType }"
                      @click="getckedType(qItem)"
                    >
                      {{ qItem.Name }}
                    </div>
                  </div>
                  <q-btn
                    label="客户情况"
                    color="accent q-mb-lg"
                    size="sm"
                    style="margin-bottom: 0;"
                    @click="consultbtn"
                  />
                </div>

                <!-- 记录 -->
                <template v-if="ckedTab == 1">
                  <student-record
                    :save-obj="baseObj"
                    @success="refreshStudentPage"
                    ref="mychild"
                  ></student-record>
                </template>
                <!-- 操作 -->
                <template v-if="ckedTab == 2">
                  <div class="operate_Content" style="margin-top:20px;">
                    <student-visit
                      :stateId="stateId"
                      :stateList="customStateList"
                      @update="queryStuInfo"
                      :save-obj="baseObj"
                      :StuId="baseObj.StuId"
                      v-if="secondType == 1"
                      @success="refreshStudentPage"
                    ></student-visit>
                    <student-yuefang
                      :stateId="stateId"
                      :stateList="customStateList"
                      @update="queryStuInfo"
                      :save-obj="baseObj"
                      v-if="secondType == 2"
                      @success="refreshStudentPage"
                    ></student-yuefang>
                    <student-genjin
                      :stateId="stateId"
                      :stateList="customStateList"
                      @update="queryStuInfo"
                      :save-obj="baseObj"
                      v-if="secondType == 3"
                      @success="refreshStudentPage"
                    ></student-genjin>
                    <student-shiting
                      :save-obj="baseObj"
                      v-if="secondType == 4"
                      @success="refreshStudentPage"
                    >
                    </student-shiting>
                  </div>
                </template>
                <!-- 订单 -->
                <template v-if="ckedTab == 3">
                  <student-order
                    :save-obj="baseObj"
                    @success="refreshStudentPage"
                  ></student-order>
                </template>
                <!-- 合同 -->
                <template v-if="ckedTab == 4">
                  <student-hetong
                    :save-obj="baseObj"
                    @success="refreshStudentPage"
                  ></student-hetong>
                </template>
                <template v-if="ckedTab == 5">
                  <student-Assit
                    :save-obj="baseObj"
                    :BelongType="BelongType"
                    @success="refreshStudentPage"
                  ></student-Assit>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <consultFrom
        v-if="isconsult"
        :save-obj="baseObj"
        @close="isconsult = false"
        @consultsuccess="consultsuccess"
      >
      </consultFrom>
      <div class="dialog-out-close" @click="closeCutomer">
        <i class="iconfont icon-close" style="font-size:26px;" />
      </div>
    </div>
  </q-dialog>
</template>
<script>
import { queryEmployee } from "../../../api/users/user";
import { ForwardStudent } from "../../../api/customerstudent/customerstudent";
import {
  getStudentInfo, //获取学员客户信息
  queryStuStageList //获取客户阶段列表
} from "../../../api/school/index";
import studentLeft from "../student/student-left";
import studentRecord from "../student/student-record";
import studentVisit from "../student/student-visit";
import studentYuefang from "../student/student-yuefang";
import studentGenjin from "../student/student-genjin";
import studentShiting from "../student/student-shiting";
import studentHetong from "../student/student-hetong";
import studentOrder from "../student/student-order";
import studentAssit from "../student/student-Assit";
import consultFrom from "../student/consult-from";
import { SetStudentAssistBatch } from "../../../api/sale/sale";
export default {
  meta: {
    title: "学员管理"
  },
  components: {
    studentLeft,
    studentRecord,
    studentVisit,
    studentYuefang,
    studentGenjin,
    studentShiting,
    studentHetong,
    studentOrder,
    studentAssit,
    consultFrom
  },
  props: {
    saveObj: {
      type: Object,
      default: null
    },
    isJudgeTrans: {
      type: Number,
      default: null
    },
    BelongType: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      persistent: true,
      ckedTab: "1",
      secondType: 1,
      visitList: [
        {
          Name: "到访",
          Id: 1
        },
        {
          Name: "约访",
          Id: 2
        },
        {
          Name: "跟进",
          Id: 3
        },
        {
          Name: "试听",
          Id: 4
        }
      ],
      pushing: false,
      msg: {},
      baseObj: {},
      transMsg: {
        StuId: 1,
        CreateBy: ""
      },
      //员工列表
      employeeList: [],
      myEmployeeList: [],
      isShowTrans: false,
      customStateList: [],
      stateId: 0,
      stuData: {},
      userInfo: {},
      isconsult: false //学生咨询弹窗
    };
  },
  created() {
    this.getStuStageList();
    this.queryStuInfo();
    this.userInfo = this.getLocalStorage();
  },
  mounted() {
    this.baseObj = this.saveObj;
    this.baseObj.IsHaveCurseManager = false;
    if (this.baseObj.AssistList && this.baseObj.AssistList.length > 0) {
      this.baseObj.AssistList.forEach(x => {
        if (x.AssistType == 2) {
          this.baseObj.IsHaveCurseManager = true;
        }
      });
    }
    this.getEmployeeList();
  },
  methods: {
    callUserHandler() {
      tccc.callOut({
        phoneNumber: this.baseObj.StuRealMobile,
        phoneDesc: this.baseObj.StuName
      });
      //this.closeCutomer();
    },
    //判断是否显示转交
    getJudgeTrans() {
      let userInfo = this.getLocalStorage();
      let Id = userInfo.Id;
      if (this.isJudgeTrans == 1) {
        if (this.baseObj.CreateBy == Id) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    },
    closeCutomer() {
      this.$emit("close");
    },
    //刷新列表
    refreshStudentPage() {
      this.$emit("success");
    },
    consultsuccess(data) {
      //质询信息的修改
      this.$emit("success");
      this.isconsult = false;
      this.baseObj.PlanPrice = data.PlanPrice;
      this.baseObj.BaseCondition = data.BaseCondition;
      this.baseObj.DemandPoint = data.DemandPoint;
      this.baseObj.ResistPoint = data.ResistPoint;
      this.baseObj.ConsultingResults = data.ConsultingResults;
    },
    //点击第二排
    getckedType(obj) {
      this.secondType = obj.Id;
    },
    //获取员工列表
    getEmployeeList() {
      queryEmployee({
        IsLeave: 1
      }).then(res => {
        this.employeeList = res.Data;
        this.myEmployeeList = res.Data;
      });
    },
    //筛选员工
    filterEmployee(val, update, abort) {
      update(() => {
        this.myEmployeeList = this.employeeList.filter(
          v => v.EmployeeName.indexOf(val) > -1
        );
      });
    },
    //保存转交
    saveTransForm() {
      this.transMsg.StuId = this.baseObj.StuId;
      ForwardStudent(this.transMsg).then(res => {
        if (res.Code == 1) {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "转交成功",
            position: "top"
          });
        }
        this.isShowTrans = false;
      });
    },
    //保存成功后调用记录
    getrecord() {
      this.$refs.mychild.getStuLogPage();
    },
    //获取客户阶段列表
    getStuStageList() {
      queryStuStageList().then(res => {
        this.customStateList = res.Data;
      });
    },
    queryStuInfo() {
      getStudentInfo({
        StuId: this.saveObj.StuId
      }).then(res => {
        if (res.Code == 1) {
          this.stuData = res.Data;
          this.stateId = res.Data.StuStage;
          res.Data.BelongType = this.baseObj.BelongType;
          this.baseObj = res.Data;
        }
      });
    },
    assistBatchHandler() {
      if (this.pushing || this.baseObj.IsHaveCurseManager) return;
      this.pushing = true;
      let parameter = {
        stuIds: this.baseObj.StuId
      };
      SetStudentAssistBatch(parameter).then(r => {
        this.$emit("success");
        this.baseObj.IsHaveCurseManager = true;
        this.pushing = false;
      });
    },
    consultbtn() {
      this.isconsult = true;
    }
  }
};
</script>
<style>
.custom_RModel {
  width: 500px;
  height: 100%;
}

.customMain {
  width: 1000px !important;
  display: flex;
  flex-direction: column;
  height: 100 vh;
  padding: 15px 17px 0 17px;
  background-color: #f4f4f6;
}

.custom_Top {
  width: 100%;
  padding: 22px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom_HLeft {
  display: flex;
}

.nameplate_avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-right: 14px;
  border-radius: 5px;
  overflow: hidden;
}

.F_16 {
  font-size: 16px;
}

.Name_List {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow: hidden;
}

.wechat_Name {
  color: #9999a8;
  display: flex;
  font-size: 14px;
}

.custom_Bottom {
  margin-top: 17px;
  flex: 1;
  display: flex;
  margin-top: 17px;
  overflow: hidden;
}

.detail-info {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 100%;
  padding: 28px 0;
  margin-right: 13px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  overflow: auto;
}

.detail-info::-webkit-scrollbar {
  display: none;
}

.detail-travel {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.edit_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
}

.edit_info_wrap {
  padding: 0 22px 12px;
}

.custom_Line {
  width: calc(100% - 44px);
  margin: 16px 22px;
  border-bottom: 1px solid #d7d7d7;
}

.custom_Edit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 78px;
  height: 26px;
  margin-right: 3px;
  border: 1px dashed #858598;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.tripTypeContent {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.StuCkedType {
  color: #3470ff;
  font-weight: 700;
}

.tripTypeContent div {
  margin-right: 20px;
  cursor: pointer;
}

.q-timeline__title {
  margin-bottom: 5px;
}

.customUpdateTime {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #9696a6;
}

.q-timeline__subtitle {
  opacity: 1;
  font-weight: normal;
}

.follow_Component {
  padding: 0 22px;
  margin-top: 10px;
  width: 100%;
  background-color: #f6f6f6;
  border-radius: 5px;
}

.detail_first {
  margin: 0 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.detail_Main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.student_Name {
  width: 100%;
  height: 100%;
  background: #004d40;
  color: #fff;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}

.TimeLineDiv {
  height: 620px;
  flex: 1;
  height: 100%;
  padding-right: 20px;
}

.Time_TopList {
  display: flex;
  justify-content: space-between;
}

.visit_Cont {
  font-size: 14px;
}

.visit_delete {
  font-size: 14px;
  cursor: pointer;
  width: 30px;
}

.operate_Content {
  overflow: auto;
  /* padding-right: 20px; */
}

.operate_Content::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.operate_Content::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}

.operate_Content::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}

.Log_Content {
  padding: 10px;
  border-radius: 5px;
  background-color: #f4f4f6;
  color: #818194;
  line-height: 2;
  margin-top: 10px;
  word-break: break-all;
}

.stu_ComFeed {
  color: #3470ff;
  cursor: pointer;
  margin-left: 20px;
}

.StuCom_Remark {
  display: flex;
}

.StuCom_Inner {
  width: 100%;
}

.StuCom_Left {
  flex-shrink: 0;
  width: 57px;
  text-align-last: justify;
}

.Stu_OrderId {
  color: #2961fe;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.Stu_HtLeft {
  width: 57px;
  display: inline-block;
  text-align-last: justify;
}

.fullscreen {
  z-index: 3000;
}
</style>
