<template>
  <div class="panel monitor">
    <div class="panel-tit">
      视频监控 <img class="setting" src="@/assets/setting.png" alt="" @click="showModal=true" />
    </div>
    <ul class="monitor-list">
      <li>
        <img src="@/assets/monitor.png" alt="" />
        <p class="monitor-tit">摄像头1</p>
      </li>
      <li>
        <img src="@/assets/monitor.png" alt="" />
        <p class="monitor-tit">摄像头2</p>
      </li>
      <li>
        <img src="@/assets/monitor.png" alt="" />
        <p class="monitor-tit">摄像头3</p>
      </li>
      <li>
        <img src="@/assets/monitor.png" alt="" />
        <p class="monitor-tit">摄像头4</p>
      </li>
      <li>
        <img src="@/assets/monitor.png" alt="" />
        <p class="monitor-tit">摄像头5</p>
      </li>
      <li>
        <img src="@/assets/monitor.png" alt="" />
        <p class="monitor-tit">摄像头6</p>
      </li>
    </ul>
    <div class="panel-footer"></div>

    <div class="panel monitor-setting"  v-if="showModal">
      <div class="panel-tit">
        画面配置<img class="close" src="@/assets/close.png" alt="" @click="showModal=false"/>
      </div>
      <div class="monitor-option">
        <el-form ref="form" :model="form" label-width="12rem">
          <el-form-item label="画面一：">
            <el-select v-model="form.region" placeholder="">
              <el-option label="画面一" value="shanghai"></el-option>
              <el-option label="画面二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="画面二：">
            <el-select v-model="form.region2" placeholder="">
              <el-option label="画面一" value="shanghai2"></el-option>
              <el-option label="画面二" value="beijing2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="画面三：">
            <el-select v-model="form.region3" placeholder="">
              <el-option label="画面一" value="shanghai3"></el-option>
              <el-option label="画面二" value="beijing4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="画面四：">
            <el-select v-model="form.region4" placeholder="">
              <el-option label="画面一" value="shanghai4"></el-option>
              <el-option label="画面二" value="beijing3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="画面五：">
            <el-select v-model="form.region5" placeholder="">
              <el-option label="画面一" value="shanghai5"></el-option>
              <el-option label="画面二" value="beijing5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="画面六：">
            <el-select v-model="form.region6" placeholder="">
              <el-option label="画面一" value="shangha6"></el-option>
              <el-option label="画面二" value="beijing6"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="showModal=false">取消</el-button>
            <el-button type="primary"  @click="showModal=false">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "monitor",
  data() {
    return {

      showModal: true,
      form: {
        name: "",
        region: "",
        region2: "",
        region3: "",
        region4: "",
        region5: "",
        region6: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style lang="scss" scoped>
//视频监控
.panel.monitor {
  margin-top:2rem;
  z-index: 3;
  .panel-tit {
    position: relative;
  }
}
.monitor-list {
  padding: 1.2rem;
  overflow: hidden;
}
.monitor-list li {
  width: 50%;
  position: relative;
  display: block;
  float: left;
}
.monitor-list li img {
  width: 100%;
 
  display: block;

}
.monitor-tit {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  font-size: 1.2rem;
  line-height: 3rem;
  text-indent: 1rem;
  // display:none;

  background: rgba(0, 0, 0, 0.7);
}

.setting,
.close {
  position: absolute;
  width: 2rem;
  right: 1.5rem;
  top: 1.3rem;
  cursor:pointer
}
.close{
   width: 1.7rem;
   cursor:pointer

}

.monitor-setting {
  position: absolute;
  left: 105%;
  width: 100%;
  top: 0;
  margin: 0 auto;
  text-align: center;
  .monitor-option {
    padding: 2rem 4rem 2rem 4rem;
  }
}
</style>
<style lang="scss">
.monitor-setting .el-form-item__label {
  font-size: 1.6rem;
  color: #fff;
  line-height: 3.4rem;
}
.monitor-setting .el-form-item__content {
  line-height: 3.4rem;
}
.monitor-setting .el-form-item {
  margin-bottom: 1.6rem;
}
.monitor-setting .el-input__inner {
  height: 3.4rem;
  line-height: 3.4rem;

  border-radius: 0;
  font-size: 1.4rem;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #3486da;
}
.monitor-setting .el-input__icon {
  line-height: 2.4rem;
}
.monitor-setting .el-button {
  border-radius: 0;
  font-size: 1.6rem;
  padding: 1rem 2.3rem;
  margin-top: 3rem;
}
.monitor-setting .el-select .el-input .el-select__caret {
  color: #3486da;
  font-size: 1.6rem;
}
.monitor-setting .el-select:hover .el-input__inner {
  border: 1px solid #3486da;
  opacity: 0.7;
}
</style>