<template>
  <div class='infoWrap'>
    <div class="left">
      <div class="unread"
           @click="onLookMessage('all')">全部</div>
      <div class="unread"
           @click="onLookMessage('0')"> <img :src="img.boxicon"
             alt=""> 未读消息
        <div class="count"
             v-if="noReadMessage >= 1">{{ noReadMessage }}</div>
      </div>
      <div class="read"
           @click="onLookMessage('1')">
        <img :src="img.bookicon"
             alt="">
        已读消息</div>
    </div>
    <div class="middle">
      <div class="msgItem"
           :class="[isCheckMessage == item.id ? 'active' : '']"
           @click="onClickRead(item)"
           v-for="(item, index) in dataList"
           :key="index">
        <!-- <h6 class="type"></h6> -->
        <h4 class="name">请假处理<span class='time'>{{ item.createOn }}</span>
          <div class="dot"
               v-if="item.readStatus == 0"></div>
        </h4>
        <p class='msg'>{{ item.content }}</p>
      </div>
      <el-pagination style="text-align: right"
                     small
                     v-if="dataList.length > 0"
                     @current-change="onChange"
                     :hide-on-single-page="pageInfo.isSinglePage"
                     layout="prev, pager, next"
                     :total="pageInfo.total">
      </el-pagination>
    </div>
    <div class="right"
         v-if="showRight">
      <div class="rightWrap">
        <img src="@/assets/images/base/placehorder-icon.png"
             class="header"
             alt="">
        <div class="info">
          <h2>{{ showMessage.user.username }}
            <!-- <span class="phone">【{{ showMessage.user.phone }}】</span> -->
            <el-tag v-if="showMessage.status == 'PASS'"
                    type="success"
                    effect="plain">已处理</el-tag>
            <el-tag v-if="showMessage.status == 'REJECT'"
                    type="danger"
                    effect="plain">已拒绝</el-tag>
          </h2>
          <p class="subMsg">发至 <span class='san'></span> <span style="margin-left:30px">我</span></p>
          <div class="textWrap">
            <p>审批事项: 请假</p>
            <p>开始时间: {{ showMessage.startTime }}</p>
            <p>结束时间: {{ showMessage.endTime }}</p>
            <p>备注: {{ showMessage.remark }}</p>
          </div>
          <div class="leaverecord" v-if="showMessage.vipCourse.length > 0">
            <el-table :data="showMessage.vipCourse"
                      style="width: 100%"
                      :header-cell-style="{background:'#EDEEF0',color:'#444'}">
              <el-table-column label="类型"
                               width="100px">
                <template slot-scope="scope">
                  {{ scope.row.before.type == "VIP" ? 'VIP课' : '乐团课' }}
                </template>
              </el-table-column>
              <el-table-column prop="before.name"
                               label="班名"
                               width="140px">
              </el-table-column>
              <el-table-column label="调整前日期">
                <template slot-scope="scope">
                  {{ scope.row.before.classDate | formatTimer }}
                </template>
              </el-table-column>
              <el-table-column label="上课时间">
                <template slot-scope="scope">
                  {{ scope.row.before.startClassTime | getFormatTime(scope.row.before.endClassTime) }}
                </template>
              </el-table-column>
              <el-table-column label="调整后日期">
                <template slot-scope="scope" v-if="scope.row.before.type == 'VIP'">
                  {{ scope.row.after.classDate | formatTimer }}
                </template>
              </el-table-column>
              <el-table-column label="调整后时间">
                <template slot-scope="scope" v-if="scope.row.before.type == 'VIP'">
                  {{ scope.row.after.startClassTime | getFormatTime(scope.row.after.endClassTime) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="leaverecord" v-if="showMessage.musicGroupCourse.length > 0">
            <el-table :data="showMessage.musicGroupCourse"
                      style="width: 100%; padding-top: 10px;"
                      :header-cell-style="{background:'#EDEEF0',color:'#444'}">
              <el-table-column label="乐团编号" prop="before.musicGroupId"
                               width="100px">
              </el-table-column>
              <el-table-column label="类型"
                               width="100px">
                <template slot-scope="scope">
                  {{ scope.row.before.type == "VIP" ? 'VIP课' : '乐团课' }}
                </template>
              </el-table-column>
              <el-table-column prop="before.name"
                               label="班名"
                               width="140px">
              </el-table-column>
              <el-table-column label="调整前日期">
                <template slot-scope="scope">
                  {{ scope.row.before.classDate | formatTimer }}
                </template>
              </el-table-column>
              <el-table-column label="上课时间">
                <template slot-scope="scope">
                  {{ scope.row.before.startClassTime | getFormatTime(scope.row.before.endClassTime) }}
                </template>
              </el-table-column>
              <!-- <el-table-column label="操作" v-if="showMessage.status == 'PASS'">
                  <template slot-scope="scope">
                    <el-button @click="onClssTime(scope.row)" type="text">调整</el-button>
                  </template>
              </el-table-column> -->
            </el-table>
          </div>

        </div>
      </div>
      <div v-permission="'teacherLeaveRecord/approve'"
           class="infoFoot"
           v-if="showMessage.status == 'ING'">
        <div class="noBtn"
             @click="onSubmit(showMessage, 'REJECT')">拒绝</div>
        <div class="yesBtn"
             @click="onSubmit(showMessage, 'PASS')">同意</div>
      </div>
    </div>

    <el-dialog title="课程调整"
               width="400px"
               :before-close="handleClose"
               :visible.sync="dialogVisible">
      <el-form :model="maskForm"
               ref="maskForm"
               :rules="maskRules"
               label-position="right"
               label-width="80px;"
               :inline="true">
        <el-form-item label="主教老师"
                      prop="teacher">
          <el-select v-model.trim="maskForm.teacher"
                     clearable
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :value="item.id"
                       :label="item.realName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课日期"
                      prop="date">
          <el-date-picker v-model.trim="maskForm.date"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="startTime">
          <el-time-select placeholder="起始时间"
                          v-model.trim="maskForm.startTime"
                          :picker-options="{
                            start: '04:30',
                            step: '00:05',
                            end: '23:30'
                            }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-time-select placeholder="结束时间"
                          v-model.trim="maskForm.endTime"
                          :picker-options="{
                            start: '04:30',
                            step: '00:05',
                            end: '23:30',
                            minTime: maskForm.startTime
                          }">
          </el-time-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitResetClass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryCountOfUnread, sysMessageList, leaveQueryDetail, setRead, approve } from '@/api/journal'
import { resetCourse, getTeacher } from '@/api/buildTeam'
export default {
  name: 'leaveOperation',
  data () {
    return {
      img: {
        bookicon: require('@/assets/images/base/bookicon.png'),
        Hbookicon: require('@/assets/images/base/bookicon-h.png'),
        trashicon: require('@/assets/images/base/trashicon.png'),
        Htrashicon: require('@/assets/images/base/trashicon-h.png'),
        boxicon: require('@/assets/images/base/boxicon.png'),
        Hboxicon: require('@/assets/images/base/boxicon-h.png')
      },
      teacherList: [],
      pageInfo: {
        isSinglePage: false, // 是否只有一页
        limit: 10,
        page: 1,
        readStatus: null,
        total: 0,
      },
      maskForm: {
        teacher: null,
        date: null,
        startTime: null,
        endTime: null,
        id: null
      },
      maskRules: {
        teacher: [{ required: true, message: '请选择主教老师名称', trigger: 'blur' },],
        date: [{ required: true, message: '请选择上课时间', trigger: 'blur' },],
        startTime: [{ required: true, message: '请选择上课开始时间', trigger: 'blur' },],
        endTime: [{ required: true, message: '请选择上课结束时间', trigger: 'blur' },],
      },
      noReadMessage: 0, // 未读消息
      dataList: [],
      isCheckMessage: null,
      showRight: false,
      dialogVisible: false,
      dialogData: [],
      changeDate: null,
      showMessage: {}
    }
  },
  mounted () {
    this.__init()
    this.sysMessageList()
  },
  methods: {
    __init () {
      // 未读消息
      queryCountOfUnread().then(res => {
        if (res.code == 200) {
          if (res.data && res.data.LEAVE) {
            this.noReadMessage = res.data.LEAVE
          }
        }
      })

      getTeacher().then(res => {
        if (res.code == 200) {
          this.teacherList = res.data;
        }
      })
    },
    handleClose () {
      this.dialogVisible = false;
      this.$refs['maskForm'].resetFields()
    },
    submitResetClass () {
      this.$confirm('是否确定?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          actualTeacherId: this.maskForm.teacher,
          startClassTimeStr: this.maskForm.startTime,
          endClassTimeStr: this.maskForm.endTime,
          id: this.maskForm.id,
          classDate: this.maskForm.date
        }
        resetCourse(obj).then(res => {
          if (res.code == 200) {
            this.$message.success('修改成功')
            this.dialogVisible = false;
          }
        })
      }).catch(() => { })

    },
    onSubmit (showMessage, type) {
      let params = {
        id: showMessage.id,
        status: type,
        userId: showMessage.userId
      }
      approve(params).then(res => {
        if (res.code == 200) {
          this.$message.success('处理成功')
          this.getLeaveItem(JSON.stringify({ leaveRecordId: showMessage.id }))
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getFormatDate (data) {
      let tempDate = new Date(data)
      let month = (tempDate.getMonth() + 1) >= 10 ? (tempDate.getMonth() + 1) : '0' + (tempDate.getMonth() + 1)
      let day = tempDate.getDate() >= 10 ? tempDate.getDate() : '0' + tempDate.getDate()
      let tDate = tempDate.getFullYear() + '-' + month + '-' + day
      let hours = tempDate.getHours() >= 10 ? tempDate.getHours() : '0' + tempDate.getHours()
      let min = tempDate.getMinutes() >= 10 ? tempDate.getMinutes() : '0' + tempDate.getMinutes()
      return tDate + ' ' + hours + ':' + min + ':00'
    },
    getDateInfo (value) {
      let tempValue = value
      if (typeof value !== 'object') {
        tempValue = value.replace(/-/ig, '/')
      }
      let d = new Date(tempValue)
      let hour = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours()
      let minute = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes()
      return hour + ':' + minute + ':00'
    },
    onClssTime (row) {
      this.dialogVisible = true
      this.maskForm = {
        teacher: row.before.actualTeacherId,
        date: row.before.classDate,
        startTime: row.before.startClassTime.split(' ')[1],
        endTime: row.before.endClassTime.split(' ')[1],
        id: row.before.id
      }
    },
    sysMessageList () { // 列表
      sysMessageList({
        group: 'LEAVE',
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        readStatus: this.pageInfo.readStatus
      }).then(res => {
        if (res.code == 200) {
          this.dataList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    onLookMessage (type) { // 查看对应的数据
      if (type == "all") {
        this.pageInfo.readStatus = null
      } else {
        this.pageInfo.readStatus = type
      }
      this.pageInfo.page = 1
      this.showRight = false
      this.showMessage = {}
      this.isCheckMessage = null
      this.sysMessageList()
    },
    onChange (page) { // 分页
      this.pageInfo.page = page
      this.sysMessageList()
    },
    onClickRead (item) {
      this.isCheckMessage = item.id
      if (item.readStatus == 1) {
        this.getLeaveItem(item.memo)
      } else {
        setRead({ id: item.id }).then(res => {
          let result = res.data
          if (res.code == 200) {
            item.readStatus = 1
            this.getLeaveItem(item.memo)

            this.noReadMessage--
          }
        })
      }
    },
    getLeaveItem (memo) {
      memo = JSON.parse(memo)
      leaveQueryDetail({ id: memo.leaveRecordId }).then(res => {
        if (res.code == 200) {
          this.showRight = true
          if (res.data.coursesScheduleJson) {
            let tempJson = JSON.parse(res.data.coursesScheduleJson) 
            let musicGroupCourse = []
            let vipCourse = []
            tempJson.forEach(item => {
              if(item.before.type == 'VIP') {
                vipCourse.push(item)
              } else {
                musicGroupCourse.push(item)
              }
            })
            res.data.musicGroupCourse = musicGroupCourse
            res.data.vipCourse = vipCourse
          }
          this.showMessage = res.data
          this.remark = res.data.reason
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  filters: {
    getFormatTime (tempA, tempB) {
      tempA = new Date(tempA.replace(/-/g, "/")),
        tempB = new Date(tempB.replace(/-/g, "/"))
      let hours = Number(tempA.getHours()) >= 10 ? tempA.getHours() : '0' + tempA.getHours()
      let hours2 = Number(tempB.getHours()) >= 10 ? tempB.getHours() : '0' + tempB.getHours()
      let min = Number(tempA.getMinutes()) >= 10 ? tempA.getMinutes() : '0' + tempA.getMinutes()
      let min2 = Number(tempB.getMinutes()) >= 10 ? tempB.getMinutes() : '0' + tempB.getMinutes()

      return hours + ':' + min + '-' + hours2 + ':' + min2
    }
  }
}
</script>
<style lang="scss" scoped>
.infoWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: calc(100vh - 266px);
  overflow: auto;
  .left {
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: left;
    > div {
      height: 26px;
      line-height: 26px;
      margin-top: 26px;
      img {
        position: relative;
        top: 6px;
      }
    }
    .unread,
    .read,
    .recovery {
      cursor: pointer;
    }
    .unread {
      position: relative;
      img {
        width: 26px;
        height: 25px;
      }
      .count {
        position: absolute;
        width: 38px;
        height: 23px;
        background: rgba(20, 146, 138, 0.5);
        border-radius: 100px;
        font-size: 12px;
        line-height: 23px;
        text-align: center;
        color: #225551;
        right: -44px;
        top: 8px;
      }
    }
    .read {
      img {
        width: 20px;
        height: 26px;
      }
    }
    .recovery {
      img {
        width: 19px;
        height: 26px;
      }
    }
  }
  .middle {
    width: 25%;
    margin-left: 76px;
    padding-top: 50px;
    overflow: auto;
    .msgItem {
      padding: 16px 18px 23px 30px;
      border-bottom: 1px solid #ccc;
      .type {
        font-size: 14px;
        color: #777;
        font-weight: 400;
        padding-bottom: 4px;
      }
      .name {
        position: relative;
        color: #444;
        font-size: 16px;
        padding-bottom: 9px;
        clear: both;
        .time {
          font-weight: 400;
          color: #aaa;
          float: right;
        }
        .dot {
          width: 7px;
          height: 7px;
          background-color: #f97215;
          border-radius: 50%;
          position: absolute;
          left: -13px;
          top: 4px;
        }
      }
      .msg {
        color: #444;
        font-size: 14px;
        line-height: 24px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .msgItem.active {
      background-color: #f3f4f8;
      border-radius: 5px;
      .msg {
        color: #aaa;
      }
    }
  }
  .right {
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #e4e8eb;
    margin-left: 25px;
    position: relative;
    overflow: auto;
    width: 50%;
    .rightWrap {
      // overflow: auto;
      display: flex;
      padding: 18px 24px;
      flex-direction: row;
      justify-content: flex-start;
      box-sizing: border-box;
      .header {
        width: 30px;
        height: 30px;
        position: relative;
        top: 7px;
        border-radius: 50%;
        margin-right: 12px;
      }
      .info {
        position: relative;
        width: 100%;
        h2 {
          color: #212223;
          font-size: 16px;
          margin-bottom: 0px;
          .phone {
            font-size: 12px;
            color: #444;
          }
        }
        .subMsg {
          position: relative;
          font-size: 12px;
          color: #444;
          margin-bottom: 12px;
          .san {
            // margin-left: 110px;
            float: left;
            position: absolute;
            top: 0px;
            width: 0;
            height: 0;
            border-width: 5px;
            border-style: solid;
            border-color: transparent #909191 transparent transparent;
            transform: rotate(180deg); /*顺时针旋转90°*/
            margin: 0 8px;
          }
        }
        .textWrap {
          width: 316px;
          line-height: 21px;
          font-size: 14px;
          color: #212223;
          margin: 12px 0 34px;
        }
        .dot {
          width: 20px;
          height: 20px;
        }
        .timeMsg {
          position: relative;
          top: 5px;
          margin-left: 20px;
          .name {
            font-size: #444;
            font-size: 16px;
            margin-bottom: 3px;
            font-weight: 600;
          }
          .status {
            font-size: 14px;
            color: #62a070;
          }
          .status.waring {
            color: #f97215;
          }
          .status.end {
            color: #aaaaaa;
          }
        }
      }
    }
    .infoFoot {
      min-height: 60px;
      height: 60px;
      line-height: 60px;
      border-top: 1px solid #e4e8eb;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .noBtn {
        cursor: pointer;
        width: 100px;
        height: 32px;
        line-height: 32px;
        color: #444;
        border-radius: 3px;
        border: 1px solid rgba(228, 232, 235, 1);
        text-align: center;
        margin-left: 70px;
      }
      .yesBtn {
        cursor: pointer;
        margin-left: 15px;
        text-align: center;
        width: 100px;
        height: 32px;
        line-height: 32px;
        background: rgba(249, 114, 21, 1);
        border-radius: 3px;
        color: #fff;
      }
      // width: 570px;
    }
  }
}
</style>