<template>
  <div class="max-big-box">
    <div class="big-max-box" v-if="pageType==1">
      <!--左侧-->
      <div class="left-max-box">
        <div class="left-title-box">
          <img src="~@/assets/images/xian_1.png">
          <p>当前行驶中的任务定位监控</p>
          <img src="~@/assets/images/xian_2.png">
        </div>
        <!--地图-->
        <div class="left-bottom-box">
          <iframe
            class="left-bottom-box-webMapURL"
            :src="webMapURL" scrolling="auto" frameborder="0">
          </iframe>
        </div>
      </div>
      <!--右侧-->
      <div class="right-max-box">
        <div class="right-box-button-p cursor_pointer" @click="goHistoryPage">
          <img src="~@/assets/images/icon_64.png">
          <p>其他任务历史轨迹查看</p>
        </div>
        <div class="right-top-max-box">
          <p class="right-top-title">任务信息</p>
          <div class="right-top-title-box">
            <p>序号</p>
            <p>任务名称</p>
            <p>状态</p>
          </div>
          <div class="right-top-for-max-box TabStrip">
            <div class="right-top-for-box"
                 :class="{'mouColorA':mouColor==index}"
                 @click="mouClick(item)"
                 @mouseenter="intoOutMou(index)" @mouseleave="intoOutMou('off')"
                 v-for="(item,index) in rightTop" :key="index">
              <p>{{item.id}}</p>
              <p>{{item.name}}</p>
              <p>{{item.type}}</p>
            </div>
          </div>
        </div>
        <div class="right-bottom-max-box">
          <p class="right-top-title">{{mapInfoData.title}}</p>
          <p class="address-p">位置：{{mapInfoData.address}}</p>
          <div class="right-bottom-big-box TabStrip">
            <div class="right-title-box">
              <img src="~@/assets/images/xian_1.png">
              <p>任务详细信息</p>
              <img src="~@/assets/images/xian_2.png">
            </div>
            <div class="text-box">
              <p>单位名称：</p>
              <p>{{mapInfoData.unitName}}</p>
            </div>
            <div class="text-box">
              <p>医疗队名称：</p>
              <p>{{mapInfoData.medicalName}}</p>
            </div>
            <div class="text-box">
              <p>执行任务时间：</p>
              <p>{{mapInfoData.taskPlayTime}} 至 {{mapInfoData.taskEndTime}}</p>
            </div>
            <div class="text-box">
              <p>执行任务地点：</p>
              <p>{{mapInfoData.taskAddress}}</p>
            </div>
            <div class="text-one-box">
              <p>备注：</p>
              <p>{{mapInfoData.text}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <view-task-details
      v-if="pageType==2">
    </view-task-details>
    <history
     v-if="pageType==3">
    </history>
  </div>
</template>

<script>
  import { webMap_URL } from '@/api/config'
  export default {
    name: "positioningMonitoringView",//定位监控
    components:{
      viewTaskDetails: resolve => {require(['@/components/directorateDecisionSupport/positioningMonitoringView/viewTaskDetails'], resolve)},//任务详细信息查看
      history: resolve => {require(['@/components/directorateDecisionSupport/positioningMonitoringView/history'], resolve)},//历史轨迹
    },
    data () {
      return {
        webMapURL:webMap_URL,
        //页面状态
        pageType:1,
        // 列表数据
        rightTop:[
          {
            id:"1",
            name:"新桥医院野战部队紧急拉动任务",
            type:"出发拉动",
          },
          {
            id:"2",
            name:"新桥医院野战部队紧急拉动任务",
            type:"出发拉动",
          },
          {
            id:"3",
            name:"新桥医院野战部队紧急拉动任务",
            type:"出发拉动",
          },
          {
            id:"4",
            name:"新桥医院野战部队紧急拉动任务",
            type:"出发拉动",
          },
        ],
        //列表悬浮状态
        mouColor:"",
        //地图点中展示数据
        mapInfoData:{
          title:"抗震救灾任务",
          address:"重庆市********83号",
          unitName:"服务保障中心",
          medicalName:"野战医疗队",
          taskPlayTime:"2020-10-10 10:21",
          taskEndTime:"2020-10-10 12:21",
          taskAddress:"重庆市*****************83号",
          text:"****部门近期进行****活动,请务必保证仓库方面随时沟通联系."
        },
      }
    },

    created(){

    },
    mounted() {

    },
    methods: {
      //去历史轨迹页面
      goHistoryPage(){
        this.pageType = 3;
      },
      //列表鼠标点击事件
      mouClick(item){
        this.pageType = 2;
      },
      //鼠标悬浮事件
      intoOutMou(item){
        if(item=='off'){
          this.mouColor = "off";
        }else{
          this.mouColor = item;
        }
      },
      //供子组件调用方法
      outPage(){
        this.pageType = 1;
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex-direction column
    flex:1;
    .big-max-box
      display flex
      flex:1;
      .left-max-box
        height:670px;
        width:1000px;
        margin:0 77px 0 56px;
        .left-title-box
          height:74px;
          width:576px;
          display: flex;
          margin:0 auto 17px;
          font-weight:700;
          img
            margin-top:46px;
            display block
            height:2px;
            width:170px;
          p
            flex:1;
            margin-top:14px;
            line-height:64px;
            font-size:$font_16;
            color:$color_ff;
        .left-bottom-box
          height:660px;
          .left-bottom-box-webMapURL
            height:670px;
            width:1000px;
          /*background:url("~@/assets/images/demo3.png");*/
          /*background-size 100% 100%*/
      .right-max-box
        width:731px;
        .right-box-button-p
          width:180px;
          margin:17px 0 49px 551px;
          display flex
          background $theme2
          border-radius:4px;
          img
            height:20px;
            width:20px;
            margin:5px 8px 0 13px;
          p
            text-align left
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
        .right-top-max-box
          width:731px;
          height:292px;
          background:url("~@/assets/images/min_back_02.png");
          background-size 100% 100%
          overflow hidden
          .right-top-title
            line-height:30px;
            margin:15px 0 0 30px;
            font-size:$font_16;
            font-weight:700;
            text-align left
            color:$color_ff;
          .right-top-title-box
            display flex
            margin:10px 10px 0 7px;
            p
              font-size:$font_16;
              color:$color_ff;
              line-height:44px;
            p:nth-child(1)
              width:119px;
            p:nth-child(2)
              width:380px;
            p:nth-child(3)
              width:215px;
          .right-top-for-max-box
            height:160px;
            margin:0 10px 0 7px;
            overflow-x:hidden;
            overflow-y:scroll;
            white-space: nowrap;
            .mouColorA
              background rgba(6,177,240,0.3)
            .right-top-for-box
              display flex
              cursor:pointer
              p
                font-size:$font_16;
                line-height:52px;
              p:nth-child(1)
                width:119px;
                color:$color_a1;
              p:nth-child(2)
                width:380px;
                color:$color_a1;
              p:nth-child(3)
                width:215px;
                color:$theme;
        .right-bottom-max-box
          margin-top:70px;
          width:731px;
          height:292px;
          background:url("~@/assets/images/min_back_02.png");
          background-size 100% 100%
          overflow hidden
          text-align left
          .right-top-title
            line-height:30px;
            margin:15px 0 0 30px;
            font-size:$font_16;
            font-weight:700;
            text-align left
            color:$theme;
          .address-p
            color:$color_ff;
            font-size:$font_14;
            line-height:30px;
            margin-left:30px;
          .right-bottom-big-box
            height:200px;
            margin:0 10px;
            overflow-x:hidden;
            overflow-y:scroll;
            .right-title-box
              display: flex
              width:330px;
              margin:0 auto;
              img
                width:100px;
                height:1px;
                margin-top:20px;
              p
                line-height:40px;
                text-align center
                width:130px;
                color:$color_ff;
                font-size:$font_16;
            .text-box
              display: flex
              margin-left:160px;
              p
                line-height:30px;
                font-size:$font_14;
              p:nth-child(1)
                width:110px;
                color:$theme;
              p:nth-child(2)
                width:300px;
                color:$color_ff;
            .text-one-box
              display: flex
              margin-left:160px;
              p
                font-size:$font_14;
              p:nth-child(1)
                line-height:30px;
                width:110px;
                color:$theme;
              p:nth-child(2)
                margin:8px 0;
                line-height:16px;
                width:300px;
                color:$color_ff;

  .colorA
    color:$theme;
</style>
