<template>
  <div class="cont">
    <div style="height: 100%; vertical-align: middle">
      <div style="padding: 10px 15px">
        <span style="color: rgba(0, 0, 0, 0.4392156863); margin-right: 10px">区域:</span>
        <a-tree-select
          v-model:value="value1"
          style="width: 200px"
          :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
          placeholder="请选择"
          :tree-data="treedata"
          labelInValue="true"
          :field-names="{
            children: 'children',
            value: 'title',
            label: 'title'
          }"
          tree-node-filter-prop="title"
        >
          <template #suffixIcon>
            <SmileOutlined />
          </template>
        </a-tree-select>
        <span style="color: rgba(0, 0, 0, 0.4392156863); margin-right: 10px; margin-left: 20px">时间:</span>
        <el-date-picker
          v-model="value2"
          :disabled-date="disabledDate"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY/MM/DD ddd"
          time-format="A hh:mm:ss"
          style="vertical-align: middle; width: 335px"
        >
        </el-date-picker>
        <a-button type="primary" style="margin-left: 10px" @click="seach">查询</a-button>
      </div>
      <div style="margin: 5px auto; height: calc(100% - 116px); width: 100%; overflow: auto">
        <el-table :data="tableData" border="false" highlight-current-row="false" style="width: 100%" height="calc(100% )">
          <el-table-column type="index" width="60" label="序号" fixed="left" align="center" />
          <!-- <el-table-column prop="timestamp" label="报警时间" align="center" show-overflow-tooltip width="170"/> -->
          <el-table-column prop="timestamp" label="报警时间" align="center" show-overflow-tooltip width="170" />
          <el-table-column prop="readTime" label="系统接警时间" align="center" show-overflow-tooltip width="170" />

          <el-table-column prop="deviceId" label="设备号" align="center" show-overflow-tooltip width="120" />
          <!-- <el-table-column label="地市" align="center" show-overflow-tooltip /> -->
          <el-table-column align="center" label="地市" show-overflow-tooltip>
            <template #default="scope">
              <span style="color: red">{{ scope.row.city }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="station" label="来源单位" align="center" />
          <el-table-column align="center" label="当前状态" width="80">
            <template #default="scope">
              {{ scope.row.state == 'new' ? '新事件' : scope.row.state == 'processing' ? '处置中' : scope.row.state == 'processed' ? '处置完成' : scope.row.state == 'close' ? '关闭' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="单位地址" align="center" show-overflow-tooltip width="150" />
          <el-table-column prop="user1Name" label="联系人" align="center" width="80" />
          <el-table-column prop="user1Phone" label="电话" align="center" show-overflow-tooltip width="125" />
          <!-- 	<el-table-column prop="translateState" label="转发110状态" align="center" show-overflow-tooltip
						width="170" /> -->
          <el-table-column align="center" label="转发110状态" width="90" fixed="right">
            <template #default="scope">
              <span v-if="scope.row.translateState == '1'">转发成功</span>
              <span v-if="scope.row.translateState == '2'">转发失败</span>
              <span v-else>未转发</span>
            </template>
          </el-table-column>
          <el-table-column prop="translateTime" label="转发110时间" align="center" show-overflow-tooltip width="170" />
          <el-table-column align="center" label="文件列表" width="90" fixed="right">
            <template #default="scope">
              <a-button type="link" @click="fileinfo(scope.row)">查看</a-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="详情" width="90" fixed="right">
            <template #default="scope">
              <a-button type="link" @click="fileinfo1(scope.row)">查看</a-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="position: absolute; right: 60px; margin-top: 10px" @current-change="handleCurrentChange2" :page-size="20" layout="total, prev, pager, next" :total="total2">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="文件列表" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <ul v-if="fileList">
        <li v-if="fileList.length > 0" style="display: inline-block; margin-right: 5px" v-for="(item, index) in fileList">
          <el-image
            style="width: 150px; height: 150px"
            v-if="item.type == 'image'"
            :src="item.url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[item.url]"
            :initial-index="4"
            fit="cover"
          />
          <video width="150" height="150" v-if="item.type == 'video'" :src="item.url" autoplay="true" controls></video>
        </li>
        <el-empty v-else :image-size="150"></el-empty>
      </ul>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog title="警情详情" v-model="dialogVisible1" width="60%" :before-close="handleClose">
      <div class="uploadBtn" style="text-align: right; margin-right: 10px; margin-bottom: 5px">
        <el-button type="primary" v-if="showdata.state != 'close'" @click="close(showdata)">关闭</el-button>
        <el-button type="primary" @click="onSubmit"
          ><el-icon> <Download /> </el-icon>下载</el-button
        >
        <el-button
          ><el-icon> <Printer /> </el-icon>打印</el-button
        >
      </div>

      <el-descriptions title="" border direction="" :column="2">
        <!-- <el-descriptions-item label="序号"></el-descriptions-item> -->
        <el-descriptions-item label="设备号">{{ showdata.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="地市">{{ showdata.city }}</el-descriptions-item>
        <el-descriptions-item label="来源单位">{{ showdata.alarmSource }}</el-descriptions-item>
        <el-descriptions-item label="报警时间">{{ showdata.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="系统接警时间">{{ showdata.checkTime }}</el-descriptions-item>
        <el-descriptions-item label="当前状态">{{ showdata.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="单位地址">{{ showdata.address }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ showdata.user1Name }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ showdata.user1Phone }}</el-descriptions-item>
        <el-descriptions-item label="推送110状态"><el-tag type="danger">失败</el-tag></el-descriptions-item>
        <el-descriptions-item label="文件列表">
          <ul v-if="fileList">
            <li v-if="fileList.length > 0" style="display: inline-block; margin-right: 5px" v-for="(item, index) in fileList">
              <el-image
                style="width: 150px; height: 150px"
                v-if="item.type == 'image'"
                :src="item.url"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[item.url]"
                :initial-index="4"
                fit="cover"
              />
              <video width="150" height="150" v-if="item.type == 'video'" :src="item.url" autoplay="true" controls></video>
            </li>
            <el-empty v-else :image-size="150"></el-empty>
          </ul>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, getCurrentInstance, onMounted} from 'vue'
const {proxy} = getCurrentInstance() as any
const day = proxy.day
import api from '@/axios'
import {ElMessage} from 'element-plus'
// const screenWidth = ref<number>(0)
// const screenHeight = ref<number>(0)
onMounted(() => {
  seach()
  gettreedata()
})
const disabledDate = (time: any) => {
  return time.getTime() > Date.now() - 8.64e6
}
//关闭
const close = (info: any) => {
  api
    .post('/multialarm/client/alarm_event/close', {
      eventId: info.multiAlarmId
    })
    .then((res) => {
      // console.log('关闭接口', res)
      if (res.code == 0) {
        ElMessage({
          message: '关闭成功',
          type: 'success'
        })
        dialogVisible1.value = false
      } else {
        ElMessage.error('关闭失败')
      }
    })
}
//
const expandedKeysb = ref([])
const selectedKeysb = ref([])
const checkedKeysb = ref([])
//获取过滤树
const treedata = ref()
const gettreedata = () => {
  api
    .post('/common/client/user/org/tree', {
      name: localStorage.getItem('loginname')
    })
    .then((res) => {
      console.log('过滤树', res)
      if (res.code == 0) {
        treedata.value = res.data
      }
    })
}
const selectB = () => {}
let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  dialogVisible1.value = false
}
const fileList = ref([])
const ipcList = ref([])
const fileinfo = (data: any) => {
  api
    .post('/multialarm/client/alarm_event/get_all_resource', {
      range: 1000,
      multiAlarmId: data.multiAlarmId
    })
    .then((res: any) => {
      if (res.code == 0) {
        console.log('ress', res)
        fileList.value = res.data.fileList
        ipcList.value = res.data.ipcList
      }
    })
  dialogVisible.value = true
}
const showdata = ref()
const fileinfo1 = (data: any) => {
  showdata.value = data
  dialogVisible1.value = true
}
const value2 = ref<any>('')

let value1 = ref<any>('')
const tableData = ref<any>([])
//查询
const pageNum2 = ref(1)
const handleCurrentChange2 = (data: any) => {
  console.log(value2)

  pageNum2.value = data
  api
    .post('/multialarm/client/sensor/alarm_event/getlist', {
      // start: value2._rawValue[0],
      // end: value2._rawValue[1],
      start: value2.value[0],
      end: value2.value[1],
      pagesize: 20,
      pageindex: data - 1,
      city: city == '湖南省' ? null : city
    })
    .then((res) => {
      console.log('安保点位', res)
      if (res.code == 0) {
        tableData.value = res.data
      }
    })
}
const total2 = ref()
const seach = () => {
  console.log(value1)

  if (value1.value == '' || value1.value == undefined) {
  } else {
    city = value1.value.value
  }

  api
    .post('/multialarm/client/sensor/alarm_event/getcount', {
      start: value2.value[0],
      end: value2.value[1],
      city: city == '湖南省' ? null : city
    })
    .then((res: any) => {
      if (res.code == 0) {
        total2.value = res.data.count
      }
    })
  api
    .post('/multialarm/client/sensor/alarm_event/getlist', {
      start: value2.value[0],
      end: value2.value[1],
      pagesize: 20,
      pageindex: 0,
      city: city == '湖南省' ? null : city
    })
    .then((res) => {
      // console.log('警情管理', res)
      if (res.code == 0) {
        tableData.value = res.data
      }
    })
}
const onSubmit = function () {}
</script>

<style scoped lang="scss">
.cont {
  width: 100%;
  height: 100%;
  background-color: #fff;
}



// :deep(.el-descriptions) {
//   width: 98%;
//   margin: 10px auto;
//   text-align: center;
//   border: 1px solid #1F9BD9;

//   --el-descriptions-table-border: {
//     1px solid #1F9BD9
//   }

//   ;

//   --el-descriptions-item-bordered-label-background: {
//     transparent
//   }

//   ;
// }

// :deep(.el-descriptions__body) {
//   background: transparent;
// }

// :deep(.el-descriptions__label) {
//   width: 130px;
//   color: rgb(12, 214, 254);
//   background: transparent;
// }

// :deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
//   color: #fff;
// }

// :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
//   border: 1px solid #1F9BD9;
// }

.uploadBtn .el-button {
  background-color: transparent;
  border-color: #1F9BD9;
  color: #1F9BD9;
}

.uploadBtn .el-button i {
  font-size: 16px;
  margin-right: 3px;
}

.uploadBtn .el-button:hover {
  color: rgb(12, 214, 254);
  border: 1px solid rgb(12, 214, 254);
}

// :deep(.el-dialog__body) {
//   padding: 10px;
//   color: #fff;
// }

// :deep(.el-dialog) {
//   --el-dialog-bg-color: #071D4D;
//   border: 3px solid #387dbf;
// }

// :deep(.el-dialog__header) {
//   padding: 13px;
//   border-bottom: 1px solid #3374b4 !important;
//   margin-right: 0px;
// }

// :deep(.el-dialog__title) {
//   color: #067bc1 !important;
//   font-weight: 500;
// }


// :deep(.el-dialog__headerbtn .el-dialog__close) {
//   color: #fff;
//   font-weight: 500;
//   font-size: 18px;
// }
:deep(.el-input__inner) {
  color: #000;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: #d9d9d95e;
  height: 4px;
}

:deep(.el-tabs__item) {
  color: #fff;
  font-weight: 700;
}

:deep(.el-tabs) {
  --el-tabs-header-height: 50px;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
}

:deep(.el-tabs__active-bar) {
  height: 4px;
}

:deep(.el-tabs__nav-wrap) {
  padding-left: 23px;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  // box-shadow: 0 0 0 1px #1F9BD9;
}

:deep(.el-date-editor .el-range-separator) {
  color: #fff;
}

:deep(.el-input__prefix) {
  color: #fff;
}

:deep(.el-button) {
  background-color: transparent;
  border-color: #0cd6fe;
  color: #ff4d4f;
}

:deep(.el-date-editor .el-range-input) {
  color: #000;
}

:deep(.el-table .el-table__cell) {
  padding: 2px 0px;
  border-right: none;
  border-bottom: 1px solid #edeef0;
}

:deep(.el-table) {

  --el-table-border: {
    none;
  }

  ;

  --el-table-border-color: {
    none;
  }

  // ;
}

:deep(.el-table th.el-table__cell) {
  background-color: #f9fafc;
  padding: 10px 0px;
  // color: #888;
}

:deep(.el-table .cell) {
  color: #333;
}

:deep(.el-table thead .cell) {
  color: #888;
}

:deep(.el-table tr) {
  // background-color: transparent;
}

:deep(.el-table__body tr.current-row > td) {
  // background: #2cabff !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  // background-color:  #13306A !important;
}

:deep(.el-table th.el-table__cell) {
  // background-color:#13306A;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  // background: #D1DEEF !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
  // background-color: transparent;
}

:deep(.el-tabs) {
  height: 100%;
}

:deep(.el-tabs__content) {
  height: calc(100% - 53px);
}

:deep(.el-tab-pane) {
  height: 100%;
}

::-webkit-scrollbar {
  background-color: #071D4D;
}
</style>
