<template>
  <div v-show="visible">
    <div class="infoWindowBox">
        <div class="topNav">
            <div class="title">施肥机1215488888 <span>【在线】</span></div>
            <div class="record">操作记录>></div>
        </div>
        <div v-if="show" class="equipInfo">
          <div>
            <div class="states">
              <div class="item" v-for="item in 4" :key="item" >
                <div class="imgIcon">
                  <img src="../../../../../static/images/irrigate/sb/1.png" alt="">
                </div>
                <div class="itemVal">
                  <div class="val">6438</div>
                  <div class="name">电导率(EC)</div>
                </div>
              </div>
            </div>
            <div class="regulation">
              <span class="title">采集时间：</span>
              <span class="val">2020-12-25 12:45:30</span>
              <i class="el-icon-refresh"></i>
            </div>
          </div>
          
            
        </div>
        <div v-if="!show" class="equipInfo">
            <div>
              <div class="ekSwitch" v-for="item in 3" :key="item">
                <div>
                  <span class="imgIcon">
                    <img src="../../../../../static/images/irrigate/sf/sfBase.png" alt="">
                  </span>
                  <span class="name">注肥通道开关{{item}}</span>
                  <span class="state">【在线】</span>
                </div>
                <div>
                  <el-switch
                      style="display: block"
                      v-model="switchVal"
                      active-color="#0295ff"
                      inactive-color="#b6b6b6">
                  </el-switch>
                </div>
              </div>
            </div>
            
        </div>
        <div class="equipCtrl">
            <div>
                <el-button size="mini" :class="[show?'active':'']" @click="switchShow(1)">设备参数</el-button>
                <el-button size="mini" :class="[show?'':'active']" @click="switchShow(0)" >施肥控制</el-button> 
            </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,
      show:true,
      form:{
        val:1
      },
      options: [{
        value: '选项1',
        label: '液位'
      }, {
        value: '选项2',
        label: '累计流量'
      }],

      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();
    },
    switchShow(falg){
      this.show = falg
    }
  },
  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{
      border-bottom: 1px solid #0b9ac5a6;
      .states{
        padding: 13px 0 0;
        display: flex;
        flex-wrap: wrap;
        .item{
          width: 50%;
          display: flex;
          // justify-content: space-around;
          align-items: center;
          margin-bottom: 10px;
          .itemVal{
            margin-left: 10px;
          }
          .val{
            font-size: 16px;
            background-image: -webkit-linear-gradient(bottom,#069dff,#09fdff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
          }
          .name{
            color: #92c2f3;
          }
        }
      }
      .regulation{
          color: #92c2f3;
          text-align: center;
          margin-bottom: 5px;
          
      }
      // 施肥控制
      .ekSwitch{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        border: 1px solid #01abff;
        padding: 5px 3px;
        align-items: center;
        border-radius: 6px;
        .imgIcon{
          border-right: 1px solid #5c7481;
          padding-right: 6px;
          margin-right: 4px;
          img{
            vertical-align: middle;
          }
        }
        .name{
          color: #92c2f3;
        }
        .state{
          color: #fbc900;
        }
        &:last-child{
          margin-bottom: 10px;
        }
      }
    }
    .equipCtrl{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        color: #92c2f3;
        button{
          color: #0295ff;
          background: transparent;
          border: 1px solid #0295ff;
        }
        button.active{
          color: #0aacbe;
          background: #0aacbe00;
          border: 1px solid #0aacbe;
        }
    }
}
.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);
}
/deep/.el-slider__bar {
    background-color: #0295ff;
}
/deep/.el-slider__button {
    border: solid 2px #0295ff;
}
</style>
