<template>
  <div class="detail-real-box">
    <div class="box-top">
      <div class="realbox-left">
        <div class="left-item"
             v-for="(item,index) in allData.informationList"
             :key="index">
          <div class="item-name">{{item.name}}</div>
          <div class="item-value"
               v-if="item.type=='src'">
            <el-image style=" height: 40px"
                      :src="item.value"
                      :zoom-rate="1.2"
                      :preview-src-list="allData.srcList"
                      :initial-index="0"
                      fit="cover" />
          </div>
          <div class="item-value"
               v-else
               :title="item.value">{{item.value}}</div>
        </div>
      </div>
      <div class="realbox-right">
        <el-image style="height:100%; width:100%"
                  :src="allData.url"
                  :zoom-rate="1.2"
                  :preview-src-list="allData.srcList"
                  :initial-index="0"
                  fit="cover" />
      </div>
    </div>
    <div class="box-bottom">
      <div class="btn-box">
        <div class="btn-item"
             v-for="(item,index) in allData.buttonList"
             :key="index+99"
             @click="anjiandetail(item)"
             v-show="item.show">
          {{item.name}}
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import {
  getImageUrl,
} from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment"
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()
import bus from "@/utils";

const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
});

const weatherpop = ref(false)
const allData = reactive({
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  informationList: [
    // {
    //   name: '发生地点',
    //   value: '周口市川汇区建材路',
    // },
    // {
    //   name: '时  间',
    //   value: '2023-04-23 18:00',
    // },
    // {
    //   name: '类  型',
    //   value: '道路积水',
    // },
    // {
    //   name: '描述',
    //   value: '建材路及水电发生积水',
    // },
  ],

  buttonList: [
    {
      name: '查看详情',
      value: '1',
      show: true,
    },
    {
      name: '处置记录',
      value: '2',
      show: true,
    },
    // {
    //   name: '成员单位',
    //   value: '3',
    //   show: true,
    // },
    // {
    //   name: '任务下发',
    //   value: '4',
    //   show: true,
    // },
    {
      name: '参考预案',
      value: '5',
      show: true,
    },
  ],

  url: getImageUrl('anjian', 'cockpit'),
  srcList: [getImageUrl('anjian', 'cockpit')],
})
const GetObj = ref({})

function fuzhiobj () {
  GetObj.value = props.pointfeature
  // allData.buttonList[2].show = GetObj.value.distributeFlag == 0 ? true : false
  allData.informationList = [
    {
      name: '发生地点',
      value: GetObj.value.address,
    },
    {
      name: '时  间',
      value: GetObj.value.recordTime,
    },
    {
      name: '类  型',
      value: GetObj.value.alarmTypeName,
    },
    {
      name: '描述',
      value: GetObj.value.alarmDesc,
    },
  ]

}



function showpic () {

};

// 点击对应的类型
function anjiandetail (item) {
  switch (Number(item.value)) {
    case 1:
      // 查看详情
      bus.emit('changeFirst')
      break;
    case 5:
      // 参考预案
      bus.emit('changefive')
      break;
    case 4:
      // 任务下发
      bus.emit('changefour')
      break;
    case 2:
      // 处置记录
      bus.emit('changetwo')
      break;
  }
}

onMounted(() => {
  fuzhiobj()
})

</script>
<style lang="scss" scoped>
//@import "@/assets/styles/cockpit.scss";

.detail-real-box {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #b4cded;
  background: rgba(11, 83, 149, 0.2);

  .box-top {
    display: flex;
    width: 100%;
    height: 144px;
    padding: 10px;
  }

  .box-bottom {
    width: 100%;
    height: calc(100% - 144px);
    border-top: 1px solid #0b5395;
    // padding: 10px 20px;
    display: flex;
    align-items: center;

    .btn-box {
      display: flex;
      width: 100%;
      justify-content: space-between;
      padding: 0 20px;
    }

    .btn-item {
      cursor: pointer;
      padding: 5px 10px;
      border: 1px solid #1cb2ff;
      color: #1cb2ff;
      background: linear-gradient(
        0deg,
        rgba(28, 178, 255, 0.2) 0%,
        rgba(28, 178, 255, 0.1) 100%
      );
      border-radius: 2px;
    }
  }

  .realbox-left {
    width: 50%;
    height: 100%;
    padding: 10px;

    .left-item {
      color: #b4cded;
      width: 100%;
      display: flex;
      margin-bottom: 10px;

      .item-name {
        flex: 1;
        text-align: justify;
        text-align-last: justify;
        margin-right: 40px;
      }

      .item-value {
        cursor: pointer;
        text-align: right;
        flex: 2;
        color: #ffffff;

        overflow: hidden;
        text-overflow: ellipsis; /* 超出部分省略号 */
        word-break: break-all; /* break-all(允许在单词内换行。) */
        display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
        -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-line-clamp: 1; /* 显示的行数 */

        img {
          height: 40px;
        }
      }
    }

    .left-item:first-child .item-value {
      color: #54a5ff;
    }
  }

  .realbox-right {
    width: 50%;
    height: 100%;
    padding: 10px;

    video {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
}
</style>