<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" @click="isShowAdd=true" />
    <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: [],
      }
    },
    created() {
      if (this.saveObj && this.saveObj.StuId) {
        this.msg.StuId = this.saveObj.StuId;
      }
    },
    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>
