<template>
  <div class="app-container">
    <el-row :gutter="6">
      <el-col :span="9">
        <el-card :body-style="{ padding: '0px' }">
          <div style="background: #5a5e66; height: 170px; margin: 5px">
            <el-carousel height="170px">
              <el-carousel-item v-for="item in images" :key="item.id">
                <el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100%; height: 170px"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 通知 -->
          <div class="cardHeader" style="margin-top: 5px; width: 100%;">
            <div style="display: inline-block; margin-top: 5px"><i class="el-icon-message-solid"
                style="color: #2f79ff"></i> <span>通知</span></div>
            <div style="display: inline-block; height: 25px; float: right">
              <el-button type="text" class="noticeMore" style="height: 25px; width: 100px; line-height: 25px"
                @click.native.prevent="handleMore">
                查看更多
                <i class="el-icon-d-arrow-right el-icon--right" style="margin-left: -2px"></i>
              </el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <ol class="noticeUl">
            <li v-for="item in messageList" :key="item.id" style="border-bottom: 1px solid #dcdfe6">
              <a class="notice" @click.prevent="viewDetailButton(item.id)">
                {{ item.title }}
              </a>
              <span style="float: right; margin-right: 10px;">
                {{ parseTime(item.createTime, '{y}-{m}-{d}') }}
              </span>
            </li>
          </ol>
        </el-card>
        <el-card :body-style="{ padding: '0px' }" style="height: 357px; margin-top: 3px; background-color: #ffffff">
          <div class="cardHeader" style="margin-top:10px">
            <div style="display: inline-block; vertical-align:middle">
              <i class="el-icon-time" style="color: #2f79ff;"></i> <span>值班表</span>
            </div>
            <div style="display: inline-block;  height: 25px;float: right">
              <el-button type="text" class="noticeMore"
                style="float: right; height: 25px;  width: 100px;  line-height: 25px; "
                @click.native.prevent="handleMore2"> 查看更多
                <i class="el-icon-d-arrow-right el-icon--right"></i>
              </el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <div style="margin:5px">
            <!--            :row-style="{ height: '30px' }" :cell-style="{ padding: '0' }" style="font-size: 12px"-->
            <el-table border :data="dutyTable" width="100%" height="300px" stripe @row-click="redirectDutyInfo">
              <el-table-column label="标题" prop="dutyName" min-width="120" show-overflow-tooltip align="center" />
              <el-table-column label="类型" prop="dutyType" min-width="60" align="center">
                <template v-slot="scope">
                  {{ getDutyType(scope.row.dutyType) }}
                </template>
              </el-table-column>
              <el-table-column label="节日" min-width="60" prop="holidayName" align="center" />
              <el-table-column label="说明" min-width="120" prop="remarks" show-overflow-tooltip align="center" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <!-- 个人信息0 -->
        <el-row>
          <el-card :body-style="{ padding: '0px' }" style="height: 220px; background-color: #ffffff">
            <div class="cardHeader" style="margin-top: 5px">
              <div style="display: inline-block; vertical-align: middle"><i class="el-icon-user-solid"
                  style="color: #2f79ff"></i>
                <span>&emsp;个人信息</span>
              </div>
            </div>
            <el-divider></el-divider>
            <div style="margin-top: 15px">
              <el-row :gutter="20">
                <el-col :span="5" :offset="1">
                  <div class="block">
                    <el-image :src="imageUrl" style="width: 100%; "></el-image>
                  </div>
                </el-col>
                <el-col :span="17" :offset="1" class="info">
                  <el-row><span class="name">{{ userInfo.teacherName }}</span></el-row>
                  <el-row style="margin: 13px 0px">
                    <el-col :span="12">
                      <svg-icon icon-class="phone-telephone" style="font-size: 16px"></svg-icon>
                      &emsp;
                      <span>联系电话：</span>
                      {{ userInfo.teacherTel }}
                    </el-col>
                    <el-col :span="11" :offset="1">
                      <svg-icon icon-class="degree-hat" style="font-size: 16px"></svg-icon>
                      &emsp;<span>当前学历：</span>
                      <dict-tag style="display: inline-block" :options="dict.type.education"
                        :value="userInfo.education" />
                    </el-col>
                  </el-row>
                  <el-row style="margin: 13px 0px">
                    <el-col :span="12">
                      <svg-icon icon-class="dep" style="font-size: 16px"></svg-icon>
                      &emsp;<span>所属部门：</span>{{ userInfo.deptName }}
                    </el-col>
                    <el-col :span="11" :offset="1">
                      <svg-icon icon-class="worknum" style="font-size: 16px"></svg-icon>
                      &emsp;
                      <span>工作编号：</span>{{ userInfo.teacherCode }}
                    </el-col>
                  </el-row>
                  <el-row style="margin: 13px 0px">
                    <svg-icon icon-class="key" style="font-size: 16px"></svg-icon> &emsp;
                    <span>角色权限：</span>{{ userInfo.roles }}
                  </el-row>
                  <el-row style="margin: 13px 0px">
                    <svg-icon icon-class="address" style="font-size: 16px"></svg-icon>
                    &emsp;
                    <span>家庭地址：</span>{{ userInfo.homeAddress }}
                  </el-row>

                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-row>
        <!-- 审批入口 -->
        <el-row>
          <el-card :body-style="{ padding: '0px' }"
            style="height: 210px; width: 100%; margin-top: 3px; background-color: #ffffff">
            <div class="cardHeader" style="margin-top: 5px">
              <div style="display: inline-block; vertical-align: middle"><i class="el-icon-s-check"
                  style="color: #2f79ff"></i>
                <span>&emsp;我的任务</span>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="card-blocks">
              <el-badge v-for="item in approves" style=" border-radius: 5px; margin: 10px 20px"
                :class="{ headerBox: taskNumList.hasOwnProperty(item.name) && taskNumList[item.name] != 0 }"
                :value="handleTaskNum(item)" :key="item.label">
                <el-button @click="handleInto(item.path)" type="primary" plain size="mini"
                  style="min-width: 118px; height: 30px">
                  {{ item.label }}
                </el-button>
              </el-badge>
            </div>
          </el-card>
        </el-row>
        <!-- 调整常用功能 -->
        <el-row>
          <el-card :body-style="{ padding: '0px' }" style="height: 315px; margin-top: 3px; background-color: #ffffff">
            <div class="cardHeader" style="margin-top: 5px">
              <div style="display: inline-block; vertical-align: middle"><i class="el-icon-message-solid"
                  style="color: #2f79ff"></i>
                <span>&emsp;调整常用功能</span>
              </div>
              <div style="display: inline-block; height: 25px; width: 100px; float: right">
                <el-button type="text" class="noticeMore" style="height: 25px; line-height: 25px; margin-left: 20px"
                  @click.native.prevent="handleCommonFunctions">
                  查看更多
                  <i class="el-icon-d-arrow-right el-icon--right" style="margin-left: -2px"></i>
                </el-button>
              </div>
            </div>
            <el-divider></el-divider>
            <div v-loading="offentUse" class="oftenUseBox" style="height: 430px; overflow: auto">
              <div style="margin-top: 10px;" v-for="item in blocks" :key="item.id">
                <div @click="handleInto(item.path)">
                  <div style="margin-bottom: 5px">
                    <svg-icon :icon-class="item.menuPic == '#' ? '菜单管理' : item.menuPic"
                      style="font-size: 28px"></svg-icon>
                  </div>
                  <span style="font-size: 14px">{{ item.menuName }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{ padding: '0px' }" style="background-color: #fdfdfe; height:750px">
          <div style="height: 275px; width: 100%; position: relative">
            <div style="position: absolute; width: 100%">
              <el-image :src="indexCalendarImg" style="width: 100%; height: 270px" />
            </div>
            <div style="position: absolute; width: 100%">
              <div style="font-family: PingFang SC; color: #ffffff; font-size: 16px; margin-top: 20px; margin-left: 20px">
                {{ user.userName }}, 欢迎登录智慧校园管理系统!
              </div>
              <div style="font-size: small; margin-top: 8px; color: #96c4f5; margin-left: 20px">
                上次登录时间：{{ user.loginDate }}
              </div>
              <div style="height: 40px; width: 100%; margin-top: 18px">
                <span
                  style="width: 106px; height: 70px; font-family: PingFang SC; font-weight: 500; color: #ffffff; font-size: 32px; margin-left: 20px">{{
                    weatherData.temp
                  }}℃</span>
                <div style="display: inline-block; width: 50px; color: white; margin-left: 15px; font-size: 12px">
                  <div style="display: block">{{ weatherData.weather }}</div>
                  <div style="display: block">{{ weatherData.cityname }}</div>
                </div>
                <div
                  style="display: inline-block; width: 70px; color: white; float: right; font-size: 12px; line-height: 22px">
                  <div style="margin-left: 20px">{{ weekday }}</div>
                  <div style="">{{ date }}</div>
                </div>
              </div>
            </div>
            <div class="cardHeader" style="position: absolute; top: 235px; margin-left: 10px"><i class="el-icon-date"
                style="color: #2f79ff"></i>
              <span>&emsp;校 历</span>
            </div>
          </div>
          <div class="calendar">
            <el-calendar v-model="today">
              <template slot="dateCell" slot-scope="{ date, data }">
                <div @click="calendarClick(date)">
                  <p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(2).join('-') }}
                    {{ data.isSelected ? '✔️' : '' }}</p>
                </div>
              </template>
            </el-calendar>
          </div>
          <el-divider></el-divider>
          <div class="cardHeader" style="margin-left: 15px; margin-top: 10px">今日工作</div>
          <div class="mt5" v-loading="todayWorkLoading" style="width: 100%; margin-left: 15px;height: 110px;">
            <div v-if="haveThings" style="width: 100%; height: 100%; overflow: auto;">
              <div v-for="item in things" :key="item.label" style="margin-bottom: 5px; ">
                <el-image :src="taskIcon" style="width: 15px; height: 15px"></el-image>
                <span style="font-family: PingFang SC; font-weight: 700; margin-left: 10px; font-size: 15px">{{
                  item.detailName
                }} ：</span>
                <span style="margin-top: 10px; font-weight: 200; font-size: 13px">
                  {{ item.startTime }}
                  ~
                  {{ item.endTime }}
                </span>
              </div>
            </div>


            <div v-else>
              <el-image :src="taskIcon" style="width: 20px; height: 20px"></el-image> &emsp; 今日暂无事件！
            </div>
          </div>


        </el-card>
      </el-col>
    </el-row>
    <!--    </div>-->
    <!-- 通知公告详情内容对话框 -->
    <div>
      <el-dialog title="通知公告" :visible.sync="viewDetail" width="1100px" append-to-body>
        <el-card>
          <div style="text-align: center">
            <h1 style="display: inline-block">{{ form.title }}</h1>
          </div>
          <span class="info-container" :disabled="true" v-html="form.content"></span>
          <br /><br />
          <div style="float: right;">
            <el-descriptions :column="3">
              <el-descriptions-item label="接收人">{{ resolveRole(form.receivePacket) }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="viewDetail = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 值班表详情内容对话框 -->
    <div>
      <el-dialog title="值班详情" :visible.sync="viewDuty" width="1500px" append-to-body>
        <!--        <el-card>-->
        <el-row type="flex" justify="center" :gutter="10">
          <h1>{{ dutyList.dutyName }}</h1>
        </el-row>
        <el-row>
          <el-col>
            <h3>填报单位：东营市二中</h3>
          </el-col>
        </el-row>


        <el-table key="a" v-if="dutyList.dutyType === '1'" border v-loading="loading2" :data="dutyList.list"
          style="width: 100%" :span-method="objectSpanMethod2">
          <el-table-column label="节日" align="center">
            <template slot-scope="scope">
              {{ dutyList.holidayName }}
            </template>
          </el-table-column>
          <el-table-column label="日期" align="center" prop="dutyDeDate" />
          <el-table-column label="星期" align="center" prop="dutyDeWeek" />
          <el-table-column label="行政值班" align="center">
            <el-table-column label="值班人员" align="center" prop="adminPerson" />
            <el-table-column label="值班电话" align="center" prop="adminTel" />
            <el-table-column label="手机" align="center" prop="adminPhone" />
          </el-table-column>
          <el-table-column label="办公室值班" align="center">
            <el-table-column label="人员" align="center" prop="officerPerson" />
            <el-table-column label="值班电话" align="center" min-width="110px" prop="officerTel" />
            <el-table-column label="手机" align="center" min-width="110px" prop="officerPhone" />
          </el-table-column>
          <el-table-column label="门卫值班" align="center">
            <el-table-column label="人员" min-width="110px" align="center" prop="guardPerson">
              <template slot-scope="scope">
                <div style="word-wrap: break-word; word-break: break-all;">
                  {{ scope.row.guardPerson }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="值班电话" min-width="110px" align="center" prop="guardTel" />
            <el-table-column label="手机" min-width="110px" align="center" prop="guardPhone" />
          </el-table-column>
          <el-table-column label="学生宿舍值班" align="center">
            <el-table-column label="人员" min-width="180px" align="center" prop="dormPerson">
              <template slot-scope="scope">
                <div style="word-wrap: break-word; word-break: break-all;">
                  {{ scope.row.dormPerson }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="手机" min-width="110px" align="center" prop="dormPhone" />
          </el-table-column>
        </el-table>


        <el-table key="b" v-else border v-loading="loading2" :data="dutyList.list" :span-method="objectSpanMethod">
          <el-table-column label="节日" align="center" width="180">
            <template slot-scope="scope">
              {{ dutyList.holidayName }}
            </template>
          </el-table-column>
          <el-table-column label="日期" align="center" prop="dateAndWeek" min-width="80" />
          <el-table-column label="带班领导" align="center" prop="leader" />
          <el-table-column label="职务" align="center" prop="postName" />
          <el-table-column label="电话" align="center" prop="dutyDeTel" />
          <el-table-column label="手机" align="center" prop="dutyDePhone" />
          <el-table-column label="值班人员、手机" align="center" prop="personAndPhone" />
        </el-table>
        <br />
        <p><b>说明：</b> {{ dutyList.remarks }}</p>
        <!--        </el-card>-->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="viewDuty = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 调整常用功能对话框 -->
    <div>
      <el-dialog title="常用功能列表" :visible.sync="viewDetail1" width="600px" append-to-body v-if="viewDetail1">
        <el-table @row-click="clickRow" ref="table" :data="adjustmentBlocks" @selection-change="handleSelectionChange"
          height="260px" v-loading="loading">
          <el-table-column type="selection" width="100"></el-table-column>
          <el-table-column prop="icon" label="功能图标" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <svg-icon :icon-class="scope.row.icon" style="font-size: 28px"></svg-icon>
            </template>
          </el-table-column>
          <el-table-column prop="menuName" label="功能名称" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showBlocksSave">确 定</el-button>
          <el-button @click="viewDetail1 = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 我的任务对话框 -->
    <div>
      <el-dialog title="我的任务" :visible.sync="viewDetail2" width="960px" append-to-body>
        <el-card>
          <div style="text-align: center">
            <h3 style="display: inline-block">欢迎来到我的任务对话框！该功能还在持续完善中！请移步其他功能页面！</h3>
          </div>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="viewDetail2 = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Blocks, approves } from '@/enums/home'
import { getList, getInfoOne } from '@/api/smartSchool/informationPush/school'
import { getCourseInfoData } from '@/utils/utilLibrary/getCourseInfo'
import {
  getDutyTableList,
  getDutyDetail,
  getWeather,
  getThingListByTime,
  commonfunctionsList,
  showCommonfunctionsList,
  addCommonFunctionsToShow,
  getNoticeList,
  getTaskNum
} from '@/api/smartSchool/index'
import { getUser } from '@/api/system/user'
// 任务模块
// import { taskList } from "@/api/smartSchool/studentManage/studentLeave";
import { listPic } from '@/api/smartSchool/schoolManage/introduce/pic'
import router from "../router";
import Cookies from "js-cookie";
import * as dd from 'dingtalk-jsapi';
import { getToken, setToken, removeToken } from '@/utils/auth'
import { getCode } from "@/api/ddLogin";

export default {
  name: 'Index',
  dicts: ['education', 'dutytype'],
  data() {
    return {
      timer: "",
      pev: process.env.VUE_APP_BASE_API,
      today: new Date(),
      //各模块任务数量
      taskNumList: {},
      //今日工作加载效果
      todayWorkLoading: false,
      //常用功能加载效果
      offentUse: false,
      // 公告详情对话框
      viewDetail: false,
      viewDuty: false,
      // 调整常用功能对话框
      viewDetail1: false,
      // 我的任务对话框
      viewDetail2: false,
      // 常用功能列表项开关
      switchValue: false,
      // 公告详情表单参数
      form: {},
      // 公告详情角色列表
      roleList: [],
      dutyList: {},
      // 天气数据
      weatherData: {},
      // 天气用户数据
      user: {},
      weekday: '',
      date: '',
      dateArr: [],
      dateIndex: 0,
      weekArr: [],
      weekIndex: 0,
      teacherArr: [],
      teacherIndex: 0,
      telArr: [],
      telIndex: 0,
      workArr: [],
      workIndex: 0,
      // 点击日历传回来的事件
      things: [],
      // 判断有无事件
      haveThings: false,
      indexCalendarImg: require('@/assets/images/indexCalendar.png'),
      taskIcon: require('@/assets/images/taskIcon.png'),
      screenWidth: document.body.clientWidth, // 屏幕宽度
      screenHeight: document.body.clientHeight, // 屏幕高度
      // 轮播图数据
      images: [],
      // images: [
      //   {url: require('@/assets/images/school-image.jpg'), id: 1},
      //   {url: require('@/assets/images/school-image002.jpg'), id: 2},
      //   {url: require('@/assets/images/school-image003.jpg'), id: 3},
      //   {url: require('@/assets/images/school-image004.jpg'), id: 4}
      // ],
      //审批模块
      approves: approves,
      // 功能模块(显示)
      // blocks: Blocks,
      blocks: [],
      // 功能模块(全部)
      adjustmentBlocks: [],
      // 添加为展示的功能模块
      selectCommonFunctions: {},
      // 功能模块调整时获取数据的加载效果
      loading: true,
      loading2: true,
      // 个人信息--头像
      imageUrl: this.$store.state.user.avatar,
      // 值班表数据
      dutyTable: [],
      // 消息列表
      messageList: [],
      // 用户信息
      userInfo: {}
    }
  },
  computed: {
    resolveRole() {
      return value => {
        const result = this.roleList.find(item => item.roleId === value)
        return result ? result.roleName : ''
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {

    this.timer = setInterval(() => {
      this.getMessageList()
      this.taskNum()
    }, 30000)
  },

  activated() {
    this.timer = setInterval(() => {
      this.getMessageList()
      this.taskNum()
    }, 30000)
    this.taskNum()
  },
  deactivated() {
    clearInterval(this.timer)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },

  methods: {


    //从后端获取任务数量
    taskNum() {
      getTaskNum().then(res => {
        // console.log('taskNumList', res)
        this.taskNumList = res.data
      })
    },

    //获取相应模块的任务数量
    handleTaskNum(item) {
      if (this.taskNumList.hasOwnProperty(item.name) && this.taskNumList[item.name] != 0) {
        return this.taskNumList[item.name]
      } else return null
    },
    // 翻译字典
    getDutyType(dutyType) {
      if (this.dict.type.dutytype.length != 0) {
        for (let i = 0; i < this.dict.type.dutytype.length; i++) {
          let item = this.dict.type.dutytype[i]
          if (dutyType == item.value) return item.label
        }
      }
    },

    async redirectDutyInfo(rowData, column, e) {
      this.loading2 = true
      this.viewDuty = true
      let fetchRes = (await getDutyDetail(rowData.id, rowData.dutyType)).data
      this.dutyList = {
        ...fetchRes,
        dutyType: rowData.dutyType,
        holidayName: rowData.holidayName
      }
      this.loading2 = false
    },


    getWeatherData() {
      getWeather().then(res => {
        this.weatherData = JSON.parse(JSON.stringify(res.weather))
        this.user = JSON.parse(JSON.stringify(res.user))
        this.user.loginDate = new Date(this.user.loginDate).toLocaleString()
        this.weekday = res.weekday
        this.date = res.date
      })
    },
    //日历点击事件
    calendarClick(calendarDate) {
      this.todayWorkLoading = true
      let date = new Date(calendarDate).toLocaleDateString()
      getThingListByTime({ calendarDate: date }).then(res => {
        if (res.data.length === 0) {
          this.things = ''
          this.haveThings = false
        } else {
          this.things = res.data
          this.haveThings = true
        }
        this.todayWorkLoading = false
      })
    },
    getDutytable() {
      getDutyTableList().then(res => {
        this.dutyTable = res.rows
        // this.merge(this.dutyTable)
      })
    },
    // 初始化
    init() {
      this.getUserInfo()
      this.getMessageList()
      this.getShowCommonfunctionsList()
      this.getDutytable()
      this.getWeatherData()
      this.getRoleList()
      this.taskNum()
      let date = new Date()
      this.calendarClick(date)
      this.getPic()
    },

    // 获取用户信息
    getUserInfo() {
      this.userInfo = this.$store.state.user.teacher
      console.log('this.userInfo', this.$store.state.user.teacher);
    },

    // 获取通知公告信息
    getMessageList() {
      getNoticeList({ pageNum: 1, pageSize: 5 })
        .then(response => {
          this.messageList = response.rows
        })
        .catch(error => {
        })
    },

    /** 进入对应模块 */
    handleInto(path) {
      this.$router.push({
        path: path
      })
    },

    /** 进入通知公告查看更多 */
    handleMore() {
      this.$router.push({
        path: '/indexMould/notification/message'
      })
    },
    handleMore2() {
      this.$router.push({
        path: '/indexMould/myDuty'
      })
    },
    // 进入公告详情
    viewDetailButton(row) {
      this.viewDetail = true
      const id = row
      getInfoOne(id).then(response => {
        this.form = response.data
      })
    },

    /** 我的任务查看更多 */
    handleMyTask() {
      this.$router.push({
        path: '/device/repireTask'
      })
    },
    // 获取首页显示常用功能列表
    getShowCommonfunctionsList() {
      this.offentUse = true
      showCommonfunctionsList().then(res => {

        this.blocks = res.data
        this.offentUse = false
      })
    },
    /** 获取调整常用功能列表 */
    getCommonFunctionsList() {
      this.loading = true
      commonfunctionsList().then(res => {
        this.adjustmentBlocks = res.menus
        this.selectedAlreadyCommonFunctions()
      })
    },
    /** 进入调整常用功能 */
    handleCommonFunctions() {
      this.viewDetail1 = true
      this.getCommonFunctionsList()
    },
    // 默认选中已经展示的功能项
    selectedAlreadyCommonFunctions() {
      this.loading = false
      this.adjustmentBlocks.forEach(data => {
        this.blocks.forEach(row => {
          if (data.menuName == row.menuName) {
            this.$nextTick(() => {
              this.$refs.table.toggleRowSelection(data, true)
            })
          }
        })
      })
    },
    // 点击行选中
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // 选中数据变化
    handleSelectionChange(selection) {
      this.selectCommonFunctions = selection.map(item => item)
    },
    // 添加保存选中的常用功能
    showBlocksSave() {
      addCommonFunctionsToShow(this.selectCommonFunctions).then(res => {
        if (res.code === 200) {
          this.getShowCommonfunctionsList()
        }
      })
      this.viewDetail1 = false
    },

    // 公告信息详情页面获取角色信息
    getRoleList() {
      getUser()
        .then(response => {
          this.roleList = response.roles
        })
        .catch(error => {
        })
    },
    // 获取课程表信息
    getCourseInfo() {
      this.courseList = getCourseInfoData()
    },
    // 初始化合并行数组
    // mergeInit() {
    //   this.dateArr = []
    //   this.dateIndex = 0
    //   this.weekArr = []
    //   this.weekIndex = 0
    //   this.teacherArr = []
    //   this.teacherIndex = 0
    //   this.telArr = []
    //   this.telIndex = 0
    //   this.workArr = []
    //   this.workIndex = 0
    // },

    // merge(data) {
    //   this.mergeInit()
    //   if (data.length > 0) {
    //     for (let i = 0; i < data.length; i++) {
    //       if (i == 0) {
    //         this.dateArr.push(1) //日期
    //         this.dateIndex = 0
    //         this.weekArr.push(1) //星期
    //         this.weekIndex = 0
    //         this.teacherArr.push(1)
    //         this.teacherIndex = 0
    //         this.telArr.push(1)
    //         this.telIndex = 0
    //         this.workArr.push(1)
    //         this.workIndex = 0
    //       } else {
    //         //第一列
    //         if (data[i].dutyTime == data[i - 1].dutyTime) {
    //           this.dateArr[this.dateIndex] += 1
    //           this.dateArr.push(0)
    //         } else {
    //           this.dateArr.push(1)
    //           this.dateIndex = i
    //         }
    //         //第二列
    //         if (data[i].weekDay == data[i - 1].weekDay && data[i].dutyTime == data[i - 1].dutyTime) {
    //           this.weekArr[this.weekIndex] += 1
    //           this.weekArr.push(0)
    //         } else {
    //           this.weekArr.push(1)
    //           this.weekIndex = i
    //         }
    //         //第三列
    //         if (data[i].teacherName == data[i - 1].teacherName && data[i].dutyTime == data[i - 1].dutyTime) {
    //           this.teacherArr[this.teacherIndex] += 1
    //           this.teacherIndex.push(0)
    //         } else {
    //           this.teacherArr.push(1)
    //           this.teacherIndex = i
    //         }
    //         //第四列
    //         if (data[i].teacherTel == data[i - 1].teacherTel && data[i].dutyTime == data[i - 1].dutyTime) {
    //           this.telArr[this.telIndex] += 1
    //           this.telIndex.push(0)
    //         } else {
    //           this.telArr.push(1)
    //           this.telIndex = i
    //         }
    //         //第五列
    //         if (data[i].dutyContent == data[i - 1].dutyContent && data[i].dutyTime == data[i - 1].dutyTime) {
    //           this.workArr[this.workIndex] += 1
    //           this.workIndex.push(0)
    //         } else {
    //           this.workArr.push(1)
    //           this.workIndex = i
    //         }
    //       }
    //     }
    //   }
    // },

    //  合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % this.dutyList.list.length === 0) {
          return {
            rowspan: this.dutyList.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

    },
    //  合并单元格
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % this.dutyList.list.length === 0) {
          return {
            rowspan: this.dutyList.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex >= 9 && columnIndex <= 13) {
        if (rowIndex === 0) {
          return {
            rowspan: this.dutyList.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        if (this.dateArr[rowIndex]) {
          //第1列 日期
          const _row_0 = this.dateArr[rowIndex]
          const _col_0 = _row_0 > 0 ? 1 : 0
          return {
            rowspan: _row_0,
            colspan: _col_0
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex == 1) {
        if (this.weekArr[rowIndex]) {
          //第2列 星期
          const _row_1 = this.weekArr[rowIndex]
          const _col_1 = _row_1 > 0 ? 1 : 0
          return {
            rowspan: _row_1,
            colspan: _col_1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex == 2) {
        if (this.teacherArr[rowIndex]) {
          //第3列 值班人员
          const _row_2 = this.teacherArr[rowIndex]
          const _col_2 = _row_2 > 0 ? 1 : 0
          return {
            rowspan: _row_2,
            colspan: _col_2
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex == 3) {
        if (this.telArr[rowIndex]) {
          // 第4列 联系电话
          const _row_3 = this.telArr[rowIndex]
          const _col_3 = _row_3 > 0 ? 1 : 0
          return {
            rowspan: _row_3,
            colspan: _col_3
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }

      // else if (columnIndex == 4) {
      //   if (this.workArr[rowIndex]) {
      //     // 第5列 值班内容
      //     const _row_4 = this.workArr[rowIndex];
      //     const _col_4 = _row_4 > 0 ? 1 : 0;
      //     return {
      //       rowspan: _row_4,
      //       colspan: _col_4,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },

    getPic() {
      listPic(this.queryParams).then(response => {
        let images = response.rows
        let imagess = images.filter(item => item.isShow == 1)
        this.images = imagess.map(item => {
          return { url: this.pev + item.picUrl }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-box {
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px;
}

::v-deep .el-descriptions-item__cell {
  padding-bottom: 25px !important;
}

.card-title {
  display: flex;
  align-items: center;

  &:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 30px;
    margin-right: 5px;
    background-color: #00afff;
  }
}

// 快速通道：各个模块
.card-blocks {
  width: 100%;
  height: 210px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

@keyframes fade {
  from {
    border: 2px solid #ffffff;
  }

  50% {
    border: 2px solid red;
  }

  to {
    border: 2px solid #ffffff;
  }
}

.headerBox {
  height: 34px;
  border-radius: 5px;
  animation: fade 600ms infinite;
}

a:hover {
  color: #409eff;
}
</style>
<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

/*设置日历单元格样式（宽、高，边框）*/
/deep/ .el-calendar-day {
  line-height: 0px !important;
  width: 65px !important;
  height: 25px !important;
  font-size: 11px;
  border: none;
  text-align: center;
}

.oftenUseBox {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 90px;
  grid-gap: 10px;
  text-align: center;
  /*justify-items:end;*/

}

.oftenUse :hover {
  cursor: pointer;
}

.noticeUl {
  width: 100%;
  margin-left: -20px;
  list-style-type: none;
  font-size: 13px;
}

.noticeUl li {
  line-height: 30px;
  height: 30px;
  /*background: #1ab394;*/
}

.notice {
  float: left;
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.el-table .el-table__cell {
  padding: 0px 0px;
}

.notice a:link {
  color: #070707;
}

.name {
  width: 54px;
  height: 25px;
  font-family: PingFang SC;
  font-weight: 700;
  color: #2d2d2d;
  font-size: 15px;
  text-align: center;
}

.info {
  /*width: 162px;*/
  height: 20px;
  font-family: PingFang SC;
  color: #2d2d2d;
  font-size: 12px;
}


.taskNum {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ff0000;
  border-radius: 50%;
  margin-left: 102px;
  margin-top: -6px;
  z-index: 9;
  color: #ffffff;
  font-size: 13px;
  text-align: center;
}

.info-container {
  max-height: 500px;
  overflow-y: auto;
}

/*设置日历单元格样式（宽、高，边框）*/
/deep/ .el-calendar-day {
  line-height: 0px !important;
  width: 100% !important;
  height: 30px !important;
  font-size: 13px;
  border: none;
  text-align: center;
}

.calendar {
  /*background: #7a6df0;*/
  width: 100%;
  height: 315px;
}

/deep/ .cardHeader {
  width: 100%;
  height: 25px;
  /*color: #2f79ff;*/
  font-family: PingFang SC;
  font-weight: 900;
  color: #2d2d2d;
  font-size: 15px;
  /*margin-top: 5px;*/
  /*background: #1ab394;*/
  margin-left: 10px;
}

/deep/ .noticeMore {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
}

.el-divider--horizontal {
  margin-top: 12px;
  margin-bottom: 2px;
}

/deep/ .el-table .cell {
  height: 25px;
  line-height: 25px;
  padding: 0px;
  margin: 0px;
  font-size: 6px;
}

.el-divider--horizontal[data-v-a83bd3b0] {
  margin-top: 5px;
}

.el-table /deep/ .cell {
  overflow: visible;
  align-items: center;
}
</style>



