<template>
  <q-dialog v-model="persistent" maximized full-height position="right" ref="historyDialog" @hide="" class="flex ">
    <div class="con">
      <div class="header">

        <img class="img-head" src="../../../assets/images/logo.png" mode="" />
        <div class="head-title">
          {{details.ErrorTitle}}
        </div>

        <img class="img-head-close" src="../../../assets/images/classroom/close.png" mode="" @click="hideDialog" />
      </div>
      <div class="info-box">
        <div class="user-info">
          <div class="user-item">
            <div class="user-label">姓名:</div><span class="user-con">{{details.ManageName}}</span>
          </div>
          <div class="user-item">
            <div class="user-label">值班时间:</div><span class="user-con">{{details.StartTime}}-{{details.EndTime}}</span>
          </div>
        </div>
        <div class="use">
          <!-- <div class="use-title">用途</div> -->
          <div class="use-con">{{details.ErrorContent}}</div>
        </div>
        <div class="use">
          <div class="use-title">现场照片</div>
          <div class="img-con">
            <div v-for="(item,index) in details.LogPicList" :key="index" class="classroom-img-item">
              <el-image :src="item" fit="contain" />
            </div>
          </div>
        </div>
        <div class="use">
          <div class="use-title">参与人员</div>
          <div class="img-con">
            <div v-for="(item,index) in details.ParticipantsList" :key="index" class="classroom-img-item">
              <el-image :src="item" fit="contain" />
            </div>
          </div>
        </div>
      </div>

    </div>
  </q-dialog>
</template>

<script>
  import {
    getClassRoomLogDetail
  } from '../../../api/classroom/index';
  export default {
    props: {
      classroomId: {
        type: [Number, String]
      },
    },
    watch: {
      classroomId(val, oldVal) {
        if (val !== oldVal) {
          this.getClassRoomDetail(val)
        }
      },
    },
    components: {

    },
    data() {
      return {
        persistent: false,
        details: {}
      }
    },
    methods: {
      getClassRoomDetail(id) {
        getClassRoomLogDetail({
          ID: id
        }).then((res) => {
          if (res.Code === 1) {
            this.details = res.Data
          }
        })
      },
      changeShow() {
        this.persistent = true
      },
      hideDialog() {
        this.$refs.historyDialog.hide()
      }
    },
  }

</script>

<style lang="scss" scoped>
  ._scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  ._scrollbar::-webkit-scrollbar-thumb {
    border-radius: 2px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.5);
  }

  ._scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: transparent;
    display: none;
  }

  .gonggao-bg {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 130px;
  }

  .gonggao-bg img {
    width: 120%;
    height: 120%;
    /* filter: blur(20px); */
    overflow: hidden;
    margin-top: -8%;
    margin-left: -5%;
  }

  .notifyLoadMore {
    text-align: right;
    cursor: pointer;
    font-size: 12px;
    color: #2961FE;
  }

  .con {
    box-sizing: border-box;
    width: 500px;
    height: 1080px;
    background: #FFFFFF;
    box-shadow: 0px 0px 76px 0px rgba(2, 44, 66, 0.2);

    .header {
      width: 500px;
      height: 56px;
      background-color: #F0F5FB;
      padding: 0 20px;
      display: flex;
      align-items: center;
      position: relative;

      .img-head {
        width: 35px;
        height: 35px;
        // border-radius: 50%;
        background-color: #B0C9FC;
        margin-right: 10px;
        object-fit: fill;
      }

      .head-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .img-head-close {
        width: 15px;
        height: 15px;
        margin-right: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
      }
    }

    .info-box {

      box-sizing: border-box;
      padding: 20px;

      .user-info {
        height: 100px;
        border-bottom: 1px solid #E2E2E2;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;

        .user-item {
          display: flex;
          margin-top: 20px;

          .user-label {
            width: 100px;
            color: #999999;
          }

          .user-con {
            color: #111111;
          }
        }
      }

      .use {
        padding: 30px 0;
        border-bottom: 1px solid #E2E2E2;

        .use-title {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #111111;
          margin-bottom: 20px;
        }

        .use-con {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }

        .img-con {
          display: flex;

          .classroom-img-item {
            display: flex;
            width: 145px;
            height: 80px;
            border-radius: 4px;
            margin-right: 10px;
            margin-bottom: 10px;

            .classroom-img {
              width: 100%;
              height: 100%;

            }
          }

        }
      }

    }

  }

</style>
