<style>

</style>
<template>
  <div>
    <div class="row wrap">
      <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" />
    </div>
    <template v-if="isShowAdd">
      <div class="row wrap studentDate">
        <q-input filled class="col-6 q-pb-lg q-pr-lg" dense v-model="yueMsg.AppointmentPoint" label="约访地点"></q-input>
        <q-field filled class="q-pb-lg" dense>
           <template v-slot:control>
            <el-date-picker v-model="yueMsg.AppointmentTime" type="datetime" size="mini" style="width:228px"
              placeholder="选择约访日期时间！">
            </el-date-picker>
          </template>
        </q-field>
      </div>
      <div class="row wrap">
        <q-input filled v-model="yueMsg.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="savePoint()" />
      </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.AppointmentTime}}</div>
                  <div>约访地点：{{tItem.AppointmentPoint}}</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>
                <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>
                          <q-select filled v-model="stuStageId" dense :options="cusStateList"
                            option-label="Name" option-value="Id" emit-value map-options label="客户状态" class="col-12 q-pb-sm" />
                        </div>
                        <div class="row wrap" style="float:right;margin-bottom:10px;">
                          <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 {
    saveStudentAppointment,
    queryStudentAppointmentPage,
    deleteStudentAppointment,
    saveStudentAppointmentFeedBack,
    SetStuStage
  } from '../../../api/customerstudent/customerstudent';

  export default {
    meta: {
      title: ""
    },
    components: {

    },
    props: {
      stateId:{
        type:Number,
        default:0
      },
      stateList: {
        type: Array,
        default: () => []
      },
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isShowAdd: false,
        yueMsg: {
          Id: 0, //约访编号
          StuId: 0, //学员编号
          AppointmentPoint: '', //约访地点
          AppointmentTime: '', //约访时间
          Remark: '', //备注
        },
        msg: {
          pageIndex: 1,
          pageSize: 12,
          StuId: 0,
        },
        //反馈信息
        feedBackMsg: {
          Id: 0,
          Feedback: '', //反馈
        },
        isShowEdit: false,
        dataList: [],
        page_Count: 0,
        cusStateList: [],
        stuStageId:0,
      }
    },
    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.getList();
    },
    methods: {
      //点击到访
      clickItem(item) {
        this.feedBackMsg.Id = item.Id;
        this.feedBackMsg.Feedback = item.Feedback;
        this.isShowEdit = true;
      },
      SetFeedBack() {
        saveStudentAppointmentFeedBack(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.isShowEdit = false;
          }
        });
        if(this.stuStageId??0>0){
          this.setStuStage()
        }
      },
      //保存约访
      savePoint() {
        this.yueMsg.StuId = this.saveObj.StuId;
        if (this.yueMsg.AppointmentPoint == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            timeout: 2000,
            message: '请输入约访地点！',
          })
          return;
        }
        if (this.yueMsg.AppointmentTime == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            timeout: 2000,
            message: '请选择约访日期时间！',
          })
          return;
        }
        saveStudentAppointment(this.yueMsg).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(() => {

        })
      },
      //获取数据
      getList() {
        queryStudentAppointmentPage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.page_Count = res.Data.PageCount;
          }
        }).catch(() => {

        })
      },
      //清除数据
      clearMsg() {
        this.yueMsg.Id = 0;
        this.yueMsg.StuId = 0;
        this.yueMsg.AppointmentPoint = '';
        this.yueMsg.AppointmentTime = '';
        this.yueMsg.Remark = '';
        this.yueMsg.Feedback = '';
        this.isShowAdd = false;
      },
      //删除到访
      delVisit(Id) {
        let that = this
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          deleteStudentAppointment({
            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>
