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

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

  .stuGenJin .el-select-dropdown {
    z-index: 8888 !important;
  }

</style>
<template>
  <div class="stuGenJin">
    <div class="row wrap">
      <q-btn label="新增" color="accent q-mb-lg" size="sm"
        @click="isShowAdd = true;getStudyAbroadList();flowMsg.StudentType=StudentType" />
      <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 q-mb-lg flex justify-between items-center">
        <q-select v-if="StudentType==1" filled v-model="flowMsg.PurposeType" dense :options="PurposeTypeList" option-label="ConfigName"
          option-value="Id" emit-value map-options label="意向度" class="col-6 q-pb-lg q-pr-lg" />
        <q-select v-if="StudentType==1" filled v-model="flowMsg.ConsultCourseIdList" dense :options="CourseList" option-label="CourseName"
          option-value="CourseId" emit-value map-options label="咨询课程" class="col-6 q-pb-lg q-pr-lg" multiple use-input
          @filter="filterCourse" />
        <q-input v-if="StudentType==1" filled stack-label maxlength="50" dense v-model="flowMsg.ConsultKeyWords" class="col-6 q-pb-lg q-pr-lg"
          label="关键词" />
        <q-field v-if="StudentType==1" filled class="col-6 q-pb-lg q-pr-lg" dense>
          <template v-slot:control>
            <el-date-picker v-model="flowMsg.NextVisitDate" size="mini" style="width:228px" type="date"
              placeholder="回访日期">
            </el-date-picker>
          </template>
        </q-field>
         <q-select v-if="StudentType==1" filled v-model="stuStageId" dense :options="cusStateList" option-label="Name" option-value="Id"
          emit-value map-options label="客户进度" class="col-6 q-pb-lg q-pr-lg" />
        

          <q-select v-if="StudentType==2" filled multiple v-model="flowMsg.SupplierIdList" dense :options="SupplierList" @filter="filterSupper" option-label="Name" option-value="Id"
          emit-value map-options label="供应商" class="col-6 q-pb-lg q-pr-lg" />
         
      </div>
      <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">
      
        
        <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">
                <el-row v-if="tItem.StudentType==1">
                  <el-col :span="12">
                    意向度：{{tItem.PurposeTypeName}}
                  </el-col>
                  <el-col :span="12">下次回访：{{tItem.NextVisitDate}}</el-col>
                </el-row>
                <el-row v-if="tItem.StudentType==1">
                  <el-col :span="24">
                    关键词：{{tItem.ConsultKeyWords}}
                  </el-col>
                </el-row>
                <el-row v-if="tItem.StudentType==1">
                  <el-col :span="24">
                    咨询课程：{{tItem.CourseName}}
                  </el-col>
                </el-row>
                <el-row v-if="tItem.StudentType==2">
                  <el-col :span="24">
                    供应商：{{tItem.SupplierName}}
                  </el-col>
                </el-row>
                <div class="Log_Content" v-html="tItem.Remark"></div>
                <div style="margin-top:10px;">
                  <a @click="editFollow(tItem)" style="color:blue;" class="visit_delete"> 编辑</a>
                  &nbsp;&nbsp;
                  <a @click="delFollow(tItem.Id)" class="visit_delete text-negative"> 删除</a>
                </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";
  import {
    querySupplierList,
  } from '../../../api/studyabroad/index'
  import {
    queryCourseDropdownList,
  } from '../../../api/course/index'
  import {
    getStuPurposeList,
  } from '../../../api/system/index'
  export default {
    meta: {
      title: ""
    },
    components: {
      UeEditor
    },
    props: {
      stateId: {
        type: Number,
        default: 0
      },
      StudentType: {
        type: Number,
        default: 1
      },
      stateList: {
        type: Array,
        default: () => []
      },
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isShowAdd: false,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 90
        },
        flowMsg: {
          Id: 0,
          StuId: 0,
          Remark: "",
          stuState: 0,
          ConsultCourseIdList: [], //咨询课程
          ConsultCourseIds: "", //课程多选
          ConsultKeyWords: "", //关键词
          NextVisitDate: "", //下次回访时间
          PurposeType: '', //意向度
          SupplierIds:"",//供应商IDs
          SupplierIdList:[],//供应商ID
          StudentType:1,
        },
        msg: {
          pageIndex: 1,
          pageSize: 12,
          StuId: 0,
          StudentType:1,
        },
        dataList: [],
        page_Count: 0,
        stuStageId: 0,
        cusStateList: [],
        SupplierList:[],//供应商下拉列表
        AllSupplierList:[],//供应商下拉列表
        userInfo: {},
        PurposeTypeList: [], //意向度下拉列表
        CourseList: [], //课程下拉列表
        AllCourseList: [], //所有课程列表
      };
    },
    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();
      this.queryPurpose();
      this.getCourseList();
    },
    methods: {
       //获取下拉框数据
       getStudyAbroadList() {
        querySupplierList({}).then(res => {
          if (res.Code == 1) {
            this.SupplierList = res.Data;
            this.AllSupplierList = res.Data;
            let obj = {
              Id: 0,
              Name: '请选择'
            }
            this.SupplierList.unshift(obj);
          }
        })
      },
      filterSupper(val, update) {
        update(() => {
          this.SupplierList = this.AllSupplierList.filter(
            v => v.Name.indexOf(val) > -1
          );
        });
      },
      //筛选课程
      filterCourse(val, update) {
        update(() => {
          if (val === '') {
            this.CourseList = JSON.parse(JSON.stringify(this.AllCourseList))
          } else {
            const needle = val.toLowerCase()
            this.CourseList = this.AllCourseList.filter(v => v.CourseName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },
      //获取课程列表
      getCourseList() {
        queryCourseDropdownList({
          IsQPrice: 0,
          SaleState: 1,
        }).then(res => {
          if (res.Code == 1) {
            this.CourseList = res.Data;
            this.AllCourseList=res.Data;
          }
        })
      },
      //获取意向度
      queryPurpose() {
        getStuPurposeList({
          ConfigType: 1
        }).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.PurposeTypeList = res.Data;
          }
        })
      },
      //保存跟进
      saveFlow() {
        if (this.flowMsg.Remark == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请输入内容！"
          });
          return;
        }
        if(this.flowMsg.SupplierIdList&&this.flowMsg.SupplierIdList.length>0){
          this.flowMsg.SupplierIds=this.flowMsg.SupplierIdList.toString()
        }
        else{
          this.flowMsg.SupplierIds="";
        }
        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();
              this.$emit("success");
            }
          })
          .catch(() => {});
        if (this.stuStageId && this.stuStageId > 0) {
          this.setStuStage();
        }
      },
      getList() {
        this.msg.StudentType=this.StudentType;
        queryStudentFollowPage(this.msg)
          .then(res => {
            if (res.Code == 1) {
              this.dataList = res.Data.PageData;
              this.page_Count = res.Data.PageCount;
            }
          })
          .catch(() => {});
      },
      //清除
      clearMsg() {
        this.flowMsg.Id = 0;
        this.flowMsg.Remark = "";
        this.flowMsg.stuState = 0;
        this.flowMsg.StudentType=this.StudentType;
        this.flowMsg.ConsultCourseIdList = [];
        this.flowMsg.ConsultCourseIds = "";
        this.flowMsg.ConsultKeyWords = "";
        this.flowMsg.NextVisitDate = "";
        this.flowMsg.PurposeType = "";
        this.flowMsg. SupplierIds = "";//供应商IDs
        this.flowMsg.upplierIdList=[],//供应商ID
        this.isShowAdd = false;
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //修改根据信息
      editFollow(item) {
        this.getStudyAbroadList();
        this.flowMsg.Id = item.Id;
        this.flowMsg.Remark = item.Remark;
        this.flowMsg.ConsultCourseIdList = item.ConsultCourseIdList;
        this.flowMsg.ConsultCourseIds = item.ConsultCourseIds
        this.flowMsg.ConsultKeyWords = item.ConsultKeyWords;
        this.flowMsg.NextVisitDate = item.NextVisitDate;
        this.flowMsg.PurposeType = item.PurposeType;
        this.flowMsg.StudentType = item.StudentType;
        this.flowMsg.SupplierIds = item.SupplierIds;
        this.flowMsg.SupplierIdList = [];
        if ( this.flowMsg.SupplierIds&& this.flowMsg.SupplierIds .length>0) {
          this.flowMsg.SupplierIdList = item.SupplierIds.split(",").map(Number);
        }
        this.isShowAdd = true;
      },
      //删除跟进
      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>
