<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">
      <UeEditor v-if="isShowAdd" v-model="flowMsg.Remark" class="q-pb-sm" :config="config"></UeEditor>
      <div class="row q-mb-lg flex justify-between items-center">
        <q-select filled v-model="stuStageId" dense :options="cusStateList" option-label="Name" option-value="Id"
          emit-value map-options label="客户状态" class="col-6" />
          <div>
              <q-btn label="保存" color="accent " size="md" @click="saveFlow()" />
          </div>
        
      </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" v-html="tItem.Remark"></div>
                <div @click="delFollow(tItem.Id)" style="margin-top:10px;" class="visit_delete text-negative">删除</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 UeEditor from '../../editor/UeEditor'
  import {
    queryStudentFollowPage, //获取到访列表
    saveStudentFollow,
    deleteStudentFollow,
    SetStuStage
  } from '../../../api/customerstudent/customerstudent';

  export default {
    meta: {
      title: ""
    },
    components: {
      UeEditor
    },
    props: {
      stateId:{
        type:Number,
        default:0
      },
      stateList: {
        type: Array,
        default: () => []
      },
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isShowAdd: false,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 90
        },
        flowMsg: {
          StuId: 0,
          Remark: '',
          stuState: 0,
        },
        msg: {
          pageIndex: 1,
          pageSize: 12,
          StuId: 0
        },
        dataList: [],
        page_Count: 0,
        stuStageId:0,
        cusStateList: [],
      }
    },
    created() {
      if (this.saveObj && this.saveObj.StuId) {
        this.msg.StuId = this.saveObj.StuId;
        this.flowMsg.StuId = this.saveObj.StuId;
      }
    },
     watch:{
      stateId(val){
        this.stuStageId=val
      }
    },
    mounted() {
      this.stuStageId=this.stateId
      this.cusStateList = this.stateList;
      this.getList();
    },
    methods: {
      //保存跟进
      saveFlow() {
        if (this.flowMsg.Remark == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            timeout: 2000,
            message: '请输入内容！',
          })
          return;
        }
        saveStudentFollow(this.flowMsg).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(() => {

        })
         if(this.stuStageId??0>0){
          this.setStuStage()
        }
      },
      getList() {
        queryStudentFollowPage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.page_Count = res.Data.PageCount;
          }
        }).catch(() => {

        })
      },
      //清除
      clearMsg() {
        this.flowMsg.Remark = '';
        this.isShowAdd = false;
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //删除跟进
      delFollow(Id) {
        let that = this
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          deleteStudentFollow({
            Id: Id
          }).then((res) => {
            that.$q.notify({
              icon: 'iconfont icon-chenggong',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            that.getList()
          })
        }).onCancel(() => {});
      },
       setStuStage(){
        const msg={
          StuId:this.saveObj.StuId,
          StuStage:this.stuStageId,
        }
        SetStuStage(msg).then(res=>{
          this.$emit('update')
        })
      },
    },
  }

</script>
