<template>
  <div class="app-container">
    <el-container class="el-container-cal">
      <el-aside width="200px" class="el-aside-cal">
        <el-input placeholder="请输入车间名称" v-model="filterText"> </el-input>
        <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-popover
                      :ref="`popoverRef-${calendarDay.theDay}`"
                      placement="bottom"
                      trigger="click"
                      @show="handleShow(teamShift, index, `popoverRef-${calendarDay.theDay}`)"
                    >
                      <span
                        v-for="(item, index) in content"
                        :key="index"
                      >{{ item }}<br></span>
                      <div slot="reference">
                        <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-popover>
                  </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,
  getCalWorkunitsDetailApi,
} 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: {},
      filterText: null,
      date: new Date(),
      teamList: [], //所有的班组
      holidayList: [], //假日
      workdayList: [], //工作日
      selectedType: null,
      calendarDayList: [],
      teamShiftQueryParams: {
        isWork: 1,
      },
      queryParams: {
        theDay: null,
        isWork: 1,
      },
      content: "",
    };
  },
  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);
      },
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  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) {
      console.log(type);
      this.loading = true;
      this.holidayList = [];
      this.workdayList = [];
      let that = this;
      const params = JSON.parse(JSON.stringify(this.queryParams));
      if (this.teamShiftQueryParams.workunitName) {
        params.workunitName = this.teamShiftQueryParams.workunitName;
      }
      if (type) {
        delete params.workunitName;
      } else {
        // delete params.workunitIds;
        // params["workunitId"] = this.selectRow.id;
        params.workunitIds = [this.selectRow.id];
      }
      // const fn = type ? getCalWorkunits : listCalholiday;
      const fn = getCalWorkunits;
      fn(params).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;
        }
      });
    },
    async getCalWorkunitsDetail(data) {
      const result = await getCalWorkunitsDetailApi(data);
      if (result.code == 200) {
        this.content = result.data;
      }
    },
    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;
    },
    handleShow(row, index, ref) {
      Object.keys(this.$refs).forEach((key) => {
        if(key.includes("popoverRef-")) {
          if(key != ref) {
            this.$refs[key].forEach((ele) => {
              if(ele.showPopper) {
                this.$nextTick(() => {
                  ele.doClose();
                });
              }
            })
          } else {
            this.$refs[key].forEach((ele, idx) => {
              if(index != idx) {
                this.$nextTick(() => {
                  ele.doClose();
                });
              }
            })
          }
        }
      });
      this.content  = [];
      const params = {
        shiftName: row.shiftName,
        workunitId: row.workunitId,
        theDay: row.theDay,
      };
      this.getCalWorkunitsDetail(params);
    },
  },
};
</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;
}
.el-aside-cal .el-tree {
  max-height: calc(700px - 46px);
  overflow: auto;
  padding-top: 10px;
}
.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__body {
  pointer-events: none;
}
.myteam-cal .el-calendar-table .el-calendar-day {
  padding: 0px;
}
.myteam-cal .el-calendar-table__row .current .grid-content {
  pointer-events: auto;
  cursor: text;
}
.myteam-cal .el-calendar-table__row .el-calendar-day div,
.myteam-cal .el-calendar-table__row .el-calendar-day .el-button {
  cursor: text;
}
.myteam-cal .el-calendar-table__row .el-calendar-day .el-button--primary:hover {
  color: #fff;
  background-color: #0256ff;
  border-color: #0256ff;
}
</style>
