<style>
.studentDate .el-input__inner {
  background-color: transparent;
  border: 0;
  height: 28px !important;
}

.studentDate .el-input {
  height: 28px !important;
}

.el-select-dropdown {
  z-index: 8888 !important;
}
</style>
<template>
  <div>
    <q-btn
      label="新增"
      color="accent q-mb-lg"
      size="sm"
      v-if="!saveObj.IsHaveCurseManager || userInfo.IsCourseConsultant == 1"
      @click="isShowAdd = true"
    />
    <span v-else class="text-grey-4">学员已推送课程顾问，只能进行查看</span>
    <q-btn
      label="取消"
      style="margin-left:20px;"
      v-if="isShowAdd"
      flat
      color="grey-10 q-mb-lg"
      size="sm"
      @click="isShowAdd = false"
    />
    <template v-if="isShowAdd">
      <div class="row wrap studentDate">
        <q-select
          filled
          option-value="SId"
          dense
          class="col-6 q-pb-lg q-pr-lg"
          option-label="SName"
          v-model="VisitMsg.School_Id"
          :options="schoolList"
          emit-value
          map-options
          label="到访校区"
        />
        <q-field filled class="q-pb-lg" dense>
          <template v-slot:control>
            <el-date-picker
              v-model="VisitMsg.Date"
              size="mini"
              style="width:228px"
              type="date"
              placeholder="到访日期"
            >
            </el-date-picker>
          </template>
        </q-field>
      </div>
      <div class="row warp studentDate">
        <q-field filled class="q-pb-lg q-pr-lg" dense>
          <template v-slot:control>
            <el-time-select
              v-model="VisitMsg.VisitTime"
              size="mini"
              ref="ClassTime"
              style="width:230px"
              :picker-options="{
                start: '09:00',
                step: '00:15',
                end: '21:00'
              }"
              placeholder="到访时间"
            >
            </el-time-select>
          </template>
        </q-field>
        <q-field filled class="q-pb-lg" dense>
          <template v-slot:control>
            <el-select
              v-model="VisitMsg.ReceptionPersion"
              filterable
              style="width:230px;"
              size="mini"
              placeholder="接待人"
            >
              <el-option
                v-for="item in myEmployeeList"
                :key="item.Id"
                :label="item.EmployeeName"
                :value="item.Id"
              >
              </el-option>
            </el-select>
          </template>
        </q-field>
      </div>
      <div class="row wrap">
        <q-input
          filled
          v-model="VisitMsg.Remark"
          dense
          :rows="3"
          type="textarea"
          class="col-12 q-pb-lg q-pr-lg"
          label="备注"
        >
        </q-input>
      </div>

      <div class="row wrap justify-end q-pr-lg" style="margin-bottom:10px;">
        <q-btn
          label="保存"
          color="accent q-mb-lg"
          size="md"
          @click="saveVisit()"
        />
      </div>
    </template>
    <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
      <div class="TimeLineDiv">
        <q-timeline color="primary">
          <q-timeline-entry v-for="(tItem, tIndex) in dataList" :key="tIndex">
            <template v-slot:title>
              <div class="visit_Cont">
                <div class="Log_Content">
                  <div>到访校区：{{ tItem.SchoolName }}</div>
                  <div>到访时间：{{ tItem.Date }} {{ tItem.VisitTime }}</div>
                  <div class="StuCom_Remark">
                    <span class="StuCom_Left">接待人</span>：
                    {{ tItem.ReceptionPersionName }}
                  </div>
                  <div class="StuCom_Remark">
                    <div class="StuCom_Left">备注</div>
                    ：
                    <div class="StuCom_Inner">{{ tItem.Remark }}</div>
                  </div>
                  <div class="StuCom_Remark">
                    <div class="StuCom_Left">反馈</div>
                    ：
                    <div class="StuCom_Inner">{{ tItem.Feedback }}</div>
                  </div>
                  <div class="StuCom_Remark">
                    <div class="StuCom_Left">是否到访</div>
                    ：
                    <div class="StuCom_Inner">
                      <span v-if="tItem.IsVisit == 0" class="text-negative"
                        >{{ tItem.IsVisitStr }}
                      </span>
                      <span v-if="tItem.IsVisit == 1" class="text-primary"
                        >{{ tItem.IsVisitStr }}
                      </span>
                    </div>
                  </div>
                </div>
                <div style="display:flex;margin-top:10px;">
                  <div
                    @click="delVisit(tItem.Id)"
                    class="visit_delete text-negative"
                  >
                    删除
                  </div>
                  <div @click="clickItem(tItem)" class="stu_ComFeed">
                    {{
                      tItem.Feedback == null || tItem.Feedback == ""
                        ? "添加反馈"
                        : "编辑反馈"
                    }}
                    <q-popup-proxy>
                      <q-banner v-if="isShowEdit">
                        <div
                          class="row wrap"
                          style="margin-top:10px;width:300px;"
                        >
                          <q-input
                            filled
                            v-model="feedBackMsg.Feedback"
                            :rows="3"
                            type="textarea"
                            class="col-12 q-pb-sm"
                            label="请输入反馈内容"
                          >
                          </q-input>
                        </div>
                        <div
                          class="row wrap q-col-gutter-sm"
                          style="width:300px;"
                        >
                          <q-select
                            filled
                            v-model="stuStageId"
                            dense
                            :options="cusStateList"
                            option-label="Name"
                            option-value="Id"
                            emit-value
                            map-options
                            label="客户状态"
                            class="col-6"
                          />

                          <q-select
                            filled
                            v-model="feedBackMsg.IsVisit"
                            dense
                            :options="VisitList"
                            emit-value
                            map-options
                            label="是否到访"
                            class="col-6"
                          />
                        </div>
                        <div class="row wrap q-my-sm" style="float:right;">
                          <q-btn
                            label="保存"
                            color="accent"
                            size="sm"
                            @click="SetFeedBack()"
                          />
                        </div>
                      </q-banner>
                    </q-popup-proxy>
                  </div>
                </div>
              </div>
            </template>
            <template v-slot:subtitle>
              <div class="Time_TopList">
                <div>{{ tItem.CreateTime }}</div>
                <div>{{ tItem.CreateByName }}</div>
              </div>
            </template>
          </q-timeline-entry>
        </q-timeline>
      </div>
    </div>
    <div style="margin-bottom:20px;">
      <q-pagination
        class="full-width justify-end"
        v-model="msg.pageIndex"
        color="primary"
        :max="page_Count"
        input
        @input="changePage"
      />
    </div>
  </div>
</template>
<script>
import {
  getSchoolDropdown, //获取校区列表
  queryStuStageList //获取客户阶段列表
} from "../../../api/school/index";
import {
  queryStudentVisitPage, //获取到访列表
  saveStudentVisit,
  deleteStudentVisit,
  saveStudentVisitFeedback,
  SetStuStage
} from "../../../api/customerstudent/customerstudent";
import { queryEmployee } from "../../../api/users/user";
export default {
  meta: {
    title: ""
  },

  props: {
    stateId: {
      type: Number,
      default: 0
    },
    stateList: {
      type: Array,
      default: () => []
    },
    saveObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      schoolList: [],
      //到访msg
      VisitMsg: {
        Id: 0, //到访编号
        StuId: 0, //学员编号
        School_Id: 0, //到访校区
        Date: "", //日期
        VisitTime: "", //到访时间
        ReceptionPersion: "", //接待人
        Remark: "" //备注
      },
      msg: {
        pageIndex: 1,
        pageSize: 12,
        StuId: 0
      },
      isShowAdd: false,
      dataList: [],
      page_Count: 0,
      //员工列表
      myEmployeeList: [],
      isShowEdit: false,
      //反馈信息
      feedBackMsg: {
        Id: 0, //编号
        IsVisit: 0, //到访状态(1-已到访，0-未到访)
        Feedback: "" //反馈
      },
      VisitList: [
        {
          label: "未到访",
          value: 0
        },
        {
          label: "已到访",
          value: 1
        }
      ],
      stuStageId: 0,
      cusStateList: [],
      userInfo: {}
    };
  },
  created() {
    if (this.saveObj && this.saveObj.StuId) {
      this.msg.StuId = this.saveObj.StuId;
      this.userInfo = this.getLocalStorage();
    }
  },
  watch: {
    stateId(val) {
      this.stuStageId = val;
    }
  },
  mounted() {
    this.stuStageId = this.stateId;
    this.cusStateList = this.stateList;
    this.getSchool();
    this.getEmployeeList();
    this.getList();
    let userInfo = this.getLocalStorage();
    if (userInfo) {
      this.VisitMsg.ReceptionPersion = parseInt(userInfo.Id);
    }
  },
  methods: {
    //点击到访
    clickItem(item) {
      this.feedBackMsg.Id = item.Id;
      this.feedBackMsg.Feedback = item.Feedback;
      this.feedBackMsg.IsVisit = item.IsVisit;
      this.isShowEdit = true;
    },
    SetFeedBack() {
      saveStudentVisitFeedback(this.feedBackMsg).then(res => {
        if (res.Code == 1) {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "数据保存成功！",
            position: "top"
          });
          this.getList();
          this.feedBackMsg.Id = 0;
          this.feedBackMsg.Feedback = "";
          this.feedBackMsg.IsVisit = 0;
          this.isShowEdit = false;
        }
      });
      if (this.stuStageId ?? 0 > 0) {
        this.setStuStage();
      }
    },
    //获取校区列表
    getSchool() {
      getSchoolDropdown({}).then(res => {
        if (res.Code == 1) {
          var tempArray = res.Data;
          if (!tempArray) {
            tempArray = [];
          }
          this.schoolList = tempArray;
        }
      });
    },
    //获取员工列表
    getEmployeeList() {
      queryEmployee({
        IsLeave: 1
      }).then(res => {
        this.myEmployeeList = res.Data;
      });
    },
    //获取到访分页
    getList() {
      queryStudentVisitPage(this.msg)
        .then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.page_Count = res.Data.PageCount;
          }
        })
        .catch(() => {});
    },
    //保存数据
    saveVisit() {
      this.VisitMsg.StuId = this.saveObj.StuId;
      if (this.VisitMsg.Date == "") {
        this.$q.notify({
          type: "negative",
          position: "top",
          timeout: 2000,
          message: "请选择到访日期！"
        });
        return;
      }
      if (this.VisitMsg.VisitTime == "") {
        this.$q.notify({
          type: "negative",
          position: "top",
          timeout: 2000,
          message: "请选择到访时间！"
        });
        return;
      }
      saveStudentVisit(this.VisitMsg)
        .then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top"
            });
            this.getList();
            this.clearMsg();
          }
        })
        .catch(() => {});
    },
    //清除数据
    clearMsg() {
      this.VisitMsg.Id = 0;
      this.VisitMsg.StuId = 0;
      this.VisitMsg.School_Id = 0;
      this.VisitMsg.Date = "";
      this.VisitMsg.VisitTime = "";
      // this.VisitMsg.ReceptionPersion = '';
      this.VisitMsg.Remark = "";
      this.VisitMsg.Feedback = "";
      this.isShowAdd = false;
    },
    //删除到访
    delVisit(Id) {
      let that = this;
      this.$q
        .dialog({
          title: "提示信息",
          message: "是否确定删除？",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消"
        })
        .onOk(() => {
          deleteStudentVisit({
            Id: Id
          }).then(res => {
            that.$q.notify({
              icon: "iconfont icon-chenggong",
              timeout: 2000,
              message: res.Message,
              position: "top"
            });
            that.getList();
          });
        })
        .onCancel(() => {});
    },
    changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    setStuStage() {
      const msg = {
        StuId: this.saveObj.StuId,
        StuStage: this.stuStageId
      };
      SetStuStage(msg).then(res => {
        this.$emit("update");
      });
    }
  }
};
</script>
