<template>
      <div class="app-container">
          <el-container class="el-container-cal">
                  <el-aside width="200px" class="el-aside-cal">
                        <el-tree :data="teamList" :props="defaultProps" :expand-on-click-node="false" class="el-tree-pro" highlight-current node-key="id"
                          :filter-node-method="filterNode" ref="tree" :default-expanded-keys="defaultExpandedKeys" @node-click="onSelected" >
                          <span slot-scope="{ data }" :title="data.label"
                            >{{ data.label }}</span>
                        </el-tree>
                  </el-aside>
                  <el-main>
                        <el-calendar v-loading="loading" v-model="date" class="myteam-cal">
                              <template slot="dateCell" slot-scope="{date, data }">
                              <div @click.stop.prevent style="height: 100%; padding: 8px">
                                    <el-row style="height: 100%;">
                                          <el-col :span="18">
                                                <div class="solar">
                                                      {{ data.day.split('-')[1]+'-'+data.day.split('-')[2] }}
                                                </div>
                                          </el-col>
                                          <!-- <el-col :span="6">
                                                <div class="solar">
                                                      {{ data.day.split('-')[2] }}
                                                </div>
                                          </el-col> -->
                                          <!-- <el-col :span="12">
                                                <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
                                          </el-col> -->
                                          <el-col :span="6">
                                              <el-tag v-if="workdayList.indexOf(data.day)> -1" effect="dark">班</el-tag>
                                              <el-tag v-else-if="holidayList.indexOf(data.day) > -1" effect="dark" type="success">休</el-tag>
                                          </el-col>
                                    </el-row>
                                    <el-row v-for="calendarDay in calendarDayList " :key="calendarDay.theDay" @click.stop.prevent>
                                          <el-col :span="24" v-if="calendarDay.theDay == data.day && holidayList.indexOf(data.day) ==-1">
                                                <div v-for="(teamShift,index) in calendarDay.calPlanWorkunitList" :key="index" class="grid-content">
                                                    <el-button type="primary" v-if="teamShift.shiftName === '白班'" icon="el-icon-sunny">{{ teamShift.workunitName }}</el-button>
                                                    <el-button type="success" v-else-if="teamShift.shiftName === '中班'" icon="el-icon-sunrise">{{ teamShift.workunitName }}</el-button>
                                                    <el-button type="warning" v-else-if="teamShift.shiftName === '夜班'" icon="el-icon-moon">{{ teamShift.workunitName }}</el-button>
                                                </div>
                                          </el-col>
                                    </el-row>
                              </div>
                              </template>
                        </el-calendar>
                  </el-main>
          </el-container>
      </div>
</template>

<script>
import { listAllTeam  } from "@/api/mes/cal/team";
import { listCalholiday, getCalWorkunits } from "@/api/mes/cal/calholiday";
import calendar from '@/utils/calendar';
export default {
      name: 'TeamView',
      data(){
            return {
                  // 遮罩层
                  loading: false,
                  defaultExpandedKeys: [],
                  defaultProps: {
                    children: "children",
                    label: "label",
                  },
                  selectRow: {},
                  date: new Date(),
                  teamList: [], //所有的班组
                  holidayList:[],//假日
                  workdayList:[],//工作日
                  selectedType:null,
                  calendarDayList:[
                  ],
                  teamShiftQueryParams: {
                    isWork: 1
                  },
                  queryParams: {
                    theDay: null,
                    isWork: 1
                  }
            }
      },
      watch:{
            date:{
                  handler(newVal,oldVal){
                    this.queryParams.theDay = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
                    let type = ''
                    if(this.selectRow['level'] === 2 || this.selectRow['level'] === 3){
                        type = 'id'
                    }
                    this.getList(type);
                  }
            }
      },
      created() {
            // this.getList();
            this.getTeams();
      },
      methods:{
            // 筛选节点
            filterNode(value, data) {
              if (!value) return true;
              return data.label.indexOf(value) !== -1;
            },
            getTeams(){
                  listAllTeam().then(response =>{
                        this.teamList = response.data;
                        if(response.data.length > 0) {
                          this.defaultExpandedKeys.push(response.data[0]?.id)
                        }
                  });
            },
            /** 查询节假日设置列表 */
            getList(type) {
              this.loading = true;
              this.holidayList =[];
              this.workdayList =[];
              let that = this;
              if (this.teamShiftQueryParams.workunitName) {
                this.queryParams.workunitName = this.teamShiftQueryParams.workunitName
              }
              if (type) {
                  delete this.queryParams.workunitName
              } else {
                  delete this.queryParams.workunitIds
              }
              const fn = type ? getCalWorkunits : listCalholiday
              fn(this.queryParams).then(response => {
                this.calendarDayList = response.data;
                if(response.data !=null){
                      response.data.forEach(theDay => {
                            if(theDay.holidayType =='HOLIDAY'){
                            that.holidayList.push(theDay.theDay);
                            }else if(theDay.holidayType == 'WORKDAY'){
                                that.workdayList.push(theDay.theDay);
                            }
                      });
                      this.loading = false;
                }
              });
            },
            getGroupId (data) {
                  return data.reduce((pre, {id,children})=>{
                        if(children && children.length){
                              pre = [...pre, ...this.getGroupId(children)] 
                        } else {
                              pre.push(id)
                        }
                        return pre
                  },[])
            },
            //点击班组类型
            onSelected(data){
                  this.selectRow = data
              if(data['level'] === 4){
                this.loading = true;
                this.queryParams.workunitName = data['label'];
                this.queryParams.theDay = this.date.getFullYear()+'-'+(this.date.getMonth()+1)+'-'+this.date.getDate();
                this.getList()
              } else if (data['level'] === 2 || data['level'] === 3){
                  this.loading = true;
                  this.queryParams.workunitIds = this.getGroupId(data.children);
                  this.queryParams.theDay = this.date.getFullYear()+'-'+(this.date.getMonth()+1)+'-'+this.date.getDate();
                  this.getList('id')
              }
            },
            isFestival(slotDate, slotData) {
                  let solarDayArr = slotData.day.split('-');
                  let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

                  // 公历节日\农历节日\农历节气
                  let festAndTerm = [];
                  festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
                  festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
                  festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
                  festAndTerm = festAndTerm.join('')

                  return festAndTerm != ''
            },
            solarDate2lunar(solarDate) {
                  var solar = solarDate.split('-')
                  var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])

                  let lunarMD = lunar.IMonthCn + lunar.IDayCn;
                  // 公历节日\农历节日\农历节气
                  let festAndTerm = [];
                  festAndTerm.push(lunar.festival == null ? '' : ' ' + lunar.festival)
                  festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
                  festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
                  festAndTerm = festAndTerm.join('')

                  return festAndTerm == '' ? lunarMD : festAndTerm

            }
      }
}
</script>
<style>
      .el-aside-cal {
        max-height: 700px;
        padding: 0;
      }
      .el-aside-cal .el-tree-node__content span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .grid-content{
            padding: 5px 0;
      }

      .el-group-list.el-radio-group{
            display: flex;
            flex-direction: column;
            align-items:stretch;
      }

      .el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
      .el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
      .el-group-list.el-radio-group  .el-radio-button:first-child .el-radio-button__inner,
      .el-group-list.el-radio-group .el-radio-button__inner
      {
            border-radius: 0px !important;
            border: none !important;
      }

      .el-group-list.el-radio-group .el-radio-button{
            border-bottom: 1px solid #F7F7F7 !important;
      }

      .el-group-list.el-radio-group{
            border: 1px solid #dcdfe6;
      }

      .el-group-list.el-radio-group > label > span{
            width: 100%;
            text-align: left;
            padding-left: 20px;
      }
      /**本月周末设置为红色*/
      .el-calendar-table .current:nth-last-child(-n+2) .solar {
            color: red;
            font-size: small;
      }
      /**本月农历设置为灰色*/
      .el-calendar-table .current .lunar {
            color: #606266;
            font-size: small;
      }
      /**本月农历节日设置为红色*/
      .el-calendar-table .current .lunar.festival {
            color: green;
            font-size: small;
      }
      /**节假日背景设置为绿色 */
      .el-calendar-table .holiday {
            background-color: #88E325;
      }
      .myteam-cal .el-calendar-table .el-calendar-day {
            padding: 0px;
      }
      .myteam-cal .el-calendar-table__row .current {
            pointer-events: none;
      }
</style>
