<!--消息-->
<template>
  <div class="app-container manageInformation">
    <div class="page-container manageInformationPage" v-if="pageType == 1">
      <div class="top-title-box">
        <p class="color_one">消息</p>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="dataList"
                  @selection-change="handleSelectionChange">
          <el-table-column label="消息类型" align="left" prop="sendName" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-for="item in typeList" v-if="item.code==scope.row.noticeType">{{item.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息标题" align="left" prop="title" show-overflow-tooltip/>
          <!--<el-table-column label="消息内容" align="left" prop="content" show-overflow-tooltip/>-->
          <el-table-column label="状态" align="left" prop="isRead" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.isRead?'已读':'未读'}}
            </template>
          </el-table-column>
          <el-table-column label="发送时间" align="left" prop="sendTime" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{parseTime(scope.row.sendTime,'{y}-{m}-{d} {h}:{i}')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="发送人" align="left" prop="createTime" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.userName?scope.row.userName:'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="160">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="lockInfo(scope.row)"
                >查看</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    layout="total, prev, pager, next, sizes, jumper"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <div class="message-max-big-box" v-if="pageType == 2">
      <div class="page-top-title-box">
        <p class="page-top-title-name-p">消息详情</p>
        <p class="page-top-title-out-p" @click="backPage">返回</p>
      </div>
      <div class="info-max-big-box scrollbar-box">
        <div>
          <p>消息标题：</p>
          <p>{{messageData.title}}</p>
        </div>
        <div>
          <p>消息类型：</p>
          <p>
            <span v-for="item in typeList" v-if="item.code==messageData.noticeType">{{item.name}}</span>
          </p>
        </div>
        <div>
          <p>发送人：</p>
          <p>{{messageData.userName?messageData.userName:'--'}}</p>
        </div>
        <div>
          <p>发送时间：</p>
          <p>{{parseTime(messageData.sendTime,'{y}-{m}-{d} {h}:{i}')}}</p>
        </div>
        <div>
          <p>消息内容：</p>
          <p v-html="messageData.content" class="htmlMessage w-e-text"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { systemNoticeGetNoticeList, systemNoticeGetNoticeType,systemNoticeGetNoticeDetail } from '@/api/commonality/permission'
  export default {
    props: {
      videoData: []
    },
    name: 'manageInformation',
    data() {
      return {
        pageType:1,
        // 遮罩层
        loading: false,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 20
        },
        // 总条数
        total: 1,
        // 表格数据
        dataList: [],
        //消息类型
        typeList: [],
        messageData:{},
      }
    },
    created() {
      this.systemNoticeGetNoticeType()
    },
    mounted() {
      this.getList()
    },
    methods: {
      backPage(){
        this.$set(this,'pageType',1);
        this.getList();
      },
      dialogOff(){
        this.$set(this,'dialogType',false);
      },
      lockInfo(row){
        console.log('row',row);
        systemNoticeGetNoticeDetail({noticeId:row.noticeId}).then(response => {
          this.$set(this,'messageData',row);
          this.$set(this,'pageType',2);
          this.$store.dispatch("getMessageNum", {}).then((res) => {}).catch(() => {});
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 查询列表 */
      getList() {
        // this.loading = false;
        this.loading = true
        systemNoticeGetNoticeList(this.queryParams).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
          this.loading = false
          // for(let i=0;i<this.hardwareList.length;i++){
          //   this.hardwareList[i].collapseType = false;
          //   this.hardwareList[i].meaasgeContext = unescape(this.hardwareList[i].meaasgeContext);
          // }
        })
      },
      //消息类型
      systemNoticeGetNoticeType() {
        systemNoticeGetNoticeType().then(response => {
          this.$set(this, 'typeList', response.data)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .manageInformation {
    .manageInformationPage {
      .top-title-box {
        border-bottom: 1px solid #E0E0E0;
        position: relative;
        .color_one {
          line-height: 60px;
          padding-left: 20px;
        }
        .right-top-button {
          height: 30px;
          width: 30px;
          font-size: 20px;
          line-height: 30px;
          text-align: center;
          color: #999;
          border-radius: 50%;
          position: absolute;
          top: 15px;
          right: 15px;
        }
        .right-top-button:hover {
          background: #999;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .message-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .info-max-big-box{
        padding:30px 40px;
        div{
          display: flex;
          margin-bottom:20px;
          p{
            font-size:16px;
            line-height:20px;
          }
          p:nth-child(1){
            width:80px;
          }
          p:nth-child(2){
            flex:1;
          }
          .htmlMessage{
            border:1px solid #dedede;
            border-radius:6px;
            min-height:400px;
            padding:10px 20px;
          }
        }
      }
    }
  }
</style>
