<template>
  <div class="dynamicInformation">
    <div class="leftInfo">
      <div class="title">中心动态</div>
      <div class="title">现场动态</div>
      <div class="title">调度动态</div>
    </div>
    <div class="rightInfo">
      <div class="TopTableHeader">
        <span class="TopTableListSpan TopTableListSpan1">时间</span>
        <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
        <span class="TopTableListSpan TopTableListSpan3">地点</span>
        <span class="TopTableListSpan TopTableListSpan4">状态</span>
        <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
        <span class="TopTableListSpan TopTableListSpan6">督办</span>
      </div>
      <!-- <div class="TopTableBody"> -->
      <Vue3SeamlessScroll :list="TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
        <div class="TopTableBody_list" v-for="item in TopTableData">
          <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
          <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
          <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
          <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
          <span class="TopTableListSpan TopTableListSpan6">
            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
            <img
              class="TopTableListSpanImg"
              src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
              alt=""
              @click="XianChangLianXian(item)"
            />
          </span>
        </div>
      </Vue3SeamlessScroll>
      <!-- </div> -->
    </div>
  </div>
</template>

<script setup name="dynamicInformation">
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { toRaw, toRefs } from 'vue';

const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});

const AllData = reactive({
  // 顶部表格数据
  TopTableData: [
    {
      sj: '2024-09-26 10:00:29',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
    {
      sj: '2024-09-27 16:10:248',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
    {
      sj: '2024-09-26 10:00:29',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
    {
      sj: '2024-09-27 16:10:248',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
  ],
});
const { TopTableData } = toRefs(AllData);

watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);

// 风险监测派发
const PaiFa = item => {
  console.log(item);
  let data = {
    title: '智慧外呼',
    comIDs: ['RQ_ZhiHuiWaiHu'],
    getSiteId: item.value,
  };
  bus.emit('publicDialog', data);
};

// 现场连线
const XianChangLianXian = item => {
  bus.emit('OpenRY');
};
</script>

<style lang="scss" scoped>
.dynamicInformation {
  position: absolute;
  left: 490px;
  top: 110px;
  width: calc(100% - 1020px);
  height: 136px;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
  align-items: center;

  .leftInfo {
    width: 116px;
    height: 136px;
    border: 1px solid yellow;
  }

  .rightInfo {
    width: calc(100% - 116px);
    height: 136px;
    // position: absolute;
    // left: 520px;
    // top: 110px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    box-shadow: inset 0 0 5px 5px #47eef38a;
    padding: 10px;
    .TopTableHeader {
      width: 100%;
      height: 34px;
      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
      border: 1px solid #74dde1;
      display: flex;
    }

    .TopTableBody {
      width: 100%;
      height: calc(100% - 34px);
      //   height: 102px;
      overflow: auto;
      //   border: 1px solid red;
      // display: flex;
      // flex-direction: column;
      // flex-wrap: nowrap;

      .TopTableBody_list {
        display: inline-block;
        width: 100%;
        height: 34px;
        /* 选择偶数行 */
        &:nth-child(even) {
          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
        }
      }
    }

    .TopTableListSpan {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      height: 34px;
      line-height: 34px;
      display: inline-block;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis; /* 超出宽度后显示省略号 */
      white-space: nowrap; /* 限制不允许换行 */
    }
    .TopTableListSpan1 {
      width: 20%;
      text-align: left;
      padding-left: 10px;
    }
    .TopTableListSpan2 {
      width: 25%;
      text-align: center;
    }
    .TopTableListSpan3 {
      width: 20%;
      text-align: center;
    }
    .TopTableListSpan4 {
      width: 10%;
      text-align: center;
    }
    .TopTableListSpan5 {
      width: 15%;
      text-align: center;
    }
    .TopTableListSpan6 {
      width: 10%;
      text-align: right;
      padding-right: 10px;

      .TopTableListSpanImg {
        width: 15px;
        height: 19px;
        margin: 7px;
        cursor: pointer;
      }
      .TopTableListSpanImg2 {
        width: 19px;
        height: 19px;
        margin: 7px;
        cursor: pointer;
      }
    }
  }
}
</style>