
<script setup>
import { ref,reactive,nextTick } from "vue";
import moment from "moment";
import $ from "jquery"
import { ArrowLeft,ArrowRight } from '@element-plus/icons-vue'

import { roadshowInterence } from "@/api/api.js";
import {bussinessTripH} from '@/views/business_trip_manage/hooks/bussinessTripH.js'

const bussinessTripCom = bussinessTripH()

const daysArr=['周一','周二','周三','周四','周五','周六','周日']

const researcherList=ref([]) // 研究员列表
const defaultSalesProps=reactive({
  children: "ResearcherList",
  value: "AdminId",
  emitPath: false,
}) //研究员级联配置
const tableDayColumns=ref([])
const researcher=ref('')
const datalist=ref([])

// 获取研究员列表
const getResearcherList=async()=>{
  // 发送请求
  const res = await roadshowInterence.getResearcherList();
  if (res.Ret === 200) {
    // researcherList.value = formatResearcherList(res.Data);
    const ficcList = formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
		const raiList = formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
		researcherList.value = [{
				label:'ficc',
				ResearcherList:ficcList
		},{
				label:'权益',
				ResearcherList:raiList
		}]
  }
}
// 对获取到的研究员列表做处理
const 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全体");
}
const 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=moment(dateList[(i*7+j)])
        arrList[i].push(momentItem.format('MM/DD')+daysArr[momentItem.weekday()])
      }
    }
  }
  return arrList;
}
/* 获取表格数据 */
const getTableData=()=>{
  let param={
    AdminId:researcher.value||0,
    WeekQuery:bussinessTripCom.weekQuery.value,
    BaseQueryDate:bussinessTripCom.BaseDate.value
  }
  roadshowInterence.getResearcherBusinessTrip(param).then((res) => {
    if (res.Ret !== 200) return;
    bussinessTripCom.BaseDate.value = 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):[]
    // 获取表格头文本
    tableDayColumns.value= getWeekDays(2,weekDateList)

    datalist.value = tempData;
    nextTick(()=>{
      $("table")
        .find("td")
        .css({ width: '5.556%' });
      $("table")
        .find(".thead-rs")
        .css({ width: '11.111%' });
    })
  });
}

getResearcherList()
getTableData()

</script>

<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"
        size="large"
      >
      </el-cascader>
      <div class="center">
          <el-button type="primary" @click="bussinessTripCom.toogelDate(1,getTableData)" style="width: 140px;" 
          size="large" ><el-icon :size="14" style="margin-right: 4px;"><ArrowLeft /></el-icon> 上两周</el-button>
          <el-button type="primary" @click="bussinessTripCom.toogelDate(0,getTableData)" style="width: 140px;" size="large">本期</el-button>
          <el-button type="primary" @click="bussinessTripCom.toogelDate(2,getTableData)" style="width: 140px;"
          size="large" >下两周 <el-icon :size="14" style="margin-left: 4px;"><ArrowRight /></el-icon></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 bussinessTripCom.tableTheadColumns.value" :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>
<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>
