<style>
  .schedulVisit {
    min-height: calc(100% - 30px);
    padding: 15px;
    margin-top: 30px;
    border-radius: 8px;
    background: #fff;
  }

  .schedulVisit .fangkeTitle {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
  }

  .schedulVisit .fangkeNumb {
    display: inline-block;
    background-color: #bccefd;
    color: #2966fe;
    font-size: 15px;
    border-radius: 6px;
    text-align: center;
    line-height: 22px;
    margin-left: 15px;
    padding: 0px 6px;
  }

  .schedulVisit .visit_Date {
    margin-left: 60px;
    color: #000000;
    font-size: 16px;
  }

  .schedulVisit .visit_Date i {
    color: #b4b4b4;
    margin-right: 10px;
  }

  .page-option .el-input__inner {
    background-color: #f1f3f5;
    border: 0;
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
  }

  .page-option .el-input__icon {
    line-height: 34px;
  }

  .schedul_Vtable tr th {
    color: #8e8e8e;
  }

  .schedul_Vtable tr td {
    color: #2d2d2d;
  }

  .visit_FORM .el-input__inner {
    background: #f0f2f5;
    border-radius: 10px;
    height: 34px;
    line-height: 34px;
    border: 0;
  }

  .visit_FORM .el-input__icon {
    line-height: 34px;
  }

  .schedulVisit .q-table {
    padding-bottom: 5px;
  }

  .schedulVisit .q-table tbody td:before {
    background: "" !important;
  }

  .schedulVisit .q-table tbody tr:hover {
    box-shadow: 0px 2px 20px 0px #e4e7fb;
    background: #fff;
    border-radius: 16px;
  }

  .schedulVisit .q-table tbody td:before {
    background: transparent !important;
  }

  .scheduVipop .el-textarea__inner {
    background: #f0f2f5 !important;
    border: 0;
  }
</style>
<template>
  <div class="schedulVisit">
    <div class="row">
      <div class="col q-mr-lg">
        <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
          <q-tab :ripple="false" name="first" label="预约到访" />
          <q-tab :ripple="false" name="second" label="访客登记" />
          <q-tab :ripple="false" name="third" label="预约试听" />
        </q-tabs>
      </div>
      <div v-if="tabCheck == 'first'" class="col-3">
        <q-input dense debounce v-model="searchObj.arriveVisitKey" input-style="font-size:13px;" filled
          placeholder="请输入到访者姓名或电话" @keydown.enter="changeVisitList">
          <template v-slot:prepend>
            <q-icon name="search" color="gery-3" />
          </template>
        </q-input>
      </div>
      <div v-if="tabCheck == 'second'&&DutyAuthObj.isShowAddCustom">
        <q-btn outline dense icon="add" class="q-px-sm" color="primary" @click="showAddForm = true" label="新增客户">
        </q-btn>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loadingObj.visitLoading" no-data-label="暂无相关数据" flat
        class="stickycreatInsertStr-column-table schedul_Vtable" separator="none" :data="data" :columns="columns"
        row-key="name" v-if="tabCheck == 'second'">
        <template v-slot:body-cell-StuName="props">
          <q-td :props="props">
            <div class="text-blue cursor-pointer" @click="getStuRight(props.row)">
              {{ props.value }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-AssistList="props">
          <q-td :props="props">
            <template v-for="(item,index) in  props.row.AssistList">
              {{item.AssistName}}<span :key="index" v-if="index!=props.row.AssistList.length-1">,</span>
            </template>
          </q-td>
        </template>
        <template v-slot:body-cell-Option="props">
          <q-td :props="props">
            <q-btn dense flat color="primary" label="添加试听" @click="CreateReserveclass(props.row)"></q-btn>
          </q-td>
        </template>

        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
      <q-table v-if="tabCheck == 'first'" hide-bottom :columns="visitColumns" :data="showTodayVist"
        :loading="loadingObj.visitLoading" no-data-label="暂无相关数据" flat
        class="sticky-right-column-table sticky-column-table" separator="none">
        <template v-slot:body-cell-StuName="props">
          <q-td :props="props">
            <div class="text-blue cursor-pointer" @click="getStuAudition(props.row)">
              {{ props.value }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-Option="props">
          <q-td :props="props">
            <q-btn dense flat color="primary" v-if="props.row.IsVisit != 1"
              @click="setCustomerVisitHandler(props.row.Id)">
              <q-icon name="edit" color="primary" style="font-size:11px" class="q-mr-xs"></q-icon>
              <span style="font-size:12px;">到访</span>
            </q-btn>
            <q-btn dense flat color="primary" label="添加试听" @click="CreateReserveclass(props.row)"></q-btn>
          </q-td>
        </template>
        <template v-slot:body-cell-IsVisitStr="props">
          <q-td :props="props" class="text-negative">
            <span :class="{ 'text-primary': props.row.IsVisit == 1 }">{{
              props.row.IsVisitStr
            }}</span>
          </q-td>
        </template>
      </q-table>
      <q-table v-if="tabCheck == 'third'" hide-bottom :columns="dutyColumns" :data="shwoTrialList"
        :loading="loadingObj.trialLoading" no-data-label="暂无相关数据" flat class="sticky-column-table">
        <template v-slot:body-cell-StuName="props">
          <q-td :props="props" style="border-left:1px solid #E5e5e5;padding:0">
            <template v-for="(x, i) in props.row.GuestList">
              <div :key="i" class="q-pa-md" :style="{
                  'border-bottom':
                    i == props.row.GuestList.length - 1
                      ? 'none'
                      : '1px solid #e5e5e5'
                }">
                {{ x.GuestName }}
              </div>
            </template>
          </q-td>
        </template>
        <template v-slot:body-cell-StuPhone="props">
          <q-td :props="props" style="border-right:1px solid #E5e5e5;padding:0">
            <template v-for="(x, i) in props.row.GuestList">
              <div :key="i + 'tel'" class="q-pa-md" :style="{
                  'border-bottom':
                    i == props.row.GuestList.length - 1
                      ? 'none'
                      : '1px solid #e5e5e5'
                }">
                {{ x.StuTel }}
              </div>
            </template>
          </q-td>
        </template>
      </q-table>
    </div>
    <schedulFanke v-if="isShowDetail" @close="closeDetail" :save-obj="sendObj"></schedulFanke>
    <q-dialog v-model="showAddForm" persistent content-class="bg-grey-1 big-dialog">
      <student-add-form @success="addFinishHandler" @close="showAddForm = false"></student-add-form>
    </q-dialog>
    <q-dialog persistent v-model="isShowModelInfo" v-if="visitModel">
      <q-card flat class="q-pa-md" style="width:300px">
        <div class="text-h6">客户已存在</div>
        <div class="text-center q-my-md">
          <q-avatar size="40px" rounded style="background:#C7C7C7" text-color="white">
            <span>{{ visitModel.StuName.substring(0, 1) }}</span>
          </q-avatar>
        </div>
        <div class="text-center text-dark" style="font-size:12px">
          <span class="text-primary">{{ visitModel.StuName }}</span>
          <span class="q-mx-xs" style="font-size:20px;font-weight:bold">·</span>
          <span>{{ visitModel.StuTel }}</span>
        </div>
        <div style="font-size:12px" class="q-mt-xs text-center q-mb-md text-grey-6">
          该客户已于{{ visitModel.CreateTimeStr }}，由{{
            visitModel.CreateByName
          }}加入会员库
        </div>
        <q-separator class="q-mb-md" />
        <div class="text-center q-py-xs">
          <q-btn outline color="primary" class="q-px-md" label="打卡到访" @click="createVisitHandler(visitModel)"></q-btn>
        </div>
      </q-card>
    </q-dialog>
    <studentRight-form v-if="isShowStuRight" :save-obj="stuOption" @close="closeStuForm" @success="refreshStuList">
    </studentRight-form>
    <student-audition v-if="isShowStuAudition" :save-obj="stuOption" @close="closeStuForm" @success="refreshStuList">
    </student-audition>
    <!--试听课弹窗-->
    <q-dialog persistent v-model="isShowReserveclass">
      <q-card flat class="q-pa-md" style="width:800px">
        <div class="text-h6" style="padding-bottom:10px;">新增试听课</div>
        <reserveclass-form :save-Obj="stuOption" @close="closeReserveForm" @success="closeReserveForm">
        </reserveclass-form>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
  import studentRightForm from "../school/student/studentRight-form";
  import studentAudition from "../school/student/student-audition"

  import reserveclassForm from '../school/student/reserveclass-form'
  import {
    getTodayVisitList
  } from "../../api/stuMan/index";
  import {
    getStudentPage,
    saveStudent,
    getStudentInfo
  } from "../../api/school";
  import {
    saveStudentVisitFeedback,
    saveStudentVisit
  } from "../../api/customerstudent/customerstudent";
  import {
    getGuestBasicsEnumList
  } from "../../api/sale/sale";
  import schedulFanke from "../schedul/schedul-fanke";
  import {
    queryDutyTrialLesson
  } from "../../api/duty/index";
  import studentAddForm from "../../components/school/student/studentAddForm";
  import {
    mapGetters
  } from "vuex";
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      authObj: {
        type: Object,
        default: null
      }
    },
    components: {
      schedulFanke,
      studentAddForm,
      studentRightForm,
      studentAudition,
      reserveclassForm
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    data() {
      return {
        isShowStuRight: false,
        isShowStuAudition: false,
        isShowModelInfo: true,
        visitModel: null,
        tabCheck: "first",
        columns: [{
            name: "StuName",
            label: "昵称",
            required: true,
            field: "StuName",
            align: "left"
          },
          {
            name: "StuSexStr",
            field: "StuSexStr",
            label: "性别",
            align: "left"
          },
          {
            name: "StuTel",
            field: "StuTel",
            label: "客户电话",
            align: "left"
          },
          {
            name: "QQ",
            field: "QQ",
            label: "QQ",
            align: "left"
          },
          {
            name: "WeChatNo",
            field: "WeChatNo",
            label: "微信",
            align: "left"
          },
          {
            name: "StuTypeName",
            label: "客户类型",
            field: "StuTypeName",
            align: "left"
          },
          {
            name: "StuStageName",
            field: "StuStageName",
            label: "客户阶段",
            align: "left"
          },
          {
            name: "StuProfession",
            label: "职业",
            field: "StuProfession",
            align: "left"
          },
          {
            name: "StuEducationName",
            label: "学历",
            field: "StuEducationName",
            align: "left"
          },
          {
            name: "StuPurposeName",
            label: "目的",
            field: "StuPurposeName",
            align: "left"
          },
          {
            name: "CreateByName",
            label: "负责人",
            align: "left",
            field: "CreateByName"
          },
          {
            name: "AssistList",
            label: "协同人",
            align: "left",
            field: "AssistList"
          },
          {
            name: "CreateTypeStr",
            label: "获取渠道",
            field: "CreateTypeStr",
            align: "left"
          },
          {
            name: "StuSourceIdName",
            label: "关联人员",
            field: "StuSourceIdName",
            align: "left"
          },
          {
            name: "VisitCount",
            label: "到访次数",
            field: "VisitCount",
            align: "left"
          },
          {
            name: "TrialLessonCount",
            label: "试听次数",
            field: "TrialLessonCount",
            align: "left"
          },
          {
            name: "CreateTimeStr",
            field: "CreateTimeStr",
            label: "创建时间",
            align: "left"
          },
          {
            name: "Option",
            label: "操作",
            field: "Option"
          }
        ],
        showAddForm: false,
        visitColumns: [{
            name: "StuName",
            label: "姓名",
            field: "StuName",
            align: "left"
          },
          {
            name: "StuTel",
            field: "StuTel",
            label: "客户电话",
            align: "left"
          },
          {
            name: "VisitTime",
            label: "预计到访时间",
            field: "VisitTime",
            align: "left"
          },
          {
            name: "SchoolName",
            label: "预计校区",
            field: "SchoolName",
            align: "left"
          },
          {
            name: "ReceptionPersionName",
            label: "对接人",
            field: "ReceptionPersionName",
            align: "left"
          },
          {
            name: "ReceptionPersionTel",
            label: "对接人电话",
            field: "ReceptionPersionTel",
            align: "left"
          },
          {
            name: "Remark",
            label: "备注",
            field: "Remark",
            align: "left"
          },
          {
            name: "IsVisitStr",
            label: "到访状态",
            field: "IsVisitStr",
            align: "left"
          },
          {
            name: "Option",
            label: "操作",
            field: "Option"
          }
        ],
        dutyColumns: [{
            name: "TeacherName",
            label: "试讲老师",
            field: "TeacherName",
            align: "left"
          },
          {
            name: "StartTime",
            label: "开始时间",
            field: "StartTime",
            align: "left"
          },
          {
            name: "CourseName",
            label: "试讲内容",
            field: "CourseName",
            align: "left"
          },
          {
            name: "RoomName",
            label: "教室",
            field: "RoomName",
            align: "left"
          },
          {
            name: "StuName",
            label: "客户姓名",
            align: "left"
          },
          {
            name: "StuPhone",
            label: "客户电话",
            align: "left"
          }
        ],
        searchObj: {
          arriveVisitKey: "",
          dutyKey: ""
        },
        loadingObj: {
          visitLoading: true,
          trialLoading: true
        },
        data: [],
        loading: true,
        pageCount: 0,
        GBList: [], //日语基础列表
        msg: {
          pageIndex: 1,
          pageSize: 5,
          rowsPerPage: 5,
          IsQueryMyStu: 1,
          KeyWords: ""
        },
        addMsg: {
          Id: 0, //编号
          Name: "", //姓名
          Tel: "", //电话
          WeChatNum: "", //微信号
          CourseName: "", //兴趣课程
          StudyTime: "", //学习时间
          LevelType: "", //当前水平
          PlanId: 0, //值班编号
          VisitorStatus: "", //状态
          Evaluate: "", //意向评估
          Remark: "" //备注
        },
        statusList: [{
            Id: 1,
            Name: "正常"
          },
          {
            Id: 2,
            Name: "贵宾"
          },
          {
            Id: 3,
            Name: "黑名单"
          }
        ],
        SearchKey: "", //搜索条件
        isShowVform: false,
        isShowVedit: false,
        //权限显示对象
        DutyAuthObj: {
          isShowAdd: true, //是否显示新增按钮【默认显示】
          isShowEdit: true, //是否显示编辑按钮【默认显示】
          isShowAddCustom: true //是否显示新增客户按钮 【默认显示】
        },
        rules: {
          //表单必填验证
          Name: [{
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }],
          Tel: [{
            required: true,
            message: "请输入电话",
            trigger: "blur"
          }],
          CourseName: [{
            required: true,
            message: "请输入兴趣课程",
            trigger: "blur"
          }],
          StudyTime: [{
            required: true,
            message: "请输入学习时间",
            trigger: "blur"
          }],
          LevelType: [{
            required: true,
            message: "请选择当前水平",
            trigger: "change"
          }],
          VisitorStatus: [{
            required: true,
            message: "请选择状态",
            trigger: "change"
          }],
          Evaluate: [{
            required: true,
            message: "请输入意向评估",
            trigger: "blur"
          }]
        },
        sendObj: {},
        isShowDetail: false,
        todayVistList: [],
        showTodayVist: [],
        trialList: [],
        shwoTrialList: [],
        stuOption: null,
        isShowReserveclass: false, //是否显示试听课弹窗
      };
    },
    watch: {
      //有默认值
      authObj: {
        handler(newValue) {
          this.initAuth();
        },
        immediate: true
      },
      tabCheck: {
        handler(newValue) {
          if (newValue == "first") {
            this.initTodayVistList();
          } else if (newValue == "second") {
            this.getVisitoryPage();
          } else {
            this.initDutyTrialLessonList();
          }
        },
        immediate: true
      }
    },
    created() {},
    mounted() {
      this.msg.PlanId = this.saveObj.Id;
      this.getGuestBasics();
      this.initAuth();
      this.getVisitoryPage();
      this.initTodayVistList();
      this.initDutyTrialLessonList();
    },
    methods: {
      //添加试听
      CreateReserveclass(item) {
        this.stuOption = item;
        this.isShowReserveclass = true;
      },
      //关闭试听弹窗
      closeReserveForm() {
        this.isShowReserveclass = false;
      },
      //点击学生姓名弹出
      getStuRight(obj) {
        if (obj) {
          this.stuOption = obj;
          this.stuOption.noEdit = true
        } else {
          this.stuOption = null;
        }
        this.isShowStuRight = true;
      },
      //点击预约到访的姓名
      getStuAudition(obj) {
        if (obj) {
          this.stuOption = obj;
        } else {
          this.stuOption = null;
        }
        this.isShowStuAudition = true;
      },
      addFinishHandler(m, t) {
        if (m && m.StuId) {
          if (t == 1) {
            this.visitModel = m;
          } else {
            this.visitModel = null;
            this.createVisitHandler(m);
            this.getVisitoryPage();
          }
        }
        this.showAddForm = false;
      },
      createVisitHandler(m) {
        let d = new Date();
        let msg = {
          Id: 0,
          Date: d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(),
          ReceptionPersion: this.userInfo.Id,
          Remark: "客户临时到访门店，由" + this.userInfo.AccountName + "记录到访信息",
          School_Id: this.userInfo.School_Id,
          StuId: m.StuId,
          VisitTime: d.getHours() + ":" + d.getMinutes()
        };
        saveStudentVisit(msg).then(r => {
          this.visitModel = null
          if (r.Data) {
            let msg2 = {
              Id: r.Data.Id,
              IsVisit: 1,
              Feedback: msg.remark
            };
            saveStudentVisitFeedback(msg2).then(r2 => {
              this.initTodayVistList();
            });
          }
        });
      },
      submitForm(addMsg1) {
        //提交创建、修改表单
        this.$refs[addMsg1].validate(valid => {
          if (valid) {
            this.SaveVisitor();
          } else {
            return false;
          }
        });
      },
      submitForm2(addMsg2) {
        this.$refs[addMsg2].validate(valid => {
          if (valid) {
            this.SaveVisitor();
          } else {
            return false;
          }
        });
      },
      //初始化权限信息
      initAuth() {
        if (this.authObj) {
          if (this.authObj.isShowAdd != null && !this.authObj.isShowAdd) {
            this.DutyAuthObj.isShowAdd = this.authObj.isShowAdd;
          }
          if (this.authObj.isShowEdit != null && !this.authObj.isShowEdit) {
            this.DutyAuthObj.isShowEdit = this.authObj.isShowEdit;
          }
          if (this.authObj.isShowAddCustom != null && !this.authObj.isShowAddCustom) {
            this.DutyAuthObj.isShowAddCustom = this.authObj.isShowAddCustom;
          }
        }
      },
      //日语基础枚举
      getGuestBasics() {
        getGuestBasicsEnumList({}).then(res => {
          if (res.Code == 1) {
            this.GBList = res.Data;
          }
        });
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getVisitoryPage();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getVisitoryPage();
      },
      refreshStuList() {
        this.getVisitoryPage();
        this.closeStuForm();
      },
      closeStuForm() {
        this.isShowStuRight = false;
        this.isShowStuAudition = false;
      },
      //获取访客列表
      getVisitoryPage() {
        this.loading = true;
        getStudentPage(this.msg)
          .then(res => {
            this.loading = false;
            this.data = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      clearAddMsg() {
        this.addMsg.Id = 0;
        this.addMsg.Name = "";
        this.addMsg.Tel = "";
        this.addMsg.WeChatNum = "";
        this.addMsg.CourseName = "";
        this.addMsg.StudyTime = "";
        this.addMsg.LevelType = "";
        this.msg.PlanId = this.saveObj.Id;
        this.addMsg.VisitorStatus = "";
        this.addMsg.Evaluate = "";
        this.addMsg.Remark = "";
        this.$refs.addMsg1.resetFields();
      },
      //保存
      SaveVisitor() {
        this.addMsg.PlanId = this.saveObj.Id;
        setVisitor(this.addMsg).then(res => {
          this.$refs.fkdj.click();
          this.isShowVform = false;
          this.getVisitoryPage();
          this.clearAddMsg();
          this.$refs.addMsg1.resetFields();
          this.$refs.addMsg2.resetFields();
        });
      },
      //过滤备注显示
      getRemarks(remark) {
        if (remark.length > 10) {
          return remark.substring(0, 10) + "...";
        } else {
          return remark;
        }
      },
      //获取详情
      getDetail(obj) {
        this.sendObj = obj;
        this.isShowDetail = true;
      },
      //关闭
      closeDetail() {
        this.isShowDetail = false;
      },
      changeVisitList() {
        this.loadingObj.visitLoading = true;
        this.showTodayVist = [];
        this.$nextTick(() => {
          this.showTodayVist = this.todayVistList.filter(x => {
            return (
              x.StuName.indexOf(this.searchObj.arriveVisitKey) != -1 ||
              x.StuTel.indexOf(this.searchObj.arriveVisitKey) != -1
            );
          });
          this.loadingObj.visitLoading = false;
        });
      },
      setCustomerVisitHandler(id) {
        this.$q
          .dialog({
            title: "确认到访",
            message: "请再次确认改客户是否到达",
            cancel: true,
            persistent: true
          })
          .onOk(() => {
            let msg = {
              Id: id,
              IsVisit: 1,
              Feedback: ""
            };
            saveStudentVisitFeedback(msg).then(r => {
              this.initTodayVistList();
            });
          });
      },
      initTodayVistList() {
        this.loadingObj.visitLoading = true;
        if (this.$route.query.Id) {
          let msg = {
            Id: this.$route.query.Id
          };
          getTodayVisitList(msg).then(r => {
            this.todayVistList = r.Data;
            this.changeVisitList();
            this.loadingObj.visitLoading = false;
          });
        } else {
          this.loadingObj.visitLoading = false;
        }
      },
      changeDutyTrialHander() {
        this.shwoTrialList = this.trialList;
        return;
        this.loadingObj.trialLoading = true;
        this.shwoTrialList = [];
        this.$nextTick(() => {
          this.shwoTrialList = this.trialList.filter(x => {
            return (
              x.StuName.indexOf(this.searchObj.dutyKey) != -1 ||
              x.StuTel.indexOf(this.searchObj.dutyKey) != -1
            );
          });
          this.loadingObj.trialLoading = false;
        });
      },
      initDutyTrialLessonList() {
        this.loadingObj.trialLoading = true;
        if (this.$route.query.Id) {
          let msg = {
            Id: this.$route.query.Id
          };
          queryDutyTrialLesson(msg).then(r => {
            if (r.Data) {
              r.Data.forEach(x => {
                x.CourseName = x.CourseName.split("：")[0];
              });
            }
            this.trialList = r.Data;
            this.changeDutyTrialHander();
            this.loadingObj.trialLoading = false;
          });
        } else {
          this.loadingObj.trialLoading = false;
        }
      }
    }
  };
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>