<template>
  <div v-show="visible">
    <div class="infoWindowBox">
        <div class="topNav">
            <div class="title">水泵1215488888 <span>【在线】</span></div>
            <div>2020-01-23 12:20:23</div>
            <div class="record">操作记录>></div>
        </div>
        <div v-if="show" class="equipInfo">
          <div>
            <div class="states">
              <div class="item" v-for="item in 6" :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">累计流量m³</div>
                </div>
              </div>
            </div>
            <div class="regulation">
              <span class="title">变频器调压：</span>
              <el-slider v-model="regulator" :max="40"></el-slider>
              <span class="val">{{regulator}}</span>
              
            </div>
          </div>
          
            
        </div>
        <div v-if="!show" class="equipInfo">
            <div>
              <div class="warn">
                <div>
                  <span>任务序号：</span>
                  <el-input
                      size="small"
                      placeholder="请输入"
                      suffix-icon="el-icon-search"
                      v-model="form.val">
                  </el-input>
                </div>
                <div>
                  <span>任务名称：</span>
                  <el-input
                      size="small"
                      placeholder="请输入名称"
                      suffix-icon="el-icon-search"
                      v-model="form.val">
                  </el-input>
                </div>
                <div>
                  <span>预警要素：</span>
                  <el-select size="small" v-model="form.val" placeholder="请选择预警要素">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <span>触发类型：</span>
                  <el-select size="small" v-model="form.val" placeholder="请选择预警要素">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <span>预警下线：</span>
                  <el-input
                      size="small"
                      placeholder="请输入预警下线"
                      suffix-icon="el-icon-search"
                      v-model="form.val">
                  </el-input>
                </div>
                <div>
                  <span>预警上线：</span>
                  <el-input
                      size="small"
                      placeholder="请输入预警上线"
                      suffix-icon="el-icon-search"
                      v-model="form.val">
                  </el-input>
                </div>

              </div>
              <div class="ctrlBtn">
                 <el-button size="mini" type="blueInfo">查看以往预警设置>></el-button>
                 <el-button size="mini" type="blueInfo">预警记录</el-button>
                 <el-button size="mini" type="blueInfo">保存</el-button>
                 <el-button size="mini" type="grayInfo">清除</el-button>

              </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,
      regulator:10,
      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: 400px;
    .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: 33.33333%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 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;
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          .el-slider{
            width: 74%;
          }
          .val{
            margin-left: 10px;
          }
      }
      // 预警设置
      .warn{
        display: flex;
        flex-wrap: wrap;
        color: #92c2f3;
        margin-top: 10px;
        >div{
          width: 50%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 10px;
          .el-input{
            width: 120px;
          }
          .el-select{
            width: 120px;
          }
          input{
            background: #ffffffb8;
            border-color: #ffffffb8;
          }
        }
      }
      .ctrlBtn{
        display: flex;
        justify-content: space-between;
        align-items: center;
        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>
