<template>
  <div v-show="visible">
    <div class="infoWindowBox">
        <div class="topNav">
            <div class="title">电磁阀4215153265 <span>【在线】</span></div>
            <div class="record">操作记录</div>
        </div>
        <div class="equipInfo">
            <div class="equipImg">
                <img src="../../../../../static/images/equipImg2.png" width="140px" alt="">
            </div>
            <div class="equipState"> 
                <div>
                    <span class="title">指令</span>
                    <span class="state">关闭</span>
                </div>
                <div>
                    <span class="title">状态</span>
                    <span class="state">关闭</span>
                </div>
                <div>
                    <span class="title">报警</span>
                    <span class="state">正常</span>
                </div>
            </div>
            
        </div>
        <div class="equipCtrl">
            <div>
                <span>灌溉模式：</span>
                <el-radio v-model="irrigateModel" label="1">手动</el-radio>
                <el-radio v-model="irrigateModel" label="2">自动</el-radio>  
            </div>
            <div>
                <el-switch
                    style="display: block"
                    v-model="switchVal"
                    active-color="#0295ff"
                    inactive-color="#b6b6b6">
                </el-switch>
            </div>
        </div>
    </div>
    <div class="amap-info-sharp">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infoWindow: null,
      visible:false,
      irrigateModel:"1",
      switchVal:true,

      currEquip: {
        device_type_id:null,
        device_id:null,
        device_name:null,
        city:null,
        addtime:0,
      }
    };
  },
  methods: {
    initialize(e) {
      this.visible = e.visible;
      this.currEquip = e.currEquip;
      this.infoWindow = e.infoWindow;
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
  },
  mounted(){
    let infoWindow = new AMap.InfoWindow({
        isCustom: true,
        content: '',
        offset: new AMap.Pixel(5, -11),
    });
    this.initialize({
        currEquip: {},
        visible: false,
        infoWindow: infoWindow,
    })
  }
};
</script>
 
<style  scoped lang="less">
.infoWindowBox{
    box-shadow: 0px 0px 4px 0px #0161ff;
    background: rgba(12,20,44,.80);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    .topNav{
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #0b9ac5a6;
        align-items: center;
        .title{
            font-size: 14px;
            color: #04d5e8;
            span{
                color: #fbc900;
            }
        }
        .record{
            color: #01d5ed;
            cursor: pointer;
            &:hover{
                text-decoration-line: underline;
            }
        }
    }
    .equipInfo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #0b9ac5a6;
        padding: 13px 0;
        .equipImg{
            img{
                border-radius: 10px;
            }
        }
        .equipState{
            flex: 1;
            margin-left: 15px;
            >div{
                line-height: 33px;
            }
            .title{
                color: #04d5e8;
            }
            .state{
                padding: 3px 70px 3px 8px;
                color: #333;
                background: rgba(255,255,255,.75);
                margin-left: 6px;
            }
        }
    }
    .equipCtrl{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        color: #92c2f3;
        /deep/.el-radio{
            color: #92c2f3;
        }
    }
}
.amap-info-sharp{
    bottom: 0;
    left: 50%;
    margin-left: -18px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(12, 20, 44, 0.8);
}
/* .amap-info-sharp {
  bottom: -8px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: 0;
}
#del-div {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: scale(1.2);
}

.equipInfoWindowTitle {
  border-bottom: 2px solid #35a478;
  line-height: 33px;
  margin-bottom: 5px;
}
.equipInfoWindow {
  color: #585858;
  font-size: 14px;
  line-height: 22px;
  span {
    color: #333;
  }
} */
</style>
