<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="120" rowspan="2" style="min-width: 110px;z-index: 999;">学生</th>
          <th width="120" rowspan="2" style="min-width: 110px;">电话</th>
          <!-- <th width="120" rowspan="2" style="min-width: 110px;">课程顾问</th> -->
          <th width="120" rowspan="2" style="min-width: 110px;">班主任</th>
          <th width="100" rowspan="2" style="min-width: 100px;">合同时间</th>
          <th width="200" rowspan="2" style="min-width: 200px;">所报课程</th>
          <th width="200" rowspan="2" style="min-width: 200px;">开课时间</th>
          <th width="200" rowspan="2" style="min-width: 200px;">结课时间</th>
          <th width="80" rowspan="2" style="min-width: 80px;">当前级别</th>
          <th width="100" rowspan="2" style="min-width: 100px;">生日</th>
          <th width="100" rowspan="2" style="min-width: 100px;" v-if="ShowAuthObj.isShowSaleInfo">客户来源</th>
          <th width="100" rowspan="2" style="min-width: 100px;">学习目的</th>
          <th width="100" rowspan="2" style="min-width: 100px;" v-if="ShowAuthObj.isShowSaleInfo">来源关联人</th>
          <th width="100" rowspan="2" style="min-width: 100px;" v-if="ShowAuthObj.isShowSaleInfo">收客渠道</th>
          <th width="100" rowspan="2" style="min-width: 100px;">负责人</th>
          <th width="100" rowspan="2" style="min-width: 100px;">合同状态</th>
          <th width="100" rowspan="2" style="min-width: 120px;" v-if="ShowAuthObj.isShowSaleInfo">期望达成协议日期</th>
          <th width="100" rowspan="2" style="min-width: 100px;" v-if="ShowAuthObj.isShowSaleInfo">目前状态</th>
          <th width="100" rowspan="2" style="min-width: 100px;" v-if="ShowAuthObj.isShowSaleInfo">胜率</th>
          <th width="100" rowspan="2" style="min-width: 100px;" v-if="ShowAuthObj.isShowSaleInfo">跟踪记录</th>
          <th width="500" colspan="3" style="min-width: 500px;" v-for=" ( item , index ) in RListlength " :key='index'>
            <div>第{{index+1}}个月</div>
            <div v-if="dataObj&&dataObj.MonthList">(累计续约：<span style="color: #F72E52">{{getxuyue(index).RenewNum}}
              </span>
              <span style="margin-left: 5px;">学员介绍：{{getxuyue(index).IntroductionNum}}</span>) </div>
          </th>
        </tr>
        <tr>
          <th v-for=" ( item , index ) in titlelist " :key='index' :width="item.Id==1?120:200">{{item.Name}}</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>
              <span>{{ item.StuTel }}</span>
            </td>
            <!-- <td>
              <span v-html="getCurseManager(item)"></span>
            </td> -->
            <td>
              <span v-html="getTeacherManager(item)"></span>
            </td>
            <td>
              <span>{{ item.ContractSTime }}</span>
            </td>
            <td>
              <span>{{ item.CourseName }}</span>
            </td>
            <td>
              <span>{{ item.BeginClassDate }}</span>
            </td>
            <td>
              <span>{{ item.GraduationTime }}</span>
            </td>
            <td>
              <span>{{ item.JapanBaseInfo }}</span>
            </td>
            <td>
              <span>{{ item.StuBirthStr }}</span>
            </td>
            <td v-if="ShowAuthObj.isShowSaleInfo">
              <span>{{ item.CreateTypeName?item.CreateTypeName:'-' }}</span>
            </td>
            <td>
              {{item.StuPurposeName}}
            </td>
            <td v-if="ShowAuthObj.isShowSaleInfo">
              <span><span v-if="item.CreateType==2 && item.EnterpriseName">{{item.EnterpriseName}}:</span>
                {{ item.StuSourceIdName?item.StuSourceIdName:'-' }}</span>
            </td>
            <td v-if="ShowAuthObj.isShowSaleInfo">
              <span>{{ item.StuChannelName?item.StuChannelName:'-' }}</span>
            </td>
            <td>
              <span>{{ item.CreateByName?item.CreateByName:'-' }}</span>
            </td>
            <td>
              <span>{{ item.StuGuestStateName }}</span>
            </td>
            <td v-if="ShowAuthObj.isShowSaleInfo">
              {{item.AdvisorExpectDate}}
            </td>
            <td v-if="ShowAuthObj.isShowSaleInfo">
              {{item.AdvisorStatusName}}
            </td>
            <td v-if="ShowAuthObj.isShowSaleInfo">
              {{item.AdvisorWinRate}}%
            </td>
            <td v-if="ShowAuthObj.isShowSaleInfo">
              <template v-if="item.AdvisorList">
                <template v-if="item.AdvisorList.length>0">
                  {{item.AdvisorList[0].AdvisorStatusName}}
                  <span class="stufollowlistNumber">
                    {{item.AdvisorList.length}}
                    <q-popup-proxy>
                      <q-banner>
                        <table class="OCourseTable" style="border-collapse:collapse;">
                          <tr>
                            <th style="width:100px">跟进状态</th>
                            <th style="width:120px">跟进日期</th>
                            <th style="width:100px">跟进比例</th>
                            <th style="width:300px">跟进备注</th>
                          </tr>
                          <tr v-for="(sItem,sIndex) in item.AdvisorList" style="border-bottom:1px dashed #d1d1d1;"
                            :key="sIndex">
                            <td>{{sItem.AdvisorStatusName}}</td>
                            <td>{{sItem.AdvisorDate}}</td>
                            <td>{{sItem.AdvisorRate}}</td>
                            <td style="text-align:left;">{{sItem.AdvisorRemark}}</td>
                          </tr>
                        </table>
                      </q-banner>
                    </q-popup-proxy>
                  </span>
                </template>
                <template v-if="item.AdvisorList.length==0">
                  无
                </template>
              </template>
            </td>
            <td v-for=" ( x , y ) in titlelist " :key="y">
              <div v-if="item.MonthList[x.index]">
                <div v-if="x.Id==1">
                  <span>{{item.MonthList[x.index].Month}}</span>
                  <span style="margin:0 3px">/</span>
                  <span v-if="item.MonthList[x.index].IsRenew==1" style="color: red;">是</span>
                  <span v-if="item.MonthList[x.index].IsRenew==2">否</span>
                  <span style="margin:0 3px">/</span>
                  <span
                    :style="{'color':item.MonthList[x.index].IntroductionNum>0?'red':'#111'}">{{item.MonthList[x.index].IntroductionNum}}</span>
                </div>
                <div v-if="x.Id==2" style="padding: 7px;">
                  <div v-if="item.MonthList[x.index].TeacherTime"
                    style="display: flex;align-items: center;justify-content: space-between;">
                    <div>{{item.MonthList[x.index].TeacherTime}}</div>
                    <span style="text-decoration: underline;cursor: pointer;color: #2961fe ;"
                      @click="lookgengduo(item,item.MonthList[x.index].TeacherTime)">更多</span>
                  </div>
                  <template>
                    <div v-if="item.MonthList[x.index].Teacher!=''" v-html="item.MonthList[x.index].Teacher"></div>
                    <span v-if="item.MonthList[x.index].Teacher==''">-</span>
                  </template>
                </div>
                <div v-if="x.Id==3" style="padding: 3px;">
                  <div v-if="item.MonthList[x.index].ConsultantTime"
                    style="display: flex;align-items: center;justify-content: space-between;">
                    <div>{{item.MonthList[x.index].ConsultantTime}}</div>
                    <span style="text-decoration: underline;cursor: pointer;color: #2961fe ;"
                      @click="lookgengduo(item,item.MonthList[x.index].ConsultantTime)">更多</span>
                  </div>
                  <template>
                    <div v-if="item.MonthList[x.index].Consultant" v-html="item.MonthList[x.index].Consultant"></div>
                    <span v-if="item.MonthList[x.index].Consultant==''">-</span>
                  </template>
                </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>
  </div>
</template>
<script>
  import studentRightForm from "./studentRight-form";
  import studentFUForm from "./studentFu-form";

  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
    },
    data() {
      return {
        isShowStuFU: false,
        isShowStuRight: false,
        stuOption: {},
        BelongType: 0,
        ShowAuthObj: {
          //是否显示同行、状态等信息
          isShowSaleInfo: true,
        },
      };
    },
    mounted() {
      if (this.AuthObj) {
        this.ShowAuthObj.isShowSaleInfo = this.AuthObj.isShowSaleInfo;
      }
    },
    methods: {
      //刷新表格
      refreshTable() {
        this.$emit("success");
      },
      getCurseManager(row) {
        let managerName = "<span class='text-grey-4'>暂未推送</span>";
        if (row.AssistList && row.AssistList.length > 0) {
          row.AssistList.forEach(y => {
            if (y.AssistType == 2) {
              managerName = `<span class='text-dark'>${y.AssistName}</span>`;
            }
          });
        }
        return managerName;
      },
      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;
      },
      lookgengduo(obj, time) { //跟进备注

        //计算时间 月底日期
        let Month = time.split('-')[0] + '-' + time.split('-')[1] + '-01'
        let date = new Date(Month);
        let currentMonth = date.getMonth();
        let nextMonth = ++currentMonth;
        let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
        let oneDay = 1000 * 60 * 60 * 24;
        let endDate = new Date(nextMonthFirstDay - oneDay)
        let endMonth = time.split('-')[0] + '-' + time.split('-')[1] + '-' + endDate.getDate()
        if (obj) {
          this.stuOption = obj;
          this.stuOption.STime = Month;
          this.stuOption.ETime = endMonth;
          this.BelongType = obj.BelongType;
        }
        this.isShowStuFU = true;
      },
      //点击学生姓名弹出
      getStuRight(obj) {
        if (obj) {
          this.stuOption = obj;
          this.BelongType = 3;
        }
        this.isShowStuRight = true;
      },
      //关闭弹窗
      closeStuForm() {
        this.isShowStuRight = false;
        this.isShowStuFU = false
      },
      getxuyue(index) {
        let obj = {
          IntroductionNum: 0,
          RenewNum: 0
        };
        this.dataObj.MonthList.forEach(x => {
          if (x.MonthNum == index + 1) {
            obj = x
          }
        })
        return obj
      },
    }
  };
</script>