<template>
  <div class="fullHeight">
    <div class="fullHeight">
      <div class="searchBox whiteBlock">
          <el-form
                :inline="true"
                size="medium"
                :model="formInline"
                class="demo-form-inline"
            >
                <el-form-item :label="$t('message.sixComplete.fence.warnType')">
                    <el-select v-model="formInline.alarmType">
                        <el-option :label="$t('message.sixComplete.fence.all')" value=""></el-option>
                        <el-option :label="item.label" :value="item.value" v-for="(item,index) in alarmTypeArr" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('message.sixComplete.happenTime')">
                <el-date-picker
                    @change="changeTime"
                    v-model="dateRangeArr"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :range-separator="$t('message.sixComplete.to')"
                    :start-placeholder="$t('message.sixComplete.start')"
                    :end-placeholder="$t('message.sixComplete.end')"
                >
                </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('message.sixComplete.fence.devNo')">
                    <el-input v-model="formInline.hardwareId" :placeholder="$t('message.sixComplete.fence.placeholder')"></el-input>
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="getList(1)" plain>{{$t('message.sixComplete.query')}}</el-button>
                <el-button type="warning" @click="refresh" plain>{{$t('message.sixComplete.fresh')}}</el-button>
                </el-form-item>
            </el-form>
        <!-- <el-button type="primary" size="medium" @click="addFn"
          >新增课程</el-button
        >
        <el-button type="warning" plain size="medium" @click="refresh">{{
          $t("message.alarmValueSet.refresh")
        }}</el-button> -->
      </div>
      <div class="table_wrap">
        <div class="listContent">
          <vue-scroll>
            <div
              class="listBox"
              v-for="(item, index) in workerList"
              :key="index"
            >
              <div class="inner whiteBlock">
                <div class="videoBox">
                  <!-- <video
                    class=""
                    :src="$store.state.FILEURL + item.eduVideo"
                    controls
                  ></video> -->
                  <img :src="$store.state.FILEURL + item.imageUrl" :alt="$t('message.sixComplete.carDense.takePhoto')" :preview="$store.state.FILEURL + item.imageUrl">
                  <div class="desc">
                    <span class="time">{{getTypeName(item.alarmType)}}</span>
                    <span>{{ item.createTime }}</span>
                  </div>
                </div>
                <div class="title">{{$t('message.sixComplete.carDense.from')+':'}}{{ item.location }}</div>
                <!-- <div @click.stop="deleteBefore(item)" class="deleteBtn">
                        <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                    </div> -->
              </div>
            </div>
          </vue-scroll>
        </div>
        <div class="placeholderBox" v-if="workerList.length == 0">
          <img src="@/assets/images/noData.png" alt="" />
          <p>{{$t('message.sixComplete.carDense.noWarn')}}</p>
        </div>
        <!-- <el-table class="tables" :data="workerList">
                    <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    :label="$t('message.personnelPosition.beaconManage.table.index')"
                    ></el-table-column>
                    <el-table-column prop="eduCourseName" :label="'课程名称'"></el-table-column>
                    <el-table-column prop="passScore" :label="'及格分数'"></el-table-column>
                    <el-table-column prop="eduWorkerNum" :label="'考试人数'"></el-table-column>
                    <el-table-column prop="passWorkerNum" :label="'及格人数'"></el-table-column>
                    <el-table-column prop="addTime" :label="'创建时间'"></el-table-column>
                    <el-table-column width="200">
                        <template slot-scope="scope">
                            <div class="tableBtns">
                                <div @click="editBefore(scope.row)" class="operationText">
                                    <span>详细</span>
                                </div>
                                <div @click="deleteBefore(scope.row)" class="operationText">
                                    <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                                    <span>{{$t('message.workType.delete')}}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table> -->
        <el-pagination
          class="pagerBox"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pageInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pageInfo.total)"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  aiAnalyseHardWareAlarmRecordApi
} from '@/assets/js/api/equipmentCenter/electricBox';
export default {
  data() {
    return {
      pageType: "list",
      workerList: [],
      pageInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      itemId: "",
      formInline:{
          alarmType:'',
          endTime:'',
          startTime:'',
          hardwareId:''
      },
      dateRangeArr:[],
      // alarmTypeArr:['安全帽报警','明火报警','聚众报警','倒地报警','越界报警','闯入报警','反光衣报警','吸烟报警']
    
      alarmTypeArr:[{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[0],/* '烟感报警', */
        value: 1,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[1],/* '明火报警', */
        value: 2,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[2],/* '人员倒地报警', */
        value: 3,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[3],/* '未戴安全帽报警', */
        value: 4,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[4],/* '区域入侵报警', */
        value: 5,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[5],/* '越界入侵报警', */
        value: 6,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[6],/* '人员聚集报警', */
        value: 7,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[7],/* '反光衣报警', */
        value: 8,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[8],/* '裸土覆盖报警', */
        value: 9,
      },{
        label:this.$t('message.sixComplete.carWash.alarmTypeArr')[9], /* '口罩识别报警', */
        value: 13,
      },{
        label:this.$t('message.sixComplete.carWash.alarmTypeArr')[10], /* '徘徊预警', */
        value: 14,
      },{
        label:this.$t('message.sixComplete.carWash.alarmTypeArr')[11], /* '物体滞留监测', */
        value: 15,
      },{
        label: this.$t('message.sixComplete.carWash.alarmTypeArr')[12],/* '绊线监测', */
        value: 16
      },{
        label: '陌生人闯入',/* '陌生人闯入', */
        value: 17
      }]
    };
  },
  mounted() {
    this.selectNowDate()
    this.getList();
  },
  methods: {
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
        selectNowDate(){
			var date = new Date(),
			year = date.getFullYear(),
			month = date.getMonth() + 1,
			day = date.getDate(),
            hours = date.getHours(), //获取当前小时数(0-23)
            minutes = date.getMinutes(),//获取当前分钟数(0-59)
            seconds = date.getSeconds()
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
            hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
            minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
            seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
			var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
            var timer2 = year + '-' + month + '-' + day + ' ' + '00:00:00'
      this.dateRangeArr = [timer2,timer]
      this.formInline.startTime=this.dateRangeArr[0]
      this.formInline.endTime=this.dateRangeArr[1]
			console.log(timer)
			// return timer;
		},
    getTypeName(val){
      // console.log('点击',val)
      let text = ""
      this.alarmTypeArr.forEach(item=>{
        if(item.value == val){
          text = item.label
        }
      })
      return text
    },
      changeTime(){
          if(this.dateRangeArr){
              this.formInline.startTime=this.dateRangeArr[0]
              this.formInline.endTime=this.dateRangeArr[1]
          }else{
              this.formInline.startTime=''
              this.formInline.endTime=''
          }
      },
    refresh() {
        this.pageInfo.pageNo=1
        this.formInline.hardwareId=''
        this.formInline.startTime=''
        this.formInline.endTime=''
        this.formInline.alarmType=''
        this.dateRangeArr=[]
        this.getList();
    },
    getList(val) {
      if(val == 1){
        this.pageInfo.pageNo = 1
      }
        let json = Object.assign(this.pageInfo,this.formInline)
        json.projectSn=this.$store.state.projectSn
        aiAnalyseHardWareAlarmRecordApi(json).then((res) => {
            this.workerList = res.result.records;
            this.pageInfo.total = res.result.total;
            setTimeout(() => {
                this.$previewRefresh();
            }, 100);
        });
    },
    goBack() {
      this.pageType = "list";
      this.getList();
    },
    // addFn() {
    //   this.itemId = "";
    //   this.pageType = "add";
    // },
    editBefore(item) {
      this.itemId = item.id;
      this.pageType = "detail";
    },
    deleteBefore(item) {
      this.$confirm(this.$t('message.sixComplete.carWash.tipText')+'?', this.$t('message.sixComplete.carWash.tip'), {
        confirmButtonText: this.$t('message.sixComplete.carWash.confirm'),
        cancelButtonText: this.$t('message.sixComplete.carWash.cancel'),
        type: "warning",
      })
        .then(() => {
          workerSafeEducationDeleteApi({ id: item.id }).then((res) => {
            this.$message({
              type: "success",
              message: this.$t('message.sixComplete.carWash.deleteSuccess')+'!',
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('message.sixComplete.carWash.cancelDelete'),
          });
        });
    },
    SizeChange(val) {
      console.log(val)
      this.pageInfo.pageSize = val;
      this.getList();
    },
    CurrentChange(val) {
      console.log(val)
      this.pageInfo.pageNo = val;
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>

.backText {
  margin: -10px 0 0 0;
}
.jyjzPage .backText{
  margin: 15px 15px 0;
  /deep/.el-page-header__content{
    color: white;
  }
}
.listContent {
  overflow: hidden;
  height: calc(100% - 70px);
}
.listBox {
  float: left;
  width: 20%;
  margin-bottom: 20px;
  .inner {
    margin: 0 10px;
    box-shadow: 0px 2px 16px 0px rgba(131, 183, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }
  .videoBox {
    position: relative;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
    .desc {
      background-color: rgba(0, 0, 0, 0.5);
      padding: 5px 10px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% - 20px);
      color: white;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }
  }
  .title {
    padding: 10px 10px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    &:hover{
        color: @--color-primary;
    }
  }
  &:hover{
      .deleteBtn{
        display: block;
    }
  }
  .deleteBtn{
      display: none;
      position: absolute;
      right: 10px;
      bottom: 10px;
      cursor: pointer;
  }
}
.pagerBox {
  margin: 20px;
}
.table_wrap{
  position: relative;
}
</style>
