<template>
  <div class="app-container noticeConfig">
    <div class="noticeConfig-page" v-if="pageType == 1">
      <p class="noticeConfig-title">通知配置</p>
      <div class="for-max-big-box scrollbar-box">
        <div class="for-max-box" v-for="(item,index) in dataList" :key="index">
          <p class="for-name-p">{{item.name}}</p>
          <div class="for-min-box" v-for="(minItem,minIndex) in item.list" :key="minIndex">
            <img v-if="minItem.type == 1" src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
            <img v-if="minItem.type == 2" src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
            <img v-if="minItem.type == 3" src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
            <img v-if="minItem.type == 4" src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
            <img v-if="minItem.type == 5" src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
            <p>{{minItem.type==1?'系统通知':(minItem.type==2?'短信通知':(minItem.type==3?'电话通知':(minItem.type==4?'广播通知':(minItem.type==5?'一体机报警':''))))}}</p>
          </div>
          <p class="time-box">2022年11月26日 15:00:21</p>
          <p class="button-p" @click="goPage(2)">配置</p>
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2"></add-page>
  </div>
</template>

<script>
  import addPage from "./addPage.vue";
  export default {
    name: "noticeconfig",
    components: {
      addPage
    },
    data() {
      return {
        pageType:1,
        dataList:[
          {name:'化学品违规带离实验室',list:[{type:1},{type:2},{type:3},{type:4},{type:5}],},
          {name:'化学品领用超时未归还',list:[{type:1},{type:2},{type:3},{type:4},{type:5}],},
          {name:'气瓶违规带离实验室',list:[{type:1},{type:2},{type:3},{type:4},{type:5}],},
          {name:'气瓶超时未归还',list:[{type:1},{type:2},{type:3},{type:4},{type:5}],},
          {name:'预案报警通知',list:[{type:1},{type:2},{type:3},{type:4},{type:5}],},
          {name:'门禁授权通知',list:[{type:1},{type:2},{type:3},{type:4},{type:5}],},
        ],
      }
    },
    methods: {
      goPage(type){
        if(type == 1){
          this.$set(this,'pageType',1);
        }else if(type == 2){
          this.$set(this,'pageType',2);
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .noticeConfig {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
    }
    .noticeConfig-page{
      flex: 1;
      display: flex !important;
      flex-direction: column;
      overflow: hidden;
      .noticeConfig-title{
        line-height:80px;
        font-size:16px;
        padding-left:20px;
        font-weight:700;
        border-bottom:1px solid #e0e0e0;
        color:#0045AF;
      }
      .for-max-big-box{
        margin:56px 20px;
        font-weight: 500;
        .for-max-box:nth-child(1){
          border-top:1px solid #e0e0e0;
        }
        .for-max-box{
          display: flex;
          color:#333;
          line-height:60px;
          font-size:14px;
          border-bottom:1px solid #e0e0e0;
          .for-name-p{
            width:285px;
            margin-left:63px;
            font-size:16px;
          }
          .for-min-box{
            flex:1;
            display: flex;
            img{
              width:14px;
              height:14px;
              margin:24px 8px 0 0;
            }
            p{
              font-size:14px;
            }
          }
          .time-box{
            width:235px;
            color:#999;
          }
          .button-p{
            margin-right:87px;
            color:#0183FA;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
