<style scoped>
  @import "../../../pages/financial/css/cssReset.css";

  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .singeRowTable tr th {
    border: 1px solid #d2d2d2;
  }

  .studentTracking td:first-child {
    background-color: #E6E6E6;
    position: sticky;
    left: 0px;
  }

  .studentTracking th:first-child {
    position: sticky;
    left: 0px;
  }

  .stulistNumber {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

  .OCourseTable {
    width: 400px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

  .OCourseTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

  .stufollowlistNumber {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

</style>
<template>
  <div class="stufollowlist">
    <div style="width: 100%;overflow-x: auto;">
      <table class="po_content singeRowTable" ref="table" style="border:1px solid #E6E6E6;" cellspacing="0"
        cellpadding="0" v-loading="loading">
        <tr>
          <th width="100" style="z-index: 999;">学生</th>
          <th width="100">报名日期</th>
          <th width="70">职业</th>
          <th width="80">目的</th>
          <th width="100">班主任</th>
          <th width="200">课程名称</th>
          <th width="80">金额</th>
          <th style="min-width:250px;">基本情况</th>
          <th width="200">续费课程</th>
          <!-- <th width="80">续费级别</th> -->
          <th width="80">续费金额</th>
          <th width="80">最新进度</th>
          <th width="90">负责人</th>
          <th width="90">学习情况</th>
        </tr>
        <template v-if='dataObj&&dataObj.RList && dataObj.RList.length>0'>
          <tr v-for=" ( item , index ) in dataObj.RList " :key="index">
            <td style=" border: 1px solid #d2d2d2;">
              <div class="text-blue cursor-pointer" @click="getStuRight(item)">
                {{item.StuName }}
              </div>
            </td>
            <td>
              {{ item.CreateTime }}
            </td>
            <td>
              <template v-if="item.StuProfession&&item.StuProfession!=''">
                <span class="text-blue cursor-pointer" style="cursor:pointer" @click="getStuBaseInfo(item,1)">
                  {{item.StuProfession}}
                  <q-tooltip :offset="[10, 10]">
                    点击修改
                  </q-tooltip>
                </span>
              </template>
              <template v-else>
                <a class="text-blue cursor-pointer" style="cursor:pointer" @click="getStuBaseInfo(item,1)">添加</a>
              </template>
            </td>
            <td>
              <template v-if="item.StuPurposeName&&item.StuPurposeName!=''">
                <span class="text-blue cursor-pointer" style="cursor:pointer" @click="getStuBaseInfo(item,2)">
                  {{item.StuPurposeName}}
                  <q-tooltip :offset="[10, 10]">
                    点击修改
                  </q-tooltip>
                </span>
              </template>
              <template v-else>
                <a class="text-blue cursor-pointer" style="cursor:pointer" @click="getStuBaseInfo(item,2)">添加</a>
              </template>
            </td>
            <td>
              <span v-html="getTeacherManager(item)"></span>
            </td>
            <td>
              {{ item.CourseName }}
            </td>
            <td>
              {{ item.PreferPrice }}
            </td>
            <td>
              <template v-if="item.FollowList&&item.FollowList.length>0">
                <template v-for="(sItem,fIndex) in item.FollowList">
                  <template v-if="fIndex<=1">
                    <div style="border-bottom:1px dashed #d1d1d1;text-align:left;padding:5px 5px;" :key="fIndex+10000">
                      <font style="font-weight:bold;">{{sItem.CreateTime}}：</font>{{sItem.Remark}}
                    </div>
                  </template>
                  <template v-else>
                    <div style="border-bottom:1px dashed #d1d1d1;text-align:left;padding:5px 5px;" :key="fIndex+20000"
                      v-if="item.IsShowFollowAll">
                      <font style="font-weight:bold;">{{sItem.CreateTime}}：</font>{{sItem.Remark}}
                    </div>
                  </template>
                </template>
                <a style="color:blue;cursor:pointer;" v-if="item.FollowList.length>2"
                  @click="item.IsShowFollowAll=!item.IsShowFollowAll">{{!item.IsShowFollowAll?"展开":"收起"}}</a>
              </template>
              <a class="text-blue cursor-pointer" style="cursor:pointer" @click="getStuBaseInfo(item,3)">&nbsp;添加</a>
            </td>
            <td>
              <div v-for="(sItem,sIndex) in item.RenewOrderList" style="border-bottom:1px dashed #d1d1d1;"
                :key="sIndex+30000">
                <span>{{sItem.CourseName}}</span>
              </div>
            </td>
            <!-- <td>
              <div v-for="(sItem,sIndex) in item.RenewOrderList" style="border-bottom:1px dashed #d1d1d1;"
                :key="sIndex+40000">
                <span>{{ sItem.CourseRateName?sItem.CourseRateName:'-' }}</span>
              </div>
            </td> -->
            <td>
              <div v-for="(sItem,sIndex) in item.RenewOrderList" style="border-bottom:1px dashed #d1d1d1;"
                :key="sIndex+50000">
                <span>{{sItem.PreferPrice}}</span>
              </div>
            </td>
            <td>
              {{item.NewLesson}}
            </td>
            <td>
              {{ item.CreateByName?item.CreateByName:'-' }}
            </td>
            <td>
              <div class="text-blue cursor-pointer" @click="getStudentStudy(item)">
                学习情况
              </div>
              <!-- <div class="text-blue cursor-pointer" @click="getStudentSurvey(item)">
               问卷调查
              </div> -->
              <!-- <div class="text-blue cursor-pointer">
                <div push flat color="text-blue cursor-pointer" @click="getStudentSurveyImg(item,index)">
                  问卷调查
                  <q-popup-proxy>
                    <div style="width:185px;padding:10px;border-radius:8px">
                      <q-img :src="item.QrCodeUrl">
                        <template v-slot:loading>
                          <div class="text-subtitle1 text-white">
                            Loading...
                          </div>
                        </template>
                      </q-img>
                    </div>
                  </q-popup-proxy>
                </div>
              </div> -->
            </td>
          </tr>
        </template>
      </table>
    </div>
    <div v-if='dataObj&&dataObj.RList && dataObj.RList.length>0'>
    </div>
    <div v-else
      style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;">
      暂无数据
    </div>


    <studentRight-form v-if="isShowStuRight" :BelongType="BelongType" :save-obj="stuOption" @close="closeStuForm"
      @success="refreshTable">
    </studentRight-form>

    <studentFUForm v-if="isShowStuFU" :save-obj="stuOption" @close="closeStuForm">
    </studentFUForm>

    <q-dialog v-model="isShowStuBaseInfo">
      <q-card style="width:450px;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">【{{customObj.StuName}}】</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-separator />
        <q-card-section>
          <div style="width:100%;margin-bottom:15px;" v-if="customObj.EditType==1">
            <div style="width:13%;display:inline-block;">职业：</div>
            <div style="width:86%;display:inline-block;">
              <q-input filled v-model="customObj.StuProfession" dense></q-input>
            </div>
          </div>
          <div style="width:100%;margin-bottom:15px;" v-if="customObj.EditType==2">
            <div style="width:13%;display:inline-block;">目的： </div>
            <div style="width:86%;display:inline-block;">
              <q-select filled v-model="customObj.StuPurpose" dense :options="goalsList" option-label="Name"
                option-value="Id" emit-value map-options />
            </div>
          </div>
          <div style="width:100%;margin-bottom:15px;" v-if="customObj.EditType==3">
            <div style="width:13%;display:inline-block;vertical-align:top;">基本<br />情况：</div>
            <div style="width:86%;display:inline-block;">
              <UeEditor v-model="customObj.Remark" class="q-pb-sm" :config="config"></UeEditor>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn class="q-mr-md" label="取消" @click="clearMsg()" />
          <q-btn color="accent" class="q-mr-md" label="确定" @click="saveStu()" :loading="stuloading" />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <q-dialog v-if="isShowQrCode">
      <template>
        <div class="q-pa-md">
          <q-img :src="QrCodeUrl" style="height: 140px; max-width: 150px">
            <template v-slot:loading>
              <div class="text-subtitle1 text-white">
                Loading...
              </div>
            </template>
          </q-img>
        </div>
      </template>
    </q-dialog>
  </div>
</template>
<script>
  import studentRightForm from "./studentRight-form";
  import studentFUForm from "./studentFu-form";
  import {
    getGuestLearningGoalsEnumList,
  } from "../../../api/sale/sale";
  import {
    saveStudentBaseInfo, //保存学员信息
    queryQrCodeImage, //问卷调查二维码生成
  } from "../../../api/school/index";
  import UeEditor from "../../editor/UeEditor";
  export default {
    props: {
      //数据
      dataObj: {
        type: Object,
        default: null
      },
      loading: {
        type: Boolean,
        default: false,
      },
      //表头数组
      titlelist: {
        type: Array,
        default: null
      },
      //表头长度
      RListlength: {
        type: Number,
        default: 0,
      },
      AuthObj: {
        type: Object,
        default: null
      }
    },
    components: {
      studentRightForm,
      studentFUForm,
      UeEditor,
    },
    data() {
      return {
        isShowStuFU: false,
        isShowStuRight: false,
        isShowStuBaseInfo: false,
        isShowQrCode: false,
        QrCodeUrl: "",
        stuloading: false,
        //学习目的列表
        goalsList: [],
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 90
        },
        stuOption: {},
        BelongType: 0,
        ShowAuthObj: {
          //是否显示同行、状态等信息
          isShowSaleInfo: true,
        },
        //客户对象
        customObj: {
          StuId: 0,
          StuProfession: "", //职业
          StuPurpose: "", //学习目的
          Remark: "",
          StuName: "",
          EditType: 0, //1-修改职业，2-修改目的，3-添加跟进
        },
      };
    },
    mounted() {
      if (this.AuthObj) {
        this.ShowAuthObj.isShowSaleInfo = this.AuthObj.isShowSaleInfo;
      }
      this.queryGoalsList();
    },
    methods: {
      //获取学习目的列表
      queryGoalsList() {
        getGuestLearningGoalsEnumList({}).then(res => {
          this.goalsList = res.Data;
        });
      },
      //刷新表格
      refreshTable() {
        this.$emit("success");
      },
      getTeacherManager(row) {
        let managerName = "<span class='text-grey-4'>暂无</span>";
        if (row.AssistList && row.AssistList.length > 0) {
          row.AssistList.forEach(y => {
            if (y.AssistType == 4) {
              managerName = `<span class='text-dark'>${y.AssistName}</span>`;
            }
          });
        }
        return managerName;
      },
      //点击学生姓名弹出
      getStuRight(obj) {
        if (obj) {
          this.stuOption = obj;
          this.BelongType = 3;
        }
        this.isShowStuRight = true;
      },
      //点击学生跳转到学习情况
      getStudentStudy(obj) {
        var qObj = {
          StuId: obj.StuId,
          StuName: obj.StuName,
          GuestId: obj.GuestId,
          CourseRateName: obj.CourseRateName,
        };
        this.OpenNewUrl('/teacher/studentStudy', qObj)
      },
      //点击生成二维码
      getStudentSurveyImg(obj, index) {

        if (this.dataObj.RList[index].QrCodeUrl === "") {
          let codeMsg = {
            pUrl: "system/surveyStudent",
            StudentId: obj.StuId,
            StuName: obj.StuName,
            MainId: 0,
          }
          queryQrCodeImage(codeMsg).then(res => {
            if (res.Code == 1) {
              this.isShowQrCode = true;
              this.dataObj.RList[index].QrCodeUrl = "data:image/png;base64," + res.Data

              codeMsg = {};
            }
          });
        }
      },
      //点击生成二维码，先跳转到页面吧
      getStudentSurvey(obj) {
        let nowUserInfo = JSON.parse(localStorage.getItem("loginUserInfo")).data
        var qObj = {
          StuId: obj.StuId,
          StuName: obj.StuName,
          GuestId: obj.GuestId,
          CourseRateName: obj.CourseRateName,
          Group_Id: nowUserInfo.Group_Id
        };
        this.OpenNewUrl('/system/surveyStudent', qObj)
      },
      //清除
      clearMsg() {
        this.customObj.Remark = "";
        this.customObj.StuId = 0;
        this.customObj.StuName = "";
        this.customObj.Remark = "";
        this.customObj.StuProfession = "";
        this.customObj.StuPurpose = "";
        this.customObj.EditType = 0;
        this.stuloading = false;
        this.isShowStuBaseInfo = false;
      },
      //保存学员信息
      saveStu() {
        if (this.customObj.EditType == 1) {
          if (this.customObj.StuProfession == '') {
            this.$q.notify({
              type: "negative",
              position: "top",
              timeout: 2000,
              message: "请填写职业"
            });
            return;
          }
        }
        if (this.customObj.EditType == 2) {
          if (this.customObj.StuPurpose == '') {
            this.$q.notify({
              type: "negative",
              position: "top",
              timeout: 2000,
              message: "请选择学习目的"
            });
            return;
          }
        }
        if (this.customObj.EditType == 3) {
          if (this.customObj.Remark == "") {
            this.$q.notify({
              type: "negative",
              position: "top",
              timeout: 2000,
              message: "请输入内容！"
            });
            return;
          }
        }
        this.stuloading = true;
        saveStudentBaseInfo(this.customObj).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "数据保存成功！",
              position: "top"
            });
            this.$emit("update");
            this.$emit("success");
            this.$emit("getrecord");
            this.stuloading = false;
            this.isShowStuBaseInfo = false;
            this.clearMsg();
          }
        });
      },
      //点击学生姓名弹出
      getStuBaseInfo(obj, showType) {
        if (obj) {
          this.customObj.StuId = obj.StuId;
          this.customObj.StuName = obj.StuName;
          this.customObj.StuProfession = obj.StuProfession;
          this.customObj.StuPurpose = obj.StuPurpose;
          this.customObj.EditType = showType;
        }
        this.stuloading = false;
        this.isShowStuBaseInfo = true;
      },
      //关闭弹窗
      closeStuForm() {
        this.isShowStuRight = false;
        this.isShowStuFU = false;
      },
    }
  };

</script>
