<template>
  <div class="app-container home">
    <el-button type="primary" :icon="Download">策略导入</el-button>
    <div class="dev_control_wrapper">
      <div class="dev_control_item">
        <div class="item_header">
          <span>电热锅炉</span>
          <el-switch v-model="value1" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_img">
            <img src="./src/assets/images/dcgl.png" alt="">
          </div>
          <div class="item_bottom_form">
            <el-form :model="form1">
              <el-form-item label="当前状态："><span class="green">开启</span></el-form-item>
              <el-form-item label="进水温度："><el-input v-model="form1.enter" /></el-form-item>
              <el-form-item label="出水温度："><el-input v-model="form1.leave" /></el-form-item>
              <div class="submit" @click="onSubmit1">确定</div>
            </el-form>
          </div>
        </div>
      </div>
      <div class="dev_control_item">
        <div class="item_header">
          <span>空气源热泵</span>
          <el-switch v-model="value2" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_img">
            <img src="./src/assets/images/空气源热泵.png" alt="">
          </div>
          <div class="item_bottom_form">
            <el-form :model="form2">
              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
              <el-form-item label="进水温度："><el-input v-model="form2.enter" /></el-form-item>
              <el-form-item label="出水温度："><el-input v-model="form2.leave" /></el-form-item>
              <div class="submit" @click="onSubmit2">确定</div>
            </el-form>
          </div>
        </div>
      </div>
      <div class="dev_control_item">
        <div class="item_header">
          <span>发热电缆</span>
          <el-switch v-model="value3" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_img">
            <img src="./src/assets/images/发热电缆.png" alt="">
          </div>
          <div class="item_bottom_form">
            <el-form :model="form3">
              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
              <el-form-item label="当前温度："><el-input v-model="form3.now" /></el-form-item>
              <div class="submit" @click="onSubmit3">确定</div>
            </el-form>
          </div>
        </div>
      </div>
      <div class="dev_control_item">
        <div class="item_header">
          <span>风机盘管</span>
          <el-switch v-model="value4" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_img">
            <img src="./src/assets/images/风机盘管.png" alt="">
          </div>
          <div class="item_bottom_form">
            <el-form>
              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="dev_control_item">
        <div class="item_header">
          <span>水泵</span>
          <el-switch v-model="value5" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_img">
            <img src="./src/assets/images/水泵.png" alt="">
          </div>
          <div class="item_bottom_form">
            <el-form>
              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="dev_control_item">
        <div class="item_header">
          <span>蓄热锅炉</span>
          <el-switch v-model="value6" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_img">
            <img src="./src/assets/images/蓄热锅炉.png" alt="">
          </div>
          <div class="item_bottom_form">
            <el-form>
              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="dev_control_item">
        <div class="item_header">
          <span>沙盘</span>
          <el-switch v-model="value7" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
        </div>
        <div class="item_bottom">
          <div class="item_bottom_img">
            <img src="./src/assets/images/沙盘.png" alt="">
          </div>
          <div class="item_bottom_form">
            <el-form>
              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="dev_control_table">
      <div class="control_header"><span>调控日志</span></div>
      <div class="control_table">
        <el-table v-loading="loading" :data="controlList" @selection-change="handleSelectionChange">
          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[3].visible" width="120" />
          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[4].visible" width="160">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { Share,Download } from '@element-plus/icons-vue'  //element字体图标
import { ref,reactive } from 'vue'


const value1 = ref(true)
const value2 = ref(false)
const value3 = ref(false)
const value4 = ref(false)
const value5 = ref(false)
const value6 = ref(false)
const value7 = ref(false)
const form1 = reactive({
  enter:'',
  leave:'',
})
const form2 = reactive({
  enter:'',
  leave:'',
})
const form3 = reactive({
  now:'',
})

const onSubmit1 = () => {
  console.log('确定')
}
const onSubmit2 = () => {
  console.log('确定')
}
const onSubmit3 = () => {
  console.log('确定')
}




</script>

<style scoped lang="scss">
.home {
  height: calc(100vh - 118px);
  .dev_control_wrapper{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: 50%;
    overflow-y: auto;
    .dev_control_item{
      width: 24.46%;
      height: 47%;
      margin-right: 12px;
      margin-bottom: 12px;
      background-color: #2F3D8A;
      overflow: hidden;
      &:nth-child(4n){
        margin-right: 0px;
      }

      .item_header{
        width: 100%;
        height: 20%;
        background-color: #374590;
        padding: 0 10px;
        span{
          font-size: 16px;
          font-weight: bold;
          line-height: 37px;
        }
        .switch{
          float: right;
          line-height: 37px;
          height: 37px;
        }
      }
      .item_bottom{
        display: flex;
        width: 100%;
        height: 80%;
        .item_bottom_img{
          width: 40%;
          height: 100%;
          //border: 1px solid red;
          padding: 10px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .item_bottom_form{
          width: 60%;
          height: 100%;
          //border: 1px solid red;
          padding: 0 10px 0 0;
          .green{
            color: #00ff07;
          }
          .red{
            color: #ff0000;
          }
          .submit{
            padding: 3px 15px;
            border-radius: 2px;
            background-color: #2F8EED;
            float: right;
            margin-top: 8px;
            cursor: pointer;
            &:hover{
              background-color: #5ba2f3;
            }
          }
        }
      }
    }
  }
  .dev_control_table{
    width: 100%;
    height: 50%;
    background-color: #2F3D8A;
    .control_header{
      width: 100%;
      height: 10%;
      background-color: #374590;
      padding: 0 10px;
      span{
        font-size: 16px;
        font-weight: bold;
        line-height: 37px;
      }
    }
    .control_table{
      width: 100%;
      height: 90%;
      border: 1px solid red;
    }
  }
}

::v-deep .el-button{
  border-radius: 2px;
  margin-bottom: 12px;
}
::v-deep .el-switch__core .el-switch__action{
  top: 1px;
  width: 17px;
  height: 17px;
}
::v-deep .el-form-item--default{
  margin-bottom: 3px;
}
::v-deep .el-input__inner{
  color: #f3ffff;
}
</style>

