<template>
  <div class="box-1" :class="homeStore.amplify?'':'coll-box'">
    <div class="header">
     <div class="header__left" style="flex:1;" @click="handlePiaoPop">
        <img src="@/assets/images/ticket.png" />
        <div
          class="header__left-item"
          v-for="(item, index) in scenicStore.scenicSpotData.data"
          :key="index"
        >
          <div class="label">{{ item.name }}</div>
          <countup :end-val="item.value" />
        </div>

      </div>
      <div class="rt-lable">
        <div v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
          <div class="label">{{ item.name }}</div>
          <p class="value" :class="{ error: item.type==2,warning: item.type==1 }">{{ item.value }}</p>
        </div>
      </div>
    </div>
    <div class="main">
		<a @click="hanldeToDetails"  class="look-btn">
<!--			查看详情-->
			 <img src="@/assets/images/d-icon-1.png" />
		</a>
      <iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/bdc.html"></iframe>
      <iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="http://192.168.77.200//map/sxzd/sxzd.html"></iframe>
      <iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="http://192.168.77.200/map/lqh/lqh.html"></iframe>
    </div>
    <div class="footer">
      <div class="flex">
        <div class="item">
          <circle-progress
            :width="170"
            :height="90"
            :value="parseFloat(scenicStore.wordkOrderData.toDayData.rate)"
            :title="`${scenicStore.wordkOrderData.toDayData.rate}%`"
            subTitle="完成率"
          />
          <div>
            <div class="bg">
              <span class="label">今日工单总条数：</span>
              <span class="value success">
                <countup :end-val="scenicStore.wordkOrderData.toDayData.count" />
              </span>
            </div>
            <div class="bg">
              <span class="label">工单完成数：</span>
              <span class="value">
                <countup :end-val="scenicStore.wordkOrderData.toDayData.end" />
              </span>
            </div>
          </div>
        </div>
        <div class="item">
          <circle-progress
            :width="170"
            :height="90"
            :value="parseFloat(scenicStore.wordkOrderData.warnData.rate)"
            :title="`${scenicStore.wordkOrderData.warnData.rate}%`"
            subTitle="完成率"
          />
          <div>
            <div class="bg">
              <span class="label">今日紧急工单数：</span>
              <span class="value" :class="scenicStore.wordkOrderData.warnData.count>1?'error':'success'">
                <countup :end-val="scenicStore.wordkOrderData.warnData.count" />
              </span>
            </div>
            <div class="bg">
              <span class="label">紧急工单完成数：</span>
              <span class="value">
                <countup :end-val="scenicStore.wordkOrderData.warnData.end" />
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex align-center justify-between">
        <div>
          <Vue3SeamlessScroll
            class="list"
            :list="scenicStore.wordkOrderList"
            :limitScrollNum="3"
            :hover="true"
            :step="0.2"
            :wheel="true"
            :isWatch="true"
          >
            <div class="cell" v-for="(item, index) in scenicStore.wordkOrderList" :key="index">
              <span :class="`tag--${item.level}`">{{ item.level_text }}</span>
              <p class="content">
                {{ item.title }}
              </p>
            </div>
          </Vue3SeamlessScroll>
        </div>
        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" @click="handleMore" />
      </div>
    </div>
	<el-dialog :title="'未来预订票数'" center v-model="dialogTableVisible">
	  <div class="bom-box">
	    <div class="table">
			<div class="header-title">{{gridTitle}}</div>
	      <div class="header">
	        <div>订票时间</div>
	        <div>订票数量</div>
          <template v-if="scenicSpotId == 'root00000000'">
            <div>徒步订票</div>
          </template>
          <div>团队订票</div>
          <div>散客订票</div>
	      </div>
	      <div class="list">
	        <div class="item" v-for="(item, index) in gridData" :key="index">
	          <div>{{ item.time }}</div>
	          <div>{{ item.value }}</div>
            <template v-if="scenicSpotId == 'root00000000'">
              <div>{{ item.walk }}</div>
            </template>
            <div>{{ item.group }}</div>
            <div>{{ item.single }}</div>
	        </div>
	      </div>
	    </div>
	  </div>
	</el-dialog>

  </div>
  <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />

</template>

<script setup>
  import countup from 'vue-countup-v3'
  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
  import { getSpotListApi } from '@/api/sentiment'
  import { useRouter } from 'vue-router'

  import { useScenicStore } from '@/stores/scenic'

  import { useMap } from '@/hooks/map'
  import {getPreviewUrlApi,getSpotTicketDate} from "@/api/home.js";
import pubSub from 'pubsub-js'
  const router = useRouter()
  const scenicStore = useScenicStore()
  const { initMap, addMarker, map, marker } = useMap()
 import { useHomeStore } from '@/stores/home'

 const homeStore = useHomeStore()
  let props = defineProps({
    scenicSpotId: {
      type: String,
      default: () => ''
    }
  })
  let scenicChange = null
  const handleMore = () => {
    router.push('/workOrder')
  }
  let hrefItem = ref(null)
  const hanldeToDetails = async()=>{
	  // let spotRes = await getSpotListApi()
	  // return false;
	  pubSub.publish('navToChange',hrefItem.value)

	  router.push('/monitor')
  }
  let src = ref('')
  let cameraIndexCode = ref('')
  let videoShow = ref(false)
  window.addEventListener("message", async(e) => {
    let {code,data} = await getPreviewUrlApi({
      type: 'hls',
      cameraIndexCode:e.data.cameraIndexCode
    })
    if(code===200){
      src.value = data.url
      cameraIndexCode.value = e.data.cameraIndexCode
      videoShow.value = true
    }
  });
  let dialogTableVisible = ref(false)
  let gridData = ref([])
  let gridTitle = ref('')
  const handlePiaoPop = async()=>{
	  dialogTableVisible.value = true
	  let res = await getSpotTicketDate({scenicSpotId:props.scenicSpotId})
	  gridData.value = res.data
  }
  let myElement = ref(false)
  onMounted(() => {
    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {

		gridTitle.value = data.name

		hrefItem.value = data
      // initMap('scenic-map', data.lng, data.lat, 15)
      // map.value.setDisplayOptions({
      //   poiText: false, // 隐藏poi标注
      //   poiIcon: false, // 隐藏poi图标
      //   building: false // 隐藏楼块
      // })
      // var bounds = new BMapGL.Bounds(
      //   new BMapGL.Point(109.604998,31.030391),
      //   new BMapGL.Point(109.624833,31.044965)
      // )
      // var imgOverlay = new BMapGL.GroundOverlay(bounds, {
      //   type: 'image',
      //   url: sxzd,
      //   opacity: 1
      // })
      // map.value.addOverlay(imgOverlay)
    })
	PubSub.subscribe('changeAmplify', (msg, data) => {
	   if(data&&myElement.value){
		    myElement.value.classList.add('coll-box');

	   }
	})
  })
  onUnmounted(() => {
    PubSub.unsubscribe(scenicChange)
  })
</script>

<style scoped lang="scss">
	.coll-box{
		flex:1 !important;
	}
	.box-1 .rt-lable{
		.label{
			font-size:vw(14) !important;
		}
		.value{
			font-size:vw(24) !important;
		}
	}
  .box-1 {
    margin-top: vh(120);
    width: vw(780);
	// flex:1;
    height: vh(950);
    padding: vw(10);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-3.png');
    background-size: 100% 100%;
    .header {
      display: flex;
      margin-top: vh(10);
      &__left {
        display: flex;
        align-items: center;
		margin-right:vw(10);
		cursor:pointer;
        > img {
          width: vw(74);
          height: auto;
        }
      }
      &__left-item {
        position: relative;
        width: vw(115);
        height: vh(58);
        padding-left: vw(10);
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: url('@/assets/images/ticket-item-bg.png');
        background-size: 100% 100%;
		// margin-left:vw(30);
        .label {
          position: absolute;
          top: vh(-4);
          font-weight: 400;
          font-size: vw(14);
          color: #ffffff;
		  left:vw(0)
        }
      }
      & > div:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .label {
          font-weight: 400;
          font-size: vw(16);
          color: #ffffff;
        }
        .value {
          font-weight: bold;
          font-size: vw(28);
          color: #02f9fa;
          text-align: center;
          line-height: vh(60);
        }
        .warning {
          color:#DCBB48;;
        }
        .error {
          color: #ff4400;
        }
      }

      .countup-wrap {
        color: #02f9fa;
        font-size: vw(28);
        font-weight: bold;
      }
    }
    .main {
      width: 100%;
      height: vh(600);
      overflow-x: auto;
      overflow-y: hidden;
	  position:relative;
	  .look-btn{
		  cursor: pointer;
		  position: absolute;
		  right: vw(20);
		  top: 6%;
		  transform: translateY(-50%);
		  padding: vw(20);
		  display: flex;
		  align-items: center;
		  //background: #0a4190;
		  border-radius: vw(4);
		  font-size: vw(16);
		  font-weight:700;
		  color: #fff;
		  z-index: 999;
		  img{
			  width:vw(80);
			  // height:;
		  }
	  }
      .scenic-box {
        width: 100%;
        height: 100%;
      }
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        height: vh(10); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      > img {
        width: auto;
        height: 100%;
      }
    }
    .footer {
      .item {
        flex: 1;
        height: vh(140);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/bg-3.png');
        background-size: 100% 100%;
        &:nth-child(1) {
          margin-right: vw(10);
        }
        .bg {
          padding-left: vw(20);
          //width: vw(243);
          height: vh(40);
          display: flex;
          align-items: center;
          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
          &:nth-child(1) {
            margin-bottom: vh(4);
          }
          .label {
            width: vw(120);
            font-weight: 400;
            font-size: vw(14);
            color: #fff;
          }
          .value {
            font-weight: bold;
            font-size: vw(28);
            color: #fff;
          }
          .success {
            color: #02f9fa;
          }
          .error {
            color: #e21b1b;
          }
        }
      }
      .list {
        margin-top: vh(4);
        height: vh(116);
        overflow: hidden;
      }
      .cell {
        display: flex;
        margin-left: vw(4);
        margin-top: vh(12);
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
        .tag {
          padding: 0 vw(16);
          font-weight: bold;
          font-size: vw(14);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: vw(2);
        }
        .tag--important {
          @extend .tag;
          background: #feae00;
        }
        .tag--warn {
          @extend .tag;
          background: #d9011b;
        }
        .tag--normal {
          @extend .tag;
          background: #2380fb;
        }
        .content {
          margin-left: vw(4);
          padding: 0 vw(10);
          width: vw(460);
          height: vh(24);
          line-height: vh(24);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
          font-size: vw(14);
          color: #ffffff;
          border-radius: vw(2);
          background: rgba(0, 150, 255, 0.28);
        }
      }
      .more {
        cursor: pointer;
        width: auto;
        height: vh(100);
        margin-top: vh(12);
      }
    }
  }
</style>
<style lang="scss" scoped>
	:deep(.el-dialog__headerbtn .el-dialog__close){
		color:#fff;
		font-size:40px;
		position:relative;
		top:15px;
		right:15px;
	}
	:deep(.el-dialog__header.show-close){
		padding-right:0;
	}
  :deep(.el-dialog) {
    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
    background-size: 100% 100%;
	width:vw(1500);
  }
  :deep(.el-dialog__title) {
    color: #fff;
    font-weight: bold;
  }

  .sp-ico {
    width: vw(40);
  }
  .item-name {
    width: 90%;
    text-align: center;
  }
  .sp-img {
    width: vw(100);
  }
  .correspondence {
    margin: vw(8);
    width: vw(300);
    height: vh(1070);
    background-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;
  }
  .bom-box2{
	  // margin-top:vh(10);
	  min-width:vw(900);
	  height:vh(800);

  }
  .header-title{
  		  font-size:vw(32);
  		  color:#fff;
  		  text-align:center;
  		  font-weight:bold;
  		  margin-bottom:vh(20);

  }
  .bom-box {
	  .table2{
		  width:100%;
		  height:vh(740);
	  }
    .table {
      width: 100%;
      margin-top: vh(5);
      .header {
        height: vh(28);
        font-weight: 400;
        font-size: vw(24);
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
        & > div {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .list {
        overflow-y: auto;
        height: vh(490);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: 'transparent'; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
        .item {
          height: vh(50);
          font-weight: 400;
          font-size: vw(24);
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
            background: linear-gradient(
              90deg,
              rgba(0, 150, 255, 0) 0%,
              rgba(0, 150, 255, 0.22) 100%
            );
          }
          & > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap; /* 保证文本在一行内显示 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          }
        }
      }
    }
    .title {
      span {
        margin-left: vw(30);
        font-weight: 800;
        font-size: vw(15);
        line-height: vh(26);
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
    }
  }
  .top-box {
    width: 100%;
    height: vh(500);
    .icon-box {
      font-weight: 400;
      font-size: vw(14);
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
      .item {
        cursor: pointer;
        width: 50%;
        margin-top: vh(40);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:nth-child(3n) {
          margin-right: 0;
        }
        & > img {
          width: vw(54);
          height: auto;
        }
      }
    }
    .title {
      width: vw(260);
      height: vh(26);
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
      font-size: vw(16);
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
      background-size: 100% 100%;
    }
  }
</style>
