<template>
  <div>
    <div class="case-list" v-show="!isListInfo">
      <i class="el-icon-close case-list-close" @click="close"/>
      <el-radio-group v-model="current" v-if="type==='case'">
        <el-radio-button label="0">{{title}}</el-radio-button>>
        <el-radio-button v-if="hasUrge" label="1">紧急事件</el-radio-button>>
      </el-radio-group>
      <el-radio-group v-model="current" v-else-if="type==='alarm'">
        <el-radio-button label="0">最新告警</el-radio-button>>
      </el-radio-group>
      <div class="list-down" v-if="type==='case'&&refreshDown">
        <div v-for="item in list" :key="item.id" class="list-item" @dblclick="menuClick(item)">
          <div style="height: 100%;width:70%;">
            <i class="el-icon-location item-title" :title="item.eventname"><span style="margin-left: 10px">{{item.eventname}}</span></i>
            <i class="el-icon-time item-line"><span style="margin-left: 5px">{{item.createtime}}</span></i>
            <i class="el-icon-s-order item-line"><span style="margin-left: 5px">{{item.eventsource}}</span></i>
            <i class="el-icon-menu item-line one-line" :title="item.eventypename"><span style="margin-left: 5px">{{item.eventypename}}</span></i>
            <i class="el-icon-office-building item-line"><span style="margin-left: 5px">{{item.dutydeptname}}</span></i>
            <i class="el-icon-location item-line" :title="item.location"><span style="margin-left: 5px">{{item.location}}</span></i>
          </div>
          <div style="display: flex;height: 2rem;width:40%;margin-left: -8%">
            <div class="colorbox-text" :style="`background:${statusColor[Number(item.eventstatusnameid)]}`">{{item.eventstatusname}}</div>
            <div class="colorbox-text" :style="`background:${urgencyColor[item.urgentid]}`">{{item.urgencyname}}</div>
          </div>
          <div style="height: 7rem;width:30%;">
            <el-image :src="item.imgurl?`${item.imgurl}`:defaultPhoto" style="width: 100%;height: 7rem"/>
          </div>
          <div style="height: 2rem;width:30%;margin-top: 5px">
            <el-button size="small" v-if="item.orderid!==''" round plain icon="el-icon-s-order" @click="flowClick(item)">事件追踪</el-button>
          </div>
        </div>
      </div>
      <div class="list-down" v-else-if="type==='alarm'&&refreshDown">
        <div v-for="item in list" :key="item.id" class="list-item">
          <div style="height: 100%;width:70%;">
            <i class="el-icon-location item-title"><span style="margin-left: 10px">{{item.alarmcontent}}</span></i>
            <i class="el-icon-time item-line"><span style="margin-left: 5px">{{item.createtime}}</span></i>
            <i class="el-icon-s-order item-line"><span style="margin-left: 5px">{{item.code}}</span></i>
            <i class="el-icon-menu item-line"><span style="margin-left: 5px">{{item.devicename}}</span></i>
            <i class="el-icon-location item-line"><span style="margin-left: 5px">{{item.location}}</span></i>
          </div>
          <div style="display: flex;height: 2.5rem;width:40%;margin-left: -8%;">
            <el-button type="primary" size="small">告警研判</el-button>
            <el-button type="primary" size="small" v-if="item.orderid!==''">事件追踪</el-button>
          </div>
          <div style="height: 50%;width:30%;padding-top: 0.5rem">
            <el-image :src="item.imgurl?`${item.imgurl}`:defaultPhoto" style="width: 100%;height: 7rem"/>
          </div>
        </div>
      </div>
      <el-pagination
        :current-page="query.offset"
        :page-size="query.limit"
        :total="total"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
      />
    </div>
    <list-info :data="pageInfo" :list="flowList" v-if="isListInfo" @close="isListInfo=false"/>
  </div>
</template>
<script>

import ListInfo from "../ListInfo";
import {getFlowInfo} from "../../api/common";
export default {
  name: 'ListPage',
  components: { ListInfo },
  props: {
    type: {
      type: String,
      default: 'case'
    },
    title: {
      type: String,
      default: '最新事件'
    },
    total: {
      type: Number,
      default: 0
    }, // 数据总数
    query: {
      type: Object,
      default: function() {
        return {
          pageNo: 0,
          pageSize: 5
        }
      }
    }, // 查询条件，此处主要需要分页的条件
    list: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    hasUrge: {
      type: Boolean,
      default: false
    },
    Urge: {
      type: Array,
      default: () => {
        return []
      }
    },
    infoUrl: {
      type: String,
      default: 'jxhsj-jxhsjsttj/jxhsjst/lczzxq' // 精细化
    }
  },
  data() {
    return {
      pageInfo: {
      },
      flowList: [
        {
          time: '2022-12-12 12:12:12',
          sendPerson:'发送人',
          receivePerson: '接收人',
          detail: '处置详情',
          picUrl: '处置图片',
          title: '流程标题',
          id: '1'
        },  {
          time: '2023-01-12 12:12:12',
          sendPerson:'发送人',
          receivePerson: '接收人',
          detail: '处置详情',
          picUrl: '处置图片',
          title: '流程标题',
          id: '2'
        }, {
          time: '2023-02-12 12:12:12',
          sendPerson:'发送人',
          receivePerson: '接收人',
          detail: '处置详情',
          picUrl: '处置图片',
          title: '流程标题',
          id: '2'
        },
      ],
      isListInfo: false,
      defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
      statusColor: {
        1: '#a1a1a1',
        2: '#f8e31a',
        3: '#5ab1fc',
        4: '#f89835',
        5: '#3def83',
      },
      urgencyColor: {
        'C':'#2f8d00',
        'B':'#c4ad00',
        'A':'#8d0000'
      },
      indexNum: 0,
      refreshDown: true,
      current: 0
    }
  },
  computed: {
  },
  methods: {
    initDialog() {
      this.isListInfo = false
    },
    // 点击流程追踪
    flowClick(item) {
      // 基础信息
      console.log(item)
      this.pageInfo = item
      this.flowList = []
      this.isListInfo = true
      const id = item.hasOwnProperty('id') ? item.id : item.eventid
      getFlowInfo(this.infoUrl,id).then( res => {
        if(res.code === 200) {
          this.flowList = res.data.value
        }
      })
    },
    // 改变当前页
    handleCurrentChange(val) {
      // this.query.offset = val
      this.$emit('change', { page: val })
    },
    close() {
        this.$emit('close')
    },
    menuClick(e) {
      console.log(e, '列表点击')
      this.$emit('menuClick', e)
    },
  }
}
</script>

<style scoped>
.case-list-close {
  color: #9dd6fd;
  font-size: 2rem;
  position: absolute;
  right: 20px;
  top: 10px;
  font-weight: bold;
  cursor: pointer;
  z-index: 999999999;
}
.list-down {
  margin-top: 10px;
  overflow-y: scroll;
  width: 100%;
  height: calc(100% - 6rem);
  padding: 0px 10px;
}
.list-item {
  width: calc(100% - 35px);
  height: 12rem;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1.4rem;
  padding: 0.8rem 10px;
  margin: 0.2rem 0rem;
  letter-spacing: 2px;
  cursor: pointer;
  background-size: 100% 100% !important;
  color: white;
  border-top: 2px solid #0494f3;
  border-radius: 10px;
}
.list-item:hover {
  background-size: cover !important;
  background: url('../../assets/images/right/选中.png') !important;
  background-size: 100% 100% !important;
}
.item-title {
  width: 90%;text-align: left;margin-bottom: 5px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 文本显示为省略号 */
}

/*.item-title:hover::before {*/
/*  content: attr(title); !* 使用title属性作为浮窗内容 *!*/
/*  display: inline-block;*/
/*  position: absolute; !* 绝对定位在父元素中 *!*/
/*  top: 100%; !* 在父元素下方 *!*/
/*  left: 0;*/
/*  padding: 5px;*/
/*  background-color: #ff0000;*/
/*  border: 1px solid #ccc;*/
/*  border-radius: 4px;*/
/*  z-index: 999; !* 确保浮窗位于最上层 *!*/
/*}*/

.item-line {
  display: flex;
  font-size: 1.2rem;
  color: #aed2f3;
  padding-left: 20px;
  line-height: 1.8rem;
  width: 95%;
  word-break: break-all;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置最大行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.colorbox-text {
  background-color: #0a88fc;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  padding: 0rem 0.4rem;
  margin-left: 5px;
  text-align: center;
  width: 5rem;
  margin-bottom: 4px;
  cursor: pointer;
}
.one-line {
  display: block !important;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 文本显示为省略号 */
}
</style>