<template>
<NAV />
<!--  侧边栏显隐-->
  <div class="aside">
    <ul class="aside-ul">

      <li class="aside-li" :key="index" v-for="(item,index) in asideList" @click="toggleDevice(index)">
        <img :src="deviceIndex===index?item.select:item.default" alt="" srcset="">
        <img class="aside-li-msg" v-if="deviceIndex===index" :src="item.rightImg" alt="" srcset="">
      </li>
    </ul>
  </div>
  <div id="three3D">
    <Three />
  </div>
  <div class="container">
    <div class="container-left">
      <div class="container-left-box">
        <!--    报警列表    -->
        <div class="public-title">
          <span class="font">报警列表</span>
          <span class="more">

          </span>
        </div>
        <div class="alarmList">

          <section class="regional" v-for="item in alarmList.regional">
            <div class="alarmList-type">
              区域入侵
            </div>
            <div class="alarmList-regional">
              <div style="width: 2.75rem; height:2.75rem;display: flex;align-items: center">
                <el-image style="width: 2.75rem; height: 2.75rem"  :src="cameraUrl" fit="cover" />
              </div>



              <div class="alarmList-regional-msg">
                <div>
                  <i class="drop"></i>
                  <span>位置：</span>
                  <span>{{item.address}}</span>
                </div>
                <div>
                  <i class="drop"></i>
                  <span>时间：</span>
                  <span>{{item.date}}</span>
                </div>
              </div>
            </div>
          </section>
          <section class="humidity" v-for="item in alarmList.humidity">
            <div class="alarmList-type">
              温湿度告警
            </div>
            <div class="alarmList-content">
              <div>
                <i class="drop"></i>
                <span>当前温度：</span>
                <span>{{item.humidity}}</span>
              </div>
              <div>
                <i class="drop"></i>
                <span>报警温度：</span>
                <span>{{item.alarmHumidity}}</span>
              </div>
              <div>
                <i class="drop"></i>
                <span>位置：</span>
                <span>{{item.address}}</span>
              </div>
              <div>
                <i class="drop"></i>
                <span>时间：</span>
                <span>{{item.date}}</span>
              </div>
            </div>
          </section>
          <section class="urgent" v-for="item in alarmList.urgent">
            <div class="alarmList-type">
              紧急告警
            </div>
            <div class="alarmList-content">
              <div>
                <i class="drop"></i>
                <span>当前温度：</span>
                <span>{{item.humidity}}</span>
              </div>
              <div>
                <i class="drop"></i>
                <span>报警温度：</span>
                <span>{{item.alarmHumidity}}</span>
              </div>
              <div>
                <i class="drop"></i>
                <span>位置：</span>
                <span>{{item.address}}</span>
              </div>
              <div>
                <i class="drop"></i>
                <span>时间：</span>
                <span>{{item.date}}</span>
              </div>
            </div>
          </section>
        </div>
        <div class="public-title">
          <span class="font">钥匙柜状态总览</span>
          <span class="record-icon">

          </span>
        </div>
        <!--    钥匙柜数据    -->
        <div class="keyword">
          <ul class="keyword-state">
            <li v-for="(item,index) in keywordState">
              <i :class="'keyword-state-icon'+index"></i>
              <span>{{item}}</span>
            </li>
          </ul>
          <section v-for="(item,index) in keywordList" class="keyword-item" :class="'keyword-item-state'+item.keyState">
            <span>{{item.keyCapturing}}号锁位</span>
            <span class="position">{{item.position}}</span>
          </section>
        </div>
        <!-- 门禁进入实况-->
        <div class="access-title">
          <span>门禁进入实况</span>
        </div>
        <div class="access-control">
          <el-collapse v-model="activeNames">
            <el-collapse-item :title="item.doorName" :name="item.doorName" v-for="item in doorNames">
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in item.data" :key="index">
                  <p style="display: flex;justify-content: space-between">
                    <span v-if="activity.inAndOutType"
                                                               style="margin-left: 0.5rem">
                    {{ activity.personName
                    }}
                      <span style="margin-left: 0.5rem;color: rgba(233, 244, 255, 0.60)">{{
                          activity.inAndOutType == -1
                              ? "出库房"
                              : activity.inAndOutType == 1
                                  ? "进入库房"
                                  : "未知"
                        }}</span>
                    </span>
                    <span style="color: rgba(0, 221, 255, 1);font-size: .75rem">{{ activity.eventTime }}</span>
                  </p>
<!--                  <div class="enterImg">-->
<!--                    <img :src="'https://192.168.3.3:443' + activity.picUri" alt="" />-->
<!--                  </div>-->
                </el-timeline-item>
              </el-timeline>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <div class="container-right">
      <div class="container-right-box">
        <!-- 排班表 -->
        <div class="public-title">
          <span class="font">排班表</span>
          <span class="more">

          </span>
        </div>
        <div class="schedule-date">
          <p>
            <i class="drop"></i>
            日期：{{schedule.date}}
          </p>
          <p style="margin-left: 2.37rem">
            <i class="drop"></i>
            时间：{{schedule.day}}
          </p>
          <p>
            <i class="drop"></i>
            星期：{{schedule.week}}
          </p>
        </div>
        <div class="schedule-person">
          <section v-for="(item,index) in schedule.person" class="schedule-person-item">

          </section>
        </div>
        <!-- 巡更线监控 -->
        <div class="public-title">
          <span class="font">巡更线监控</span>
        </div>
        <div class="patrol-line">
          <el-table :data="tableData" style="width: 100%" stripe :row-class-name="getRowColor">
            <el-table-column prop="position" min-width="25%" label="巡更点"  show-overflow-tooltip />
            <el-table-column prop="state"  min-width="25%" label="巡更状态">
              <template #default="scope">
                <div>
                  <!-- <i class="qiu-icon" :style="'background-color:' + getColor(scope.row.state)"></i>{{
                    getFont(scope.row.state) }} -->
                  <p><i class="qiu-icon" :style="'background-color:' + getColor(scope.row.state)"></i>{{
                      fontState[parseInt(scope.row.state)] }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column  prop="history" min-width="55%" label="打卡记录" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <!--  底部-->
  <div class="footer">
      <ul class="footer-ul">
        <li class="footer-ul-li" v-for="(item,index) in footerList" @click="dialogShow=true">
          <img :src="item.default" alt="">
        </li>
      </ul>
  </div>

  <!-- 底部点击弹框 -->
  <Dialog @close="closeHandle" v-if="dialogShow"/>
</template>
<script setup>
import getPath from "@/utils/getPath.js";
import Three from '@/components/Three.vue'
import {ref} from 'vue'
import cameraUrl from '@/assets/images/camera.png'
import NAV from '@/components/nav.vue'
import Dialog from '@/components/dialog.vue'
// 侧边栏
const asideList = ref([
  {
    default:getPath.store,
    select:getPath.storeSelect,
    rightImg:getPath.storePrompt,
  },
  {
    default:getPath.monitorPoint,
    select:getPath.monitorPointSelect,
    rightImg:getPath.monitorPointPrompt,
  },
  {
    default:getPath.alarmHost,
    select:getPath.alarmHostSelect,
    rightImg:getPath.alarmHostPrompt,
  },
  {
    default:getPath.water,
    select:getPath.waterSelect,
    rightImg:getPath.waterPrompt,
  },
  {
    default:getPath.smoke,
    select:getPath.smokeSelect,
    rightImg:getPath.smokePrompt,
  },
  {
    default:getPath.humidity,
    select:getPath.humiditySelect,
    rightImg:getPath.humidityPrompt,
  },
  {
    default:getPath.accessControl,
    select:getPath.accessControlSelect,
    rightImg:getPath.accessControlPrompt,
  },
])
// 底部栏
const footerList = ref([
  {title:'首页',default:getPath.home,select:getPath.homeSelect},
  {title:'温湿度记录',default:getPath.record,select:getPath.recordSelect},
  {title:'枪支离位报警',default:getPath.guns,select:getPath.gunsSelect},
  {title:'视频监控',default:getPath.monitor,select:getPath.monitorSelect},
  {title:'运维状况',default:getPath.operation,select:getPath.operationSelect}
])
// 报警列表
const alarmList = ref({
  regional:[
    {
      address:'东6厂房西侧摄像头',
      date:'2022-07-18 12:02:56'
    }
  ],
  humidity:[
    {
      alarmHumidity:'40℃',
      humidity:'40℃',
      address:'西3区厂房',
      date:'2022-07-18 12:02:56'
    }
  ],
  urgent:[
    {
      alarmHumidity:'40℃',
      humidity:'40℃',
      address:'西3区厂房',
      date:'2022-07-18 12:02:56'
    }
  ]
})
// 钥匙柜
const keywordState = ref(['在位','不在位'])
// 钥匙柜
const keywordList = ref([
  {
    keyCapturing: "1",
    keyState: "1",
  },
  {
    keyCapturing: "2",
    keyState: "1",
  },
  {
    keyCapturing: "3",
    keyState: "1",
  },
  {
    keyCapturing: "4",
    keyState: "1",
  },
  {
    keyCapturing: "5",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "6",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "7",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "8",
    keyState: "1",
  },
  {
    keyCapturing: "9",
    keyState: "1",
  },
  {
    keyCapturing: "10",
    keyState: "1",
  },
  {
    keyCapturing: "11",
    keyState: "1",
  },
  {
    keyCapturing: "12",
    keyState: "1",
  },
]);
// 门禁进入实况
const activeNames = ref([])
const doorNames = ref([
  {
    doorName:'1号仓库',
    data:[
      {personName:'张集网',eventTime:'12:27',inAndOutType:-1},{personName:'张集网',eventTime:'12:27',inAndOutType:-1},{personName:'张集网',eventTime:'12:27',inAndOutType:-1}
    ]
  },
  {
    doorName:'2号仓库',
    data:[
      {personName:'张集网',eventTime:'12:27',inAndOutType:-1},{personName:'张集网',eventTime:'12:27',inAndOutType:-1}
    ]
  }
])
// 排班表
const schedule = ref({
  date:'2022-07-08',
  week:'周日',
  day:'18:04:55',
  person:[
    {},
    {},
    {},
  ]
})
// 巡更线
const tableData = ref([
  {
    position: "巡更点1",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点2",
    state: "0",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点3",
    state: "2",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点4",
    state: "3",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点5",
    state: "4",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点6",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点7",
    state: "2",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点8",
    state: "2",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点9",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
  {
    position: "巡更点10",
    state: "1",
    history: "刘七七 2020/06/08 14:27:11",
  },
]);

// 状态文字
const fontState = ref(['准时','早巡','晚巡','补漏巡','漏巡'])
// 获取状态颜色
function  getColor(state) {
  if (state === "1" || state === "2") {
    return "#f05657";
  } else if (state === "4" || state === "3") {
    return "#FFBF00";
  } else if (state === "0") {
    return "#52e76f";
  }
}
// 弹窗的显影
const dialogShow = ref(false)
function closeHandle(e){
  dialogShow.value = false
}
const deviceIndex = ref(0)
// 侧边栏点击事件控制three中设备显隐
function toggleDevice(index){
  deviceIndex.value = index
}
</script>
<style lang="scss" scoped>
.aside{
  //height: vh(380);
  width: vw(44);
  position: fixed;
  bottom: vh(81);
  left:vw(456);
  z-index:99;
  &-li{
    width: 100%;
    position: relative;
    margin-bottom: .6rem;
    &-msg{
      position: absolute;
      left: 107%;
      top: 0;
    }
  }
}
//公共小圆点
.drop{
  margin-right: 0.5rem;
  width: 0.8rem;
  display: inline-block;
  height: 0.8rem;
  background-image: url('@/assets/images/drop.png');
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  &-left, &-right {
    padding-top: vw(104);
    width: vw(380);
    height: 100%;
    position: relative;
    &-box {
      width: 100%;
      height: 100%;
    }
  }
  //标题
  .public-title,.access-title{
    height:vh(40);
    width: 108%;
    position: relative;
    right: 4%;
    display: flex;
    justify-content: space-between;
    padding-left: 3.5rem;
    padding-right: 1rem;
    align-items: center;
    box-sizing: border-box;
    background-image: url('@/assets/images/title-box.png');
    span:nth-child(1){
      font-family: pangmen;
      font-size: 1.625rem;

    }
    .more,.record-icon{
      background-image: url('@/assets/images/checkMore.png');
      background-size: 100% 100%;
      width: 4.25rem;
      height: 1.5rem;
    }
    .record-icon{
      background-image: url('@/assets/images/record-icon.png');
    }
  }
  .access-title{
    margin-top: 0.5rem;
    background-image: url('@/assets/images/door-title.png');
  }
  &-left {
    background-image: url('@/assets/images/left-mask.png');
    padding-left: 3.5rem;
    background-size: 100% 100%;
    //报警列表
    .alarmList{
      width: 100%;
      height: vh(364);
      margin-bottom: 1rem;
      display: flex;
      flex-wrap: wrap;
      align-content: space-evenly;
      &-type{
        margin-top: .75rem;
        margin-left: 1.3rem;
        color: rgba(255, 255, 255, 1);
      }
      //温湿度告警、紧急告警
      &-content{

        display: flex;
        flex-wrap: wrap;
        padding-left: .7rem;
        align-items: center;
        box-sizing: border-box;
        align-content: space-evenly;
        font-size: 0.875rem;
        height: 70%;
        color:rgba(189, 220, 248, 1);
      }
      &-content>div:nth-child(2n-1){
        width: 40%;
      }
      &-content>div>span:nth-of-type(1){
        color: rgba(88, 174, 247, 1);
      }
      section{
        width: 100%;
        height: 30%;
        background-image: url('@/assets/images/alarm-item.png');
      }
    // 区域入侵
      &-regional{
        align-items: center;
        display: flex;
        font-size: 0.875rem;
        color:rgba(189, 220, 248, 1);
        padding-left: .7rem;
        height: 70%;
        &-msg{
          height: 100%;
          margin-left: .75rem;
          display: flex;
          flex-wrap: wrap;
          align-content: space-evenly;
        }
      }
    }
  //  钥匙柜
    .keyword{
      width: 100%;
      //background-color: #fff;
      height: vh(220);
      &-state{
        display: flex;
        justify-content: flex-end;
        font-size: .75rem;
        margin: 1rem 0;
        &-icon0,&-icon1{
          width: 0.875rem;
          height: .875rem;
          background-size: 100% 100%;
          display: inline-block;
          vertical-align: middle;
          margin-right: .5rem;
        }
        &-icon0{
          background-image: url('@/assets/images/has.png');
        }
        &-icon0 + span{
          color: rgba(0, 220, 183, 1);
        }
        &-icon1 + span{
          color: rgba(255, 255, 255, 1);
        }
        &-icon1{
          margin-left: 2rem;
          background-image: url('@/assets/images/noHas.png');
        }
      }
      &-item{
        float: left;
        width: 23.5%;
        font-size: .75rem;
        height: 24%;
        display: flex;
        align-items: center;
        padding: .5rem;
        box-sizing: border-box;
        justify-content: flex-end;
        margin-bottom: .5rem;
        background-image: url('@/assets/images/has-bg.png');
        background-size: 100% 100%;
        margin-right: .45rem;
        position: relative;
        .position{
          top: 0;
          position: absolute;
          left: 50%;
          white-space: nowrap;
          font-size: .625rem;
          transform: translate(-50%);

        }
        &-state1{
          background-image: url('@/assets/images/has-bg.png');
          color: rgba(0, 237, 197, 1);
        }
        &-state0{
          color: rgba(255, 255, 255, 1);
          background-image: url('@/assets/images/noHas-bg.png');
        }
      }
      &-item:nth-of-type(4n){
        margin-right: 0;
      }
    }
  //门禁进入实况
    .access-control{
      margin-top: 1rem;
      height: vh(175);
      overflow-y: scroll;
    }
    .access-control::-webkit-scrollbar{
      display: none;
    }
  }

  &-right {
    background-image: url('@/assets/images/right-mask.png');
    padding-right: 3.5rem;
    background-size: 100% 100%;
    .schedule-date{

      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      padding: 0.6rem 0.8rem;
      box-sizing: border-box;
      background-image: url('@/assets/images/schedule-date.png');
      width: 100%;
      height: vh(80);
      margin:1rem 0;
    }
    .schedule-person{
      &-item{
        width: 30%;
        height: 100%;
        background-image: url('@/assets/images/schedule-person.png');
        background-size: 100% 100%;
      }
      justify-content: space-between;
      height: vh(160);
      width: 100%;
      display: flex;
      margin-bottom: 1.8rem;
    }
  }
}

.footer {

  width: 100%;
  height: vh(26);
  position: absolute;
  bottom: 0;
  background-image: url('@/assets/images/bottom.png');

  justify-content: center;
  &-ul{
    width: vw(800);
    display: flex;
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%);
    &-li{
      margin-left: -1.25rem;
      cursor: pointer;
    }
    &-li:nth-child(1){
      margin-left: 0;
    }
  }
}
//巡更线列表
.patrol-line{
  height: vh(540);
  width: 100%;
  margin-top: 1rem;
  .qiu-icon {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 50%;
  }
}
:deep(.state2) {
  color: #ffbf00;
}

:deep(.state1) {
  color: #f05657;
}

:deep(.state3) {
  color: #52e76f;
}
:deep(.el-table__row--striped) {
  background-image: none !important;
}

:deep(tr.el-table__row td.el-table__cell) {
  background-color: transparent !important;
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table .el-table__cell) {
  padding: 0;
}
:deep(.el-table .cell) {
  height: 100%;
  line-height: 2.4rem;
}
:deep(.el-table tr),
:deep(.el-table),
:deep(.el-table th),
:deep(.el-table td) {
  background-color: transparent;
}
:deep(.el-table__row) {
  height: 2.4rem;
}
:deep(.el-table) {
  color: rgba(233, 244, 255, 1);
  font-size: 0.8rem;
  height: 100%;
}
:deep(.el-table thead){
  color: rgba(255, 255, 255, 1);
  font-size: 0.8rem;
  background-image: url('@/assets/images/table-header.png');
  height: 2rem;
  line-height: 2rem;
  font-weight: normal;
}
:deep(.el-table th.el-table__cell.is-leaf),
:deep(.el-table td.el-table__cell) {
  border-color: transparent;
}
//门禁
:deep(.el-collapse-item__header){
  height: 1.75rem;
  padding-left: 0.625rem;
  font-size: 1rem;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  color: rgba(233, 244, 255, 1);
  background-image: url('@/assets/images/door-device.png');
}
:deep(.el-collapse-item__content){
  background-color: transparent;
  border: none !important;
  font-size: 1rem;
  padding-bottom: 0;

}

:deep(.el-collapse-item__wrap){
  background-color: transparent;
  border: none;

}
:deep(.el-collapse){
  border: none;
  //border-color: unset;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0.8rem;
}

:deep(.el-timeline) {
  padding-left: 0.3rem;
  box-sizing: border-box;
  padding-top: 0.5rem;
}

:deep(.el-timeline-item) {
  padding-bottom: 0.4rem;
}

:deep(.el-timeline-item__content) {
  color:rgba(233, 244, 255, 1);
  font-size: 0.875rem;
  padding:0 1rem;
  //background-image: url('@/assets/images/timeline.png');
  //background-size: 100% 100%;
  box-sizing: border-box;
}

:deep(.el-timeline-item__node--normal) {
  width: 0.75rem;
  height: 0.75rem;
  left: 1px;
  top: .3rem;
  background-color: transparent;
  background-image: url('@/assets/images/round-icon.png');
}

:deep(.el-timeline-item__tail) {
  //border-color: #0a6594;
  border:1px dashed #fff;
  height: 59%;
  top: 1.1rem;
  left: 6px;
}

</style>