<template>
  <div class="case-list list-info">
    <i class="el-icon-close case-info-close" @click="close"/>
    <i class="el-icon-document info-title"><span style="margin-left: 10px">事件详情</span></i>
    <div class="list-down">
        <div style="height: 100%;width:70%;">
          <i class="el-icon-location item-title" :title="data.eventname"><span style="margin-left: 10px;font-size: 1.4rem;color: white;">{{data.eventname}}</span></i>
          <div style="padding-left: 1rem;">
            <i class="el-icon-time item-line"><span style="margin-left: 10px">{{data.createtime}}</span></i>
            <div class="item-line">统一编码：{{data.unicode}}</div>
            <div class="item-line">事件来源：{{data.eventsource}}</div>
            <div class="item-line">事件类别：{{data.eventypename}}</div>
            <div class="item-line">覆盖范围：{{data.cover}}</div>
            <div class="item-line">责任部门：{{data.dutydeptname}}</div>
            <div class="item-line">上报人员：{{data.reportname}}</div>
            <div class="item-line item-location">发生地点：{{data.location}}</div>
          </div>
        </div>
        <div style="display: flex;height: 2.5rem;width:40%;margin-left: -8%">
          <div class="colorbox-text" :style="`background:${statusColor[Number(data.eventstatusnameid)]}`">{{data.eventstatusname}}</div>
          <div class="colorbox-text" :style="`background:${urgencyColor[data.urgentid]}`">{{data.urgencyname}}</div>
        </div>
        <div style="height: 50%;width:30%;">
          <el-image :src="data.imgUrl?`${data.imgUrl}`:defaultPhoto" style="width: 100%;height: 7rem"/>
        </div>
    </div>
    <div class="list-down" style="height: 50%;">
      <i class="el-icon-s-promotion" style="height: 2rem;width: 100%;text-align: left;margin-top: 0.5rem"><span style="margin-left: 10px">事件流程</span></i>
      <el-timeline class="flow-div">
        <el-timeline-item :timestamp="item.time" hide-timestamp size="large" icon="el-icon-edit" color="#0bbd87dd" v-for="(item,index) in list" :key="index">
            <div class="item-card">
              <div style="width: 60%;" >
                <div class="flow-line" style="font-size: 1.4rem;color: white;font-weight: bold">{{item.title}}</div>
                <i class="el-icon-time flow-line"><span style="margin-left: 5px">{{item.time}}</span></i>
                <div class="flow-line">发送人：{{item.sendperson}}</div>
                <div class="flow-line">接收人：{{item.receiveperson}}</div>
              </div>
              <div style="width:30%;">
                <el-image :src="data.imgUrl?`${data.imgUrl}`:defaultPhoto" style="width: 100%;height: 7rem"/>
              </div>
              <div class="flow-line one-line" style="width: 90%" :title="item.detail">处置详情：{{item.detail}}</div>
            </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script>

export default {
  name: 'ListInfo',
  props: {
    data: { // 事件详情
      type: Object,
      default: () => {
        return {
          businessstatus: '',
          createtime: '',
          deptname: '',
          dutydeptname: '',
          dutydeptnameid: '',
          eventid: '',
          eventlv: '',
          eventname: '',
          eventsource: '',
          eventsourceid: '',
          eventstatusname: '',
          eventstatusnameid: '',
          grid: '',
          gridid: '',
          gridtype: '',
          imgurl: '',
          latitude: '',
          location: '',
          longitude: '',
          ptype: '',
          reportname: '',
          reportphone: '',
          scene: '',
          sceneid: '',
          type: '',
          typetree: '',
          unicode: '',
          urgencyname: '',
          urgentid: '',
          urgingtime: ''
        }
      }
    },
    list: { // 事件流程
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
  },

  data() {
    return {
      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: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.one-line {
  display: block !important;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 文本显示为省略号 */
}
.list-info {
  -webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  /*transition: max-height .3s ease-in;*/
  /*transform-origin: 50% 0;*/
  /*transform: translateX(-100%) rotateY(180deg) scale(0.1);*/
}
.list-down {
  overflow-y: scroll;
  overflow-x: hidden;
  width: calc(100% - 2.5rem);
  height: 36%;
  margin: 0.2rem 0.5rem;
  padding: 0.5rem 10px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  letter-spacing: 2px;
  color: white;
  border-top: 2px solid #0494f3;
  font-size: 1.4rem;
}
.info-title {
  width: 100%;
  color: white;
  margin: 1rem;
  justify-content: left;
  font-size: 1.4rem;
  text-align: left;
}
.item-title {
  width: 90%;
  text-align: left;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 2rem;
  color: #90c8f8;
  display: block;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 文本显示为省略号 */
}
.item-line {
  display: flex;
  font-size: 1.2rem;
  color: #aed2f3;
  line-height: 1.8rem;
  width: 100%;
  word-break: break-all;
  text-align: left;
}
.flow-line {
  display: flex;
  font-size: 1.2rem;
  color: #aed2f3;
  line-height: 2rem;
  width: 100%;
  word-break: break-all;
  text-align: left;
}
.colorbox-text {
  background-color: #0a88fc;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  padding: 0.2rem 0.4rem;
  margin-left: 5px;
  text-align: center;
  width: 5rem;
  margin-bottom: 4px;
  cursor: pointer;
}
.item-card {
  width: calc(100% - 3rem);
  height: 10rem;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 0.5rem 0.8rem 0.5rem 1rem;
  letter-spacing: 0;
  display: flex;
  background-color: #00c4ff44;
  box-shadow: 0 2px 12px 0 #447a8f;
}
.flow-div {
  flex:1;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 0.5rem;
  margin: 0rem -0.5rem 0 -2.2rem;
}
.case-info-close {
  color: #9dd6fd;
  font-size: 2rem;
  position: absolute;
  right: 20px;
  top: 10px;
  font-weight: bold;
  cursor: pointer;
  z-index: 999999999;
}
.item-location {
  width:120%;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
}
</style>