<style></style>
<template>
  <div>
    <div class="row wrap">
      <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"
      />
    </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: [],
      userInfo: {}
    };
  },
  created() {
    if (this.saveObj && this.saveObj.StuId) {
      this.msg.StuId = this.saveObj.StuId;
      this.flowMsg.StuId = this.saveObj.StuId;
      this.userInfo = this.getLocalStorage();
    }
  },
  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>
