<template>
  <div class="statistic-container">
    <div class="statistic-select">
      <el-cascader
        v-model="researcher"
        placeholder="请选择研究员"
        style="width: 230px"
        :options="researcherList"
        :props="defaultSalesProps"
        :show-all-levels="false"
        key="cascaderIdx"
        clearable
        filterable
        @change="getTableData"
      >
      </el-cascader>
      <div class="center">
          <el-button type="primary" @click="toogelDate(1)"
            style="width: 140px;"><i class="el-icon-arrow-left" /> 上两周</el-button
          >
          <el-button type="primary" @click="toogelDate(0)" style="width: 140px;">本期</el-button>
          <el-button type="primary" @click="toogelDate(2)" style="width: 140px;"
            >下两周 <i class="el-icon-arrow-right"
          /></el-button>
      </div>
      <div style="width: 230px;"></div>
    </div>
    <div class="table-cont">
      <div class="table-body-wrapper" style="max-height: calc(100vh - 240px);overflow: auto;">
				<table>
          <thead>
            <tr>
              <td rowspan="2" class="thead-rs">研究组</td>
              <td rowspan="2" class="thead-rs">研究员</td>
              <td :colspan="7" v-for="item in this.tableTheadColumns" :key="item" class="head-column">
                {{ item }}
              </td>
            </tr>
            <tr>
              <template v-for="item in [0,1]">
                <td :key="item +'_'+ ind" v-for="(it,ind) in tableDayColumns[item]" >
                  {{ it }}
                </td>
              </template>
            </tr>
          </thead>
          <template v-if="datalist.length>0">
            <tbody v-for="item in datalist" :key="item.GroupId">
              <template v-if="item.ResearcherList.length">
                <tr>
                  <td :rowspan="item.ResearcherList.length + 1" class="thead-rs" style="cursor: pointer;"
                  @click="item.showDetail = !item.showDetail" >{{ item.GroupName }}
                    <i :class="item.showDetail?'el-icon-arrow-down':'el-icon-arrow-up'" v-show="item.ResearcherList.length>1"></i>
                  </td>
                </tr>
                <tr v-for="rs in item.showDetail?item.ResearcherList:item.ResearcherList.slice(0,1)" :key="rs.AdminId">
                  <td class="thead-rs">{{ rs.RealName }}</td>
                    <td :key="data_key+'_0'" v-for="(data,data_key) in rs.BusinessTripList.filter(it => it.WeekType == 'current')" >
                      {{ data.City }}
                    </td>
                    <td :key="data_key+'_1'" v-for="(data,data_key) in rs.BusinessTripList.filter(it => it.WeekType == 'next')" >
                      {{ data.City }}
                    </td>
                </tr>
              </template>
            </tbody>
          </template>
        </table>
        <template v-if="datalist.length==0">
            <div class="table-data-empty">
              暂无信息
            </div>
          </template>
      </div>
    </div>
  </div>
</template>

<script>
import { roadshowInterence } from "@/api/api.js";
import bussinessTrip from '@/views/business_trip_manage/mixins/bussinessTrip'

export default {
  name: "researcherBusinessTrip",
  mixins:[bussinessTrip],
  data() {
    this.daysArr=['周一','周二','周三','周四','周五','周六','周日']
    return {
      researcherList: [], // 研究员列表
      defaultSalesProps: {
        children: "ResearcherList",
        value: "AdminId",
        emitPath: false,
      }, //研究员级联配置
      tableDayColumns:[],
      researcher: '',
      datalist:[],
      weekQuery:0
    };
  },
  methods: {
    // 获取研究员列表
    async getResearcherList() {
      // 发送请求
      const res = await roadshowInterence.getResearcherList();
      if (res.Ret === 200) {
        //this.researcherList = this.formatResearcherList(res.Data);
        const ficcList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
        const raiList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
        this.researcherList = [{
            label:'ficc',
            ResearcherList:ficcList
        },{
            label:'权益',
            ResearcherList:raiList
        }]
      }
    },
    // 对获取到的研究员列表做处理
    formatResearcherList(list) {
      list.forEach((group) => {
        // 对组做处理
        group.label = group.GroupName;
        // 如果有列表
        group.ResearcherList &&
          group.ResearcherList.forEach((item) => {
            // 对研究员做处理
            item.label = item.RealName;
          });
      });
      // 去掉ficc全体选项
      return list.filter((group) => group.GroupName !== "ficc全体");
    },
    getWeekDays(weeknum,dateList) {
      // dateList 日期数组  weeknum 周数
      let arrList=[]

      for (let i = 0; i < weeknum; i++) {
        arrList[i]=[]
        if(dateList && dateList.length>0){
          // 有数据返回 能拿到后端返回的日期数组
          for (let j = 0; j < 7; j++) {
            let momentItem=this.$moment(dateList[(i*7+j)])
            arrList[i].push(momentItem.format('MM/DD')+this.daysArr[momentItem.weekday()])
          }
        }
        // else{
        //   // 无数据
        //   for (let j = 0; j < 7; j++) {
        //     // 规定从周六开始 到 下周五
        //     let momentItem=this.$moment().add(i, 'week').startOf('isoWeek').add((j-2),'days')
        //     arrList[i].push(
        //       momentItem.format('MM/DD')+this.daysArr[momentItem.weekday()])
        //   }
        // }
      }
      return arrList;
		},
    /* 获取表格数据 */
    getTableData() {
      // console.log(this.researcher);
      let param={
        AdminId:this.researcher||0,
        WeekQuery:this.weekQuery,
        BaseQueryDate:this.BaseDate
      }
      roadshowInterence.getResearcherBusinessTrip(param).then((res) => {
        if (res.Ret !== 200) return;
        this.BaseDate = res.Data.BaseDate
        const Data = res.Data.GroupList || []

        //处理数据结构
        let tempData=Data.filter(it => it.ResearcherList && it.ResearcherList.length > 0)
        tempData.forEach((item)=>{
          item.showDetail=true
        })
        // 取出出差表所有的日期
        let weekDateList =  tempData[0]?tempData[0].ResearcherList[0].BusinessTripList.map(item => item.WeekDate):[]
        // 获取表格头文本
        this.tableDayColumns= this.getWeekDays(2,weekDateList)

        this.datalist = tempData;
        this.$nextTick(()=>{
          $("table")
            .find("td")
            .css({ width: '5.556%' });
          $("table")
            .find(".thead-rs")
            .css({ width: '11.111%' });
        })
      });
    },
  },
  created(){
    this.getResearcherList();
    this.getTableData();
  },
  mounted(){

  }
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
@import "./statistics/index.scss";
.statistic-container {
  min-height: calc(100vh - 120px);
  height: auto;
  .statistic-select {
    display: flex;
    margin-bottom: 30px;
    align-items: center;
    justify-content: space-between;
    .center{
      display: flex;
      flex-wrap: nowrap;
    }
  }
  thead{
    tr{
      td{
        background-color:#EBEEF5!important ;
      }
    }
  }
  .table-data-empty{
    color: #666666;
    height: 530px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #DCDFE6;
    border-right: 1px solid #DCDFE6;
  }
}
</style>
