<template>
  <div class="child-container" :class="[showBack ? 'changeMgPx' : '']">
    <!-- 左边菜单导航 -->
    <div class="leftAside">
      <div class="asideHeader">
        菜单导航
        <footer></footer>
      </div>
      <div class="asideItemBox">
        <div
          v-for="(item, index) in asideDate"
          :key="index"
          id="asideFooter"
          @click="handleIndex(index)"
          :class="[changeNum == index ? 'activeColor' : '']"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 右边个人信息栏 -->
    <div class="rightBox" ref="rightBox" @scroll="handScroll">
      <!-- 个人情况统计 -->
      <div class="userInfo" ref="userInfo">
        <div class="userHeaderBox">
          <div class="userText">
            <div>个人情况统计</div>
          </div>
          <div class="userOption">
            <div class="absiluteBox" v-if="showBack">
              <el-button size="small" @click="backIndex()">返回</el-button>
            </div>
            <el-date-picker
              v-model="yearParams.begainYear"
              type="year"
              placeholder="选择开始年"
              value-format="yyyy"
            >
            </el-date-picker>
            <span class="year-middle">至</span>
            <el-date-picker
              v-model="yearParams.endBegainYear"
              type="year"
              placeholder="选择结束年"
              @change="changeYear"
              value-format="yyyy"
            >
            </el-date-picker>
          </div>
        </div>
        <infoMsg ref="infoMsg"></infoMsg>
      </div>
      <!-- 基础信息 -->
      <div class="baseMsg" style="margin-top: 8px" ref="baseMsg">
        <div class="userHeaderBox">
          <div class="userText">
            <div>基础信息</div>
          </div>
        </div>
        <div class="baseMsgFooterBox">
          <baseMsg :inspectorId="inspectorId"></baseMsg>
        </div>
      </div>
      <!-- 教育背景 -->
      <div class="schoolBack" style="margin-top: 8px" ref="schoolBack">
        <div class="userHeaderBox">
          <div class="userText">
            <div>教育背景（从大学开始填写）</div>
          </div>
          <div @click.stop="addBackground()">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['inspector:global:educationBacAdd:s']"
              >新增</el-button
            >
          </div>
        </div>
        <div class="schoolBackFooterBox">
          <schoolMsg ref="teach" :inspectorId="inspectorId"></schoolMsg>
        </div>
      </div>
      <!-- 聘任信息 -->
      <div class="schoolBack" style="margin-top: 8px" ref="toAppointment">
        <div class="userHeaderBox">
          <div class="userText">
            <div>聘任信息</div>
          </div>
          <el-button
            type="success"
            icon="el-icon-edit-outline"
            size="mini"
            @click="exportAppointmentMsg()"
            v-hasPermi="['inspector:global:trainExport:s']"
            >导出</el-button
          >
          <!-- <div @click.stop="addBackground()">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['inspector:global:educationBacAdd']"
              >新增</el-button
            >
          </div> -->
        </div>
        <div class="schoolBackFooterBox">
          <appointmentMsg
            ref="appointmentMsgRefs"
            :inspectorId="inspectorId"
          ></appointmentMsg>
        </div>
      </div>
      <!-- 工作经历 -->
      <div class="schoolBack" style="margin-top: 8px" ref="work">
        <div class="userHeaderBox">
          <div class="userText">
            <div>工作经历</div>
          </div>
          <div @click="addWork()">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['inspector:global:workAdd:s']"
              >新增</el-button
            >
          </div>
        </div>
        <div class="schoolBackFooterBox">
          <work ref="workA" :inspectorId="inspectorId"></work>
        </div>
      </div>
      <!-- 检查员特质 -->
      <div class="traits" style="margin-top: 8px" ref="traitsType">
        <div class="userHeaderBox">
          <div class="userText">
            <div>检查员特质</div>
          </div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="updateTraits()"
              v-hasPermi="['inspector:global:traitsEdit:s']"
              >编辑</el-button
            >
          </div>
        </div>
        <div class="traitsFooter">
          <examine ref="examine" :inspectorId="inspectorId"></examine>
        </div>
      </div>
      <!-- 参加培训情况 -->
      <div class="traits" style="margin-top: 8px" ref="traitsSituation">
        <div class="userHeaderBox">
          <div class="userText">
            <div>参加培训情况</div>
          </div>
          <div class="footerBoxEnd">
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              size="mini"
              @click="exportTrain()"
              v-hasPermi="['inspector:global:trainExport:s']"
              >导出</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="addTraining()"
              v-hasPermi="['inspector:global:trainAdd:s']"
              >新增</el-button
            >
          </div>
        </div>
        <div class="traitsFooter">
          <trainingMsg
            ref="trainingMsgA"
            :inspectorId="inspectorId"
          ></trainingMsg>
        </div>
      </div>
      <!-- 检查情况表 -->
      <div class="traits" style="margin-top: 8px" ref="traitsTable">
        <div class="userHeaderBox">
          <div class="userText">
            <div>检查情况表</div>
          </div>
          <div class="footerBoxEnd">
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              size="mini"
              v-hasPermi="['inspector:global:examineExport:s']"
              >导出</el-button
            >
          </div>
        </div>
        <div class="traitsFooter">
          <examineTable></examineTable>
        </div>
      </div>
      <!-- 年度考核情况 -->
      <div class="traits" style="margin-top: 8px" ref="traitsMsg">
        <div class="userHeaderBox">
          <div class="userText">
            <div>年度考核情况</div>
          </div>
          <div class="footerBoxEnd">
            <el-button
              @click="exportYear"
              type="success"
              icon="el-icon-edit-outline"
              size="mini"
              v-hasPermi="['inspector:global:checkExport:s']"
              >导出</el-button
            >
          </div>
        </div>
        <div class="traitsFooter">
          <yearAssess ref="yearAssess" :inspectorId="inspectorId"></yearAssess>
        </div>
      </div>
      <!-- 奖惩信息 -->
      <div class="schoolBack" style="margin-top: 8px" ref="toIncentive">
        <div class="userHeaderBox">
          <div class="userText">
            <div>奖惩信息</div>
          </div>
          <div>
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              size="mini"
              @click="exportIncentiveMsg()"
              v-hasPermi="['inspector:global:trainExport:s']"
              >导出</el-button
            >
          </div>
        </div>
        <div class="schoolBackFooterBox">
          <incentiveMsg
            ref="incentiveMsgRefs"
            :inspectorId="inspectorId"
          ></incentiveMsg>
        </div>
      </div>
      <!-- 调派信息 -->
      <div class="schoolBack" style="margin-top: 8px" ref="toDeployed">
        <div class="userHeaderBox">
          <div class="userText">
            <div>调派信息</div>
          </div>
          <!-- <div @click.stop="addBackground()">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['inspector:global:educationBacAdd']"
              >新增</el-button
            >
          </div> -->
        </div>
        <div class="schoolBackFooterBox">
          <deployedMsg
            ref="deployedMsgRefs"
            :inspectorId="inspectorId"
          ></deployedMsg>
        </div>
      </div>
      <!-- 调派记录 -->
      <div class="schoolBack" style="margin-top: 8px" ref="toDispatchRecords">
        <div class="userHeaderBox">
          <div class="userText">
            <div>调派记录</div>
          </div>
          <!-- <div @click.stop="addBackground()">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['inspector:global:educationBacAdd']"
              >新增</el-button
            >
          </div> -->
        </div>
        <div class="schoolBackFooterBox">
          <dispatchRecords
            ref="dispatchRecordsRefs"
            :inspectorId="inspectorId"
          ></dispatchRecords>
        </div>
      </div>

      <div class="backTop" @click="backTop()" id="backTop" v-show="scrollShow">
        <i class="el-icon-caret-top"></i>
      </div>
    </div>
  </div>
</template>

<script>
//个人情况统计
import infoMsg from "../censor/components/infoMsg.vue";
//基础信息
import baseMsg from "../censor/components/baseMsg.vue";
//教育背景
import schoolMsg from "../censor/components/schoolMsg.vue";
//聘任信息
import appointmentMsg from "../censor/components/appointmentMsg.vue";
//工作经历
import work from "../censor/components/work.vue";
//检查员特质
import examine from "../censor/components/examine.vue";
//参加培训情况
import trainingMsg from "../censor/components/trainingMsg.vue";
//检查情况表
import examineTable from "../censor/components/examineTable.vue";
//年度考核情况
import yearAssess from "../censor/components/yearAssess.vue";
//奖惩信息
import incentiveMsg from "../censor/components/incentiveMsg.vue";
//调派信息
import deployedMsg from "../censor/components/deployedMsg.vue";
//调派记录
import dispatchRecords from "../censor/components/dispatchRecords.vue";
export default {
  name: "Notice",
  data() {
    return {
      scrollShow: false,
      isdisabled: false,
      allRefs: [
        {
          index: 0,
          name: "userInfo",
        },
        {
          index: 1,
          name: "baseMsg",
        },
        {
          index: 2,
          name: "schoolBack",
        },
        {
          index: 3,
          name: "toAppointment",
        },
        {
          index: 4,
          name: "work",
        },
        {
          index: 5,
          name: "traitsType",
        },
        {
          index: 6,
          name: "traitsSituation",
        },
        {
          index: 7,
          name: "traitsTable",
        },
        {
          index: 8,
          name: "traitsMsg",
        },
        {
          index: 9,
          name: "toIncentive",
        },
        {
          index: 10,
          name: "toDeployed",
        },
        {
          index: 11,
          name: "toDispatchRecords",
        },
      ],
      changeNum: 0,
      asideDate: [
        {
          name: "个人信息统计",
        },
        {
          name: "基本信息",
        },
        {
          name: "教育背景",
        },
        {
          name: "聘任信息",
        },
        {
          name: "工作经历",
        },
        {
          name: "检查员特质",
        },
        {
          name: "参加培训情况",
        },
        {
          name: "检查情况",
        },
        {
          name: "年度考核情况",
        },
        {
          name: "奖惩信息",
        },
        {
          name: "调派信息",
        },
        {
          name: "调派记录",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "2022",
        },
        {
          value: "选项2",
          label: "2023",
        },
      ],
      refsList: [
        "userInfo",
        "baseMsg",
        "schoolBack",
        "work",
        "traitsType",
        "traitsSituation",
        "traitsTable",
        "traitsMsg",
      ],
      value: "",
      year: new Date(),
      a1: 0,
      // previous: 0,
      yearParams: {
        begainYear: null,
        endBegainYear: null,
      },
    };
  },
  props: {
    showBack: {
      type: Boolean,
      default: false,
    },
    inspectorId: {
      type: Number,
      default: null,
    },
  },
  components: {
    infoMsg,
    baseMsg,
    schoolMsg,
    work,
    examine,
    trainingMsg,
    examineTable,
    yearAssess,
    appointmentMsg,
    incentiveMsg,
    deployedMsg,
    dispatchRecords,
  },

  methods: {
    backTop() {
      // 滚动页面至顶部
      this.$refs.rightBox.scrollTo({
        top: 0,
        behavior: "smooth", // 使用平滑滚动效果
      });
    },
    setInspectorId(id) {
      this.inspectorId = id;
    },
    /**年变化 */
    changeYear(e) {
      if (e) {
        if (!this.yearParams.begainYear) {
          this.$modal.msgError("请选择开始年份!");
          return;
        } else if (this.yearParams.begainYear > this.yearParams.endBegainYear) {
          this.$modal.msgError("开始年不能大于结束年!");
        } else {
          this.$refs.infoMsg.getinfoData(this.yearParams);
        }
      }
    },
    //新增培训情况
    addTraining() {
      this.$refs.trainingMsgA.handleAdd();
    },
    //新增教育背景
    addBackground() {
      this.$refs.teach.openDialog();
    },
    //新增工作经历
    addWork() {
      this.$refs.workA.workAddList();
    },
    //编辑检查员特质
    updateTraits() {
      this.$refs.examine.examineUpdate();
    },
    //导出培训情况
    exportTrain() {
      this.$refs.trainingMsgA.exportTrain();
    },
    //年度考核导出
    exportYear() {
      this.$refs.yearAssess.exportTrain();
    },
    exportIncentiveMsg() {
      this.$refs.incentiveMsgRefs.exportTrain();
    },
    exportAppointmentMsg() {
      this.$refs.appointmentMsgRefs.exportExcel();
    },
    backIndex() {
      this.$emit("getSonData", { isShow: false });
    },
    /**单击左侧tab */
    handleIndex(index) {
      this.changeNum = index;
      this.$refs[this.allRefs[index].name].scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
      this.isdisabled = true;
      setTimeout(() => {
        this.isdisabled = false;
      }, 1000);
    },
    /**容器滚动 */
    handScroll(e) {
      if (this.isdisabled == true) return;
      let scrollData = e.target.scrollTop;
      if (scrollData > 0) {
        this.scrollShow = true;
      } else {
        this.scrollShow = false;
      }
      var data = [];
      this.allRefs.forEach((value) => {
        data.push(this.$refs[value.name].offsetHeight);
      });
      let addData = 0;
      let count = 0;
      for (let i = 0; i < this.asideDate.length; i++) {
        if (
          scrollData >= addData + 8 * count &&
          scrollData < addData + data[i] + 8 * count + 8
        ) {
          this.changeNum = i;
          break;
        }
        count += 1;
        addData += data[i];
      }
    },
  },
  mounted() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
//按钮的样式
::v-deep .el-button--mini {
  padding: 6px 8px;
  border-radius: 5px;
}
::v-deep .el-button--success {
  background-color: #52cd80;
  border-color: #52cd80;
}
::v-deep .el-button--primary {
  background-color: #1e80eb;
  border-color: #1e80eb;
}
.changeMgPx {
  padding: 0 !important;
  height: 100% !important;
}
::v-deep .el-backtop {
  width: 45px;
  height: 45px;
  font-size: 16px;
}

.child-container {
  height: 100%;
  background-color: rgb(242, 242, 242);
  display: flex;
  .leftAside {
    height: 100%;
    background-color: white;
    width: 180px;
    padding: 20px;
    border-radius: 8px;
    .asideHeader {
      font-size: 16px;
      font-weight: bold;
      line-height: 30px;
      letter-spacing: 0.045em;
      color: #323233;
      footer {
        width: 50px;
        width: 34px;
        height: 3px;
        border-radius: 4px;
        background-color: #1e80eb;
      }
    }
    .asideItemBox {
      user-select: none;
      width: 100%;
      margin-top: 15px;
      cursor: pointer;
      #asideFooter {
        width: 100%;
        height: 38px;
        border-bottom: 1px solid #dee2ee;
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 0.045em;
        display: flex;
        align-items: center;
        padding-left: 12px;
      }
      .activeColor {
        background-color: #1e80eb;
        color: white;
      }
    }
  }
  .rightBox {
    flex: 1;
    margin-left: 10px;
    overflow: auto;
    position: relative;
    border-radius: 6px;

    .userInfo {
      height: 340px;
      border-radius: 8px;
      background: white;
    }
    .baseMsg {
      // margin-top: 10px;
      // height: 1430px;
      border-radius: 8px;
      background: white;
      .baseMsgFooterBox {
        padding: 10px 15px 20px;
      }
    }
    .schoolBack {
      // margin-top: 10px;
      border-radius: 8px;
      background: white;
      .schoolBackFooterBox {
        padding: 20px 15px;
      }
    }
    .traits {
      // margin-top: 10px;
      border-radius: 8px;
      background: white;
      .traitsFooter {
        padding: 20px 15px;
      }
    }
  }
}
//头部公用样式
.userHeaderBox {
  height: 50px;
  border-bottom: 1px solid #e8ebea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px 0 35px;
  position: relative;
  .absiluteBox {
    // height: 100%;
    // position: absolute;
    // right: 140px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
  }
  .userText {
    font-size: 16px;
    letter-spacing: -0.018000000000000002em;
    &::before {
      content: "";
      position: absolute;
      top: 17px;
      left: 20px;
      width: 4px;
      height: 17px;
      background: linear-gradient(180deg, #8bc2ff 0%, #1e80eb 100%);
      border-radius: 3px;
    }
  }
  .userOption {
    cursor: pointer;
    display: flex;
    align-items: center;
    .absiluteBox {
      margin-right: 15px;
    }
  }
}
::v-deep .el-date-editor {
  width: 135px;
}
.year-middle {
  margin: 0 10px;
}
.back-icon {
  font-weight: bold;
  border: 1px solid red;
}
.backTop {
  position: fixed;
  right: 35px;
  bottom: 30px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  width: 40px;
  z-index: 100;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  color: #409eff;
  font-size: 20px;
  cursor: pointer;
}
</style>
