<template>
  <div class="app-container">
    <!-- <div class="container"> -->
    <el-row :gutter="20">
      <el-col :span="12" :gutter="20">
        <div class="info">
          <div class="title">报警信息</div>
          <el-form :model="form" :rules="rules" ref="form" label-width="120px">
            <el-form-item label="报警类型" prop="alarmType">
              <el-input v-model="form.alarmType"></el-input>
            </el-form-item>
            <el-form-item label="高限阈值(W)" prop="alarmHighThreshold">
              <el-input v-model="form.alarmHighThreshold"></el-input>
            </el-form-item>
            <el-form-item label="是否开启" prop="alarmStatus">
              <!-- <el-input v-model="form.grade"></el-input> -->
              <el-switch v-model="form.alarmStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
              <el-input type="textarea" v-model="form.remark" maxlength="300" rows='6' show-word-limit></el-input>
            </el-form-item>

          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info">
          <!-- <div class="title">报警信息</div> -->
          <div class="topHeader">
            <div class="topHeader-title">关联设备 <span v-if="relatedEquipment != 0">( {{relatedEquipment}} )</span> </div>
            <div class="topHeader-btns">
              <el-button @click="clear">清空已选</el-button>
              <el-button type="primary" @click="related">关联设备</el-button>
            </div>
          </div>
          <div class="equipments" v-if="cities.length !==0 ">
            <div class="relatedEquipment" v-for="city in list" :label="city" :key="city.index">
              <el-row>
                <el-col :span="24">
                  <el-card class="box-card" shadow="hover">
                    <!-- <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div> -->
                    <div class="card-title">
                      <span class="card-title-text">通风窗设备</span>
                      <span class="card-title-number">001</span>
                    </div>
                    <div class="card-content">
                      <span>标签管理：{{ city.label }}</span>
                      <span>所属仓房：{{ city.barn}}</span>
                      <span>所属建筑位置{{ city.position }}</span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>

        </div>
      </el-col>
    </el-row>
    <!-- </div> -->
    <el-footer style="height: 41px;">
      <el-button type="primary" class="footerBtn" @click="back">返回</el-button>
    </el-footer>
    <el-drawer title="关联设备" :visible.sync="drawer" direction="rtl">
      <!-- <span>我来啦!</span> -->
      <div class="drawer-header">
        <el-input v-model="equipmentClassificationName" placeholder="请输入设备分类名称搜索"></el-input>
        <el-button type="primary" @click="related">搜索</el-button>
      </div>
      <div class="drawer-list">

        <el-checkbox-group v-model="checkedCities">
          <el-checkbox v-for="city in cities" :label="city" :key="city.index">
            <!-- {{city}} -->
            <el-row>
              <el-col :span="24">
                <el-card class="box-card">
                  <!-- <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div> -->
                  <div class="card-title">
                    <span class="card-title-text">通风窗设备</span>
                    <span class="card-title-number">001</span>
                  </div>
                  <div class="card-content">
                    <span>标签管理：{{ city.label }}</span>
                    <span>所属仓房：{{ city.barn}}</span>
                    <span>所属建筑位置{{ city.position }}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-checkbox>

        </el-checkbox-group>
      </div>
      <div class="drawer-footer">
        <div>共 <span>{{ relatedEquipments }}</span> 项</div>
        <el-button type="primary" @click="addCorrelation">添加关联</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getNowFormatDate, } from '@/utils/index'
export default {
  data () {
    return {
      relatedEquipment: '3',// 关联设备数量
      relatedEquipments: "6",// 抽屉数据列表数量-添加关联
      drawer: false,
      equipmentClassificationName: '', //设备分类名称
      form: {
        orgCode: JSON.parse(localStorage.getItem("userInfo")).orgCode,
        id: '',
        alarmType: '虫情报警',
        alarmHighThreshold: '60',
        alarmInsectType: 1,
        alarmStatus: true, // 状态(0：关闭，1：开启)
        remark: '13',
        alarmCount: '',
        createTime: getNowFormatDate(),
        // createUserid: "",
        // deleteTime: null,
        // deleteUserid: "",
        // houseCode: "",
        orderBy: 0,
        // updateUserid: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      list: [
        {
          name: 'P001', equipName: '1号仓粮情设备', number: '0', layer: '4', row: '5', col: '9'
        },
      ],

      checkAll: false,
      checkedCities: [],
      cities: [
        {
          index: 1, titleNo: 'P001', equipName: '通风窗设备', label: '2022年3月16日', barn: '202102030002', position: '东区',
        },

      ],
      isIndeterminate: true
    }
  },
  created () {

  },
  mounted () {
    this.form = this.$route.params.data
    console.log(this.$route.params.data, 'this.$route.params.data')
  },
  methods: {
    related () {
      this.drawer = true
    },
    clear () {
      this.cities = []
    },
    back () {
      this.$router.push({ name: "EnergyAlarm" })
    },
    addCorrelation () {

    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
}
</script>
<style lang='scss' scoped>
.app-container {
  height: 100%;
  position: relative;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }

  .el-footer {
    text-align: center;
    background-color: #fff;
    width: 98%;
    // height: 41px;
    // line-height: 41px;
    // background: #e5e5e7;
    color: #888;
    font-weight: 500;
    font-family: Source Han Sans CN;
    font-size: 14px;
    text-align: center;
    position: absolute;
    bottom: 30px;
    // z-index: 9999;
    .footerBtn {
      width: 300px;
      border-radius: 20px;
    }
  }
}
.info {
  height: 100%;
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  position: relative;
  .title {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .topHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // position: absolute;
  }
  .equipments {
    height: calc(100% - 80px);
    overflow-y: auto;
    padding: 5px;
    margin-top: 10px;
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    &::-webkit-scrollbar {
      width: 6px;
      // width: 10px;
      // height: 0;
      // background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: #424242;

      border-radius: 20px;
    }
    .relatedEquipment {
      width: 100%;
      // background-color: #fff;
      // background-color: #ccc;
      // margin-bottom: 10px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;

      .box-card {
        margin-bottom: 15px;
        background-color: #f9f9f9;
        .card-title {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          border-bottom: 1px solid #ccc;
          span {
            padding: 10px;
          }
        }
        .card-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-top: 20px;
          span {
            padding: 10px 0;
          }
        }
      }
    }
  }
  .title1 {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .title-right {
      color: #ccc;
      font-size: 12px;
    }
  }
  .el-form {
    margin-top: 15px;
    padding-top: 10px;
    padding: 0 20px 0 10px;
    .el-switch {
      float: right;
    }
  }
}
::v-deep .el-drawer {
  .drawer-header {
    // width: 92%;
    display: flex;
    justify-content: center;
    .el-input {
      width: 70%;
    }
  }
  .drawer-list {
    height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 5px;
    margin-top: 10px;
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #424242;

      border-radius: 20px;
    }
    // .el-c
    .el-checkbox-group {
      .el-checkbox {
        display: flex;
        align-items: center;
        margin-right: 0;
        .el-checkbox__label {
          width: 100%;
        }
        .el-checkbox__inner {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          // 中间的 “✔” 的位置调整
          &::after {
            height: 14px;
            width: 5px;
            left: 9px;
            top: 2px;
          }
          &:hover {
            border-color: #4a62e7;
          }
        }

        .box-card {
          margin-bottom: 15px;
          background-color: #f9f9f9;
          .card-title {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            border-bottom: 1px solid #ccc;
          }
          .card-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-top: 20px;
          }
        }
      }
    }
  }
  .drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
  }
}
// ::v-deep .el-input__inner {
//   text-align: center;
// }
::v-deep .el-drawer__header {
  text-align: center;
}
</style>
