<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="设备名称">
            <el-select v-model="queryParams.devName" placeholder="请选择设备" @change="handleDevChange">
              <el-option label="所有" value="0" />
              <el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
            </el-select>
          </el-form-item>
<!--          <el-form-item label="状态" prop="status">-->
<!--            <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 240px" @change="handleStatusChangeFun">-->
<!--              <el-option label="所有" value="" />-->
<!--              <el-option label="开启" value="1" />-->
<!--              <el-option label="停止" value="0" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="创建日期" style="width: 308px;">
            <el-date-picker v-model="queryParams.dateRange"
                            value-format="YYYY-MM-DD"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item class="mr30">
            <el-button class="mybtn" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button class="mybtn" icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>
          <div class="dev_control_table">
            <el-table :data="timingList" height="685px">
              <el-table-column label="序号" type="index" width="60" :index="indexMethod1"></el-table-column>
              <el-table-column label="设备名称" align="center" prop="deviceName"/>
              <el-table-column label="任务描述" align="center" prop="controlContext"/>
<!--              <el-table-column label="状态" align="center">-->
<!--                <template v-slot="scope">-->
<!--&lt;!&ndash;                  <el-tag class="ml-2" :type="timerStatus">暂停</el-tag>&ndash;&gt;-->
<!--                  <el-tag class="ml-2" effect="dark" :type="scope.row.timerStatus == 0 ? 'info':'success'" disable-transitions>{{ scope.row.timerStatus == 0 ? '停止' : '开启' }}</el-tag>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column label="执行日期" align="center" prop="runday"/>
              <el-table-column label="执行时间" align="center" prop="runtime"/>
              <el-table-column label="创建者" align="center" prop="createBy"/>
              <el-table-column label="创建时间" align="center" prop="createTime"/>
              <el-table-column label="操作" align="center" prop="handle">
                <template v-slot="scope">
<!--                  <el-button size="small" :type="scope.row.timerStatus == 0 ? 'success':''" @click="getUpDateStatusFun(scope)">{{ scope.row.timerStatus == 0 ? '开启' : '停止' }}</el-button>-->
                  <el-button type="danger" size="small" :icon="Delete" @click="getDeleteTimerFun(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 50]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
          </div>
      </el-col>
    </el-row>



    <!-- 新增对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="timingForm"  ref="userRef" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备名称">
              <el-select v-model="timingForm.dev" placeholder="请选择设备" @change="handleDevChange">
                <el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务描述" prop="content">
              <el-input disabled v-model="timingForm.controlContext" placeholder="请输入任务描述"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="控制指令" prop="code">
              <el-radio-group v-model="timingForm.checkedRadio" @change="checkedRadio" style="display: flex; flex-wrap: wrap;">
                <div style="display: flex; margin-bottom: 10px; width: 100%">
                  <el-radio label="启" border/>
                  <el-radio label="停" border/>
                </div>
<!--                <div class="tempRadioBox">-->
<!--                  <div class="tempRadio">-->
<!--                    <el-radio v-model="timingForm.checkedRadio" class="radio" label="进水温度" border @change="radioChange"/>-->
<!--                    <el-input v-model="timingForm.inTemp" class="input"/>-->
<!--                  </div>-->
<!--                  <div class="tempRadio">-->
<!--                    <el-radio v-model="timingForm.checkedRadio" class="radio" label="出水温度" border @change="radioChange"/>-->
<!--                    <el-input v-model="timingForm.outTemp" class="input"/>-->
<!--                  </div>-->
<!--                  <div class="tempRadio">-->
<!--                    <el-radio v-model="timingForm.checkedRadio" class="radio" label="温度" border @change="radioChange"/>-->
<!--                    <el-input v-model="timingForm.temp" class="input"/>-->
<!--                  </div>-->
<!--                </div>-->
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="执行次数">
              <el-radio-group v-model="timingForm.day">
                <el-radio label="每天" @change="handleEveryday"/>
              </el-radio-group>
              <div class="collapse">
                <el-collapse v-model="activeName" accordion>
                  <el-collapse-item title="星期几" name="1">
                    <el-checkbox-group v-model="week" @change="handleCheckboxClick" >
                      <el-checkbox style='width:90px' label="2">星期一</el-checkbox>
                      <el-checkbox style='width:90px' label="3">星期二</el-checkbox>
                      <el-checkbox style='width:90px' label="4">星期三</el-checkbox>
                      <el-checkbox style='width:90px' label="5">星期四</el-checkbox>
                      <el-checkbox style='width:90px' label="6">星期五</el-checkbox>
                      <el-checkbox style='width:90px' label="7">星期六</el-checkbox>
                      <el-checkbox style='width:90px' label="8">星期日</el-checkbox>
                    </el-checkbox-group>
                  </el-collapse-item>

                  <el-collapse-item title="仅此一次" name="2">
                    <el-date-picker v-model="value1" type="date" placeholder="请选择日期"/>
                  </el-collapse-item>
                </el-collapse>
              </div>

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行时间" prop="executeTime">
              <el-time-picker v-model="timingForm.executeTime" placeholder="请选择执行时间" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import {Delete,SwitchButton} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {ref, reactive, watch, onMounted, watchEffect} from "vue";
import {getList, getAddTimer, getDeleteTimer, getUpDateStatus} from '@/api/control/timer'
import { getDevice,getControlDeviceList } from '@/api/control/manual'


/** 页面加载时*/
onMounted(()=>{
  formattedDateFun()
  getListFun()
  getAllDev()
})


/** 格式化日期*/
const YYYYMMDD = ref();
const timer = ref()
function formattedDateFun(){
  let date = new Date()
  let year = date.getFullYear()
  let month = (date.getMonth()+1).toString().padStart(2, '0');
  let day = date.getDate().toString().padStart(2, '0');
  let hours = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  YYYYMMDD.value = `${year}-${month}-${day}`
  timer.value = `${hours}:${minutes}:${seconds}`
  console.log(YYYYMMDD.value)
  console.log(timer.value)
}



/** 筛选处理 */
//选择的日期
// const dateRange = ref([]);
const startDate = ref()
const endDate = ref()
const data = reactive({
  queryParams: {
    devName:'0',
    status: '',
    dateRange:[],
  }
});
//监听开始日期和结束日期
const wacthSelectDate = watch(()=> data.queryParams.dateRange,(val) =>{
  console.log(val[0])
  startDate.value = val[0]
  console.log(val[1])
  endDate.value = val[1]
})
//拿到选择的状态val
const statusVal = ref()
function handleStatusChangeFun(val){
  console.log('状态id',val)
  statusVal.value = val
}
//搜索按钮
function handleQuery(){
  getListFun()
}
//重置按钮
function resetQuery(){
  data.queryParams.dateRange = [];
  currentPage.value = 1;
  pageSize.value = 20;
  startDate.value = null;
  endDate.value = null;
  devId.value = null;
  data.queryParams.devName = '0'
  statusVal.value = ''
  console.log('重置后的状态值为',statusVal.value)
  getListFun()
}


/** 数据表格处理 */
const timingList = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
//翻页时不刷新序号
function indexMethod1(index){
  return index+(currentPage.value-1)*pageSize.value+1
}
//获取表格信息
function getListFun(){
  getList({
    "timerId":null,
    "deviceId":devId.value,
    "controlContext":null,
    "timerStatus":statusVal.value,
    "createStart":startDate.value,
    "createEnd": endDate.value,
    "pageNum": currentPage.value,
    "pageSize": pageSize.value
  }).then((res)=>{
    total.value = res.total
    timingList.value = res.rows

    for(let i = 0;i < timingList.value.length;i++){
      if(timingList.value[i].runday.length != 10){ // 如果不是日期类型的
        let rundayArr = timingList.value[i].runday.split(','); // 将字符串拆成数组
        let rundayStr = '';
        for(let j = 0;j < rundayArr.length;j++){
          switch(rundayArr[j]){
            case '0':
              rundayStr = '每天';
              break;
            case '1':
              rundayStr += '星期一';
              break;
            case '2':
              rundayStr += '星期二';
              break;
            case '3':
              rundayStr += '星期三';
              break;
            case '4':
              rundayStr += '星期四';
              break;
            case '5':
              rundayStr += '星期五';
              break;
            case '6':
              rundayStr += '星期六';
              break;
            case '7':
              rundayStr += '星期日';
              break;
          }
          if(j < rundayArr.length - 1){
            rundayStr += ',';
          }
        }
        timingList.value[i].runday = rundayStr;
      }
    }
  })
}

const handleSizeChange = (val) => {
  console.log(`${val}`)
  getListFun()
}
const handleCurrentChange = (val) => {
  console.log(`${val}`)
  getListFun()
}

//开启停止按钮
// function getUpDateStatusFun(scope){
//   //scope.row.timerStatus取反，传入的值取反
//   scope.row.timerStatus = scope.row.timerStatus === 1 ? 0 : 1;
//   getUpDateStatus(scope.row.timerId,scope.row.timerStatus).then((res)=>{
//     console.log(res)
//     if(res.code == 200){
//       ElMessage({
//         type: 'success',
//         message: res.msg,
//       })
//       if(scope.row.timerStatus == 0){
//         scope.row.timerStatus = 1
//       }else{
//         scope.row.timerStatus = 0
//       }
//       getListFun()
//     }
//   })
// }
//删除定时任务

//删除任务
function getDeleteTimerFun(e){
  console.log(e)
  ElMessageBox.confirm(
    '确定要删除此条定时任务吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      getDeleteTimer(e.row.timerId).then((res)=>{
        if(res.code == 200){
          ElMessage({
            type: 'success',
            message: '删除成功！',
          })
          getListFun()
        }
      })
  }).catch(() => {})
}


/** 新增定时处理 */
const open = ref(false);
const title = ref();
const activeName = ref('1')
const value1 = ref('')
const devArr = ref([])
const selectDate = ref()
const timingForm = reactive({
  dev:'',
  controlContext:'设备启停',
  intemp:'',
  outtemp:'',
  checkedRadio:'',
  inTemp:'',
  outTemp:'',
  temp:'',
  day:'',
  executeTime:'',
})
//拿到选择的设备id
const devId = ref()
function handleDevChange(id){
  devId.value = id
  console.log('设备id：',devId.value)
}
//监听：输入的任务描述
const watchContent = watch(()=> timingForm.content,(val)=>{
  console.log(val)
})
//监听：选中的是哪个指令
const code = ref()
const codeValue = ref()
const watchCode = watch(()=> timingForm.checkedRadio,(val)=>{
  if(val == '启'){
    timingForm.inTemp = ''
    timingForm.outTemp = ''
    timingForm.temp = ''
    code.value = 'startandstop'
    codeValue.value = 1
  }
  if(val == '停'){
    timingForm.inTemp = ''
    timingForm.outTemp = ''
    timingForm.temp = ''
    code.value = 'startandstop'
    codeValue.value = 2
  }
  if(val == '进水温度'){
    timingForm.outTemp = ''
    timingForm.temp = ''
    code.value = 'inTemp'
  }
  if(val == '出水温度'){
    timingForm.inTemp = ''
    timingForm.temp = ''
    code.value = 'outTemp'
  }
  if(val == '温度'){
    timingForm.outTemp = ''
    timingForm.inTemp = ''
    code.value = 'temp'
  }
  console.log('控制指令：',code.value)
})

// //监听：输入的进水温度值
// const tempValue = ref()
// const watchInTempValue = watch(()=>timingForm.inTemp,(val)=>{
//   tempValue.value = val
//   console.log('进水温度',tempValue.value)
// })
// //监听：输入的出水温度值
// const watchOutTempValue = watch(()=>timingForm.outTemp,(val)=>{
//   tempValue.value = val
//   console.log('出水温度',tempValue.value)
// })
// //监听：输入的温度值
// const watchTempValue = watch(()=>timingForm.temp,(val)=>{
//   tempValue.value = val
//   console.log('温度',tempValue.value)
// })

//选中每天
function handleEveryday(val){
  value1.value = '';
  week.value = [];
  selectDate.value = 0
  console.log('选择每天：',selectDate.value)
}

//勾选的星期
const week = ref([])
function handleCheckboxClick() {
  if(week.value.length === 7){
      timingForm.day = '每天';
      selectDate.value = 0
    }else if(week.value.length < 7 && week.value.length > 0){
      timingForm.day = '';
      value1.value = '';
      let strNum = week.value.join(',')
      selectDate.value = strNum
    }
  console.log('选择星期：',selectDate.value)
}

//监听：选择仅此一次将每天和星期几清空
const watchValue1 = watch(()=> value1.value,(val) => {
  const date = new Date(val.toLocaleString());
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  selectDate.value = `${year}-${month}-${day}`;
  console.log('选择日期：',selectDate.value)
  if(value1.value != null){
    timingForm.day = '';
    week.value = [];
  }
})

//监听：选择的执行时间
const selectTimer = ref()
const watchTime = watch(()=> timingForm.executeTime, (val) => {
  let date = new Date(val)
  let hours = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  selectTimer.value = `${hours}:${minutes}:${seconds}`
  console.log('选择时间：',selectTimer.value)
})
//获取可控所有设备
function getAllDev(){
  getControlDeviceList().then((res)=>{
    devArr.value = res.data
  })
}
//新增按钮
function handleAdd() {
  open.value = true;
  title.value = "新增定时任务";
};
//确定新增
function submitForm() {
  open.value = false;
  getAddTimer({
    "deviceId":devId.value,
    "controlKey":code.value,
    "controlValue":codeValue.value,
    "status":null,
    "runday":selectDate.value,
    "runtime":selectTimer.value
  }).then((res)=>{
    if(res.code == 200){
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      devId.value = null;
      getListFun()
    }
  })
};
//取消新增
function cancel() {
  open.value = false;
};




const { queryParams } = toRefs(data);
</script>

<style scoped lang="scss">
.dev_control_table{
  position: relative;
  width: 100%;
  //min-height: 740px;
  background-color: #2F3D8A;
}
.mr30{
  margin-left: 100px;
  margin-top: -4px;
}
.collapse{
  margin-bottom: -1px;
}
  .tempInput{
    width: 20%;
    background-color: #ddd;
    border-radius: 4px;
  }
.tempRadioBox{
  display: flex;
  justify-content: space-between;
  width: 100%;
  .tempRadio{
    display: flex;
    margin-right: 20px;
    &:nth-child(3){
      margin-right: 0px;
    }
    .radio{
      margin-right: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      padding-right: 2px;
      border-right: 0px;
    }
    .input{
      width: 60px;
      height: 32px;
    }
  }
}
//::v-deep .el-input__wrapper{
//  border-top-left-radius: 0px;
//  border-bottom-left-radius: 0px;
//}
::v-deep .el-button{
  border-radius: 2px;
}
::v-deep .mb8{
  margin-bottom: 12px;
}
::v-deep .el-pagination{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
::v-deep .el-pagination__total{
  color: #f3ffff;
}
::v-deep .el-pagination__jump{
  color: #f3ffff;
}
::v-deep .el-pager{
  margin: 0 5px;
}
::v-deep .el-table .el-table__body-wrapper{
  background-color: #2F3D8A;
}
::v-deep .el-form-item__content{
  display: inline-block;
}
::v-deep .el-input__inner{
  //color: #f3ffff !important;
  color: #606266 !important;
}
::v-deep .el-date-editor .el-range-input{
  //color: #f3ffff;
  color: #606266 !important;
}
::v-deep .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default{
  background-color: rgba(47,61,138);
}

@media (max-width:960px) {
  .app-container{
    padding: 8px;
  }
  .dev_control_table{
    height: 540px !important;
  }
  .mb8{
    margin-bottom: 0px;
  }
  .mybtn{
    margin-bottom: 0px !important;
  }
  ::v-deep .el-button{
    margin-bottom: 8px;
    font-size: 12px;
  }
  ::v-deep .el-form-item--default .el-form-item__label{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }
  ::v-deep .el-form-item--default .el-form-item__content{
    line-height: 30px;
    font-size: 12px;
  }
  ::v-deep .el-form--inline .el-form-item{
    margin-right: 20px;
  }
}
</style>

