<template>
  <div class="hall">
    <cardList cardListTitle="候车大厅控制">
      <div slot="content">
        <div>
          <el-form :inline="true" :model="formData" label-width="100">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="模式选择：">
                  <div class="switch-warp" style="transform: translateY(7px)">
                    <div
                      :class="[isSaving == 1 ? 'on' : '']"
                      @click="handleSwitch(1)"
                    >
                      人工
                    </div>
                    <div
                      :class="[isSaving == 2 ? 'on' : '']"
                      @click="handleSwitch(2)"
                    >
                      节能
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-if="isSaving == 1">
                <el-form-item label="人工模式：">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleType(item.id)"
                    v-for="item in typeList"
                    :key="item.id"
                    :class="[
                      item.id == currentId && active ? 'isActive' : '',
                      item.icon
                    ]"
                  >
                    <!-- <img :src="item.src" alt="" /> -->
                    {{ item.name }}
                  </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="isSaving == 1">
                <el-form-item label="温度设定(℃)：">
                  <el-input
                    size="mini"
                    v-model="formData.temperature"
                    clearable=""
                  ></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="changeTemperature()"
                    >确定</el-button
                  >
                </el-form-item>

                <el-form-item label="定时功能启止时间：">
                  <el-time-select
                    size="mini"
                    placeholder="起始时间"
                    v-model="formData.startTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00'
                    }"
                  >
                  </el-time-select>
                  <span style="padding: 0 10px">至</span>
                  <el-time-select
                    size="mini"
                    placeholder="结束时间"
                    v-model="formData.endTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00',
                      minTime: formData.startTime
                    }"
                  >
                  </el-time-select>
                </el-form-item>
                <el-form-item>
                  <div class="switch-warp" style="transform: translateY(5px)">
                    <div
                      :class="[isOpen == 1 ? 'on' : '']"
                      @click="setSendTime(1)"
                    >
                      开
                    </div>
                    <div
                      :class="[isOpen == 2 ? 'on' : '']"
                      @click="setSendTime(2)"
                    >
                      关
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- tabs -->
        <div style="margin-bottom: 20px">
          <!-- <en-tabs :tabList="tabList"></en-tabs> -->
          <div>
            <el-tabs class="en-tabs" v-model="activeTab">
              <el-tab-pane
                :label="item.label"
                :name="item.id"
                v-for="(item, index) in tabList"
                :key="index"
              ></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <!-- table  -->
        <enTable
          :tableData="tableData"
          :tableColums="tableColums"
          :isShowOp="true"
          isShowPage="true"
        >
          <template v-slot:operation="scope">
            <el-button
              type="text"
              v-if="activeTab != 'c788ce98c1f248f590434394da485ce4'"
              @click="statusHandle"
              >开启</el-button
            >
            <el-button
              type="text"
              v-if="activeTab != 'c788ce98c1f248f590434394da485ce4'"
              @click="statusHandle"
              >关闭</el-button
            >
            <el-button
              type="text"
              @click="statusHandle"
              v-if="activeTab == 'b45827c068254695864ee3c1d42573cb'"
              >故障复位</el-button
            >
            <el-button
              type="text"
              @click="handleBtnClick(scope.scope.row)"
              v-if="
                activeTab == '303310efddb34a2e9bf269bdff8a7dc5' ||
                activeTab == 'f4c840711eae4bcb9536a890cdfda493'
              "
              >设置频率</el-button
            >
            <el-button
              type="text"
              @click="statusHandle"
              v-if="activeTab == 'c788ce98c1f248f590434394da485ce4'"
              >上升</el-button
            >
            <el-button
              type="text"
              @click="statusHandle"
              v-if="activeTab == 'c788ce98c1f248f590434394da485ce4'"
              >下降</el-button
            >
            <el-button
              type="text"
              @click="statusHandle"
              v-if="activeTab == 'c788ce98c1f248f590434394da485ce4'"
              >停止</el-button
            >
            <el-button
              type="text"
              @click="handleUpAndDownBtnClick"
              v-if="activeTab == 'c788ce98c1f248f590434394da485ce4'"
              >定时升降</el-button
            >
          </template>
        </enTable>
      </div>
    </cardList>
    <table-pagination
      :pageSize="pageSize"
      :totalSize="totalSize"
      @parentMethod="getDataList"
    ></table-pagination>
    <hall-modal ref="hallModal"></hall-modal>
    <set-up-and-down ref="setUpAndDown"></set-up-and-down>
  </div>
</template>
<script>
import cardList from '../../components/cardList'
import enTable from '../../components/enTable'
import enTabs from '../../components/enTabs'
import hallModal from './components/hallModal'
import tablePagination from '@/pages/components/tablePagination'
import setUpAndDown from './components/setUpAndDown.vue'

import {
  tableColumsOne,
  tableColumsTwo,
  tableColumsThree,
  tableColumsFour
} from './config'

export default {
  components: {
    cardList,
    enTable,
    enTabs,
    hallModal,
    tablePagination,
    setUpAndDown
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalSize: 0,
      active: false,
      typeList: [
        {
          id: 1,
          name: '供暖模式',
          src: require('../../home/image/nan_fan_icon.png'),
          icon: 'el-icon-sunny',
          status: null
        },
        {
          id: 2,
          name: '机械通风',
          src: require('../../home/image/fan_icon.png'),
          icon: 'iconfont icon-feng2',
          status: null
        },
        {
          id: 3,
          name: '自然通风',
          src: require('../../home/image/fan_icon.png'),
          icon: 'iconfont icon-feng',
          status: null
        }
      ],
      currentId: null,
      activeTab: 'b45827c068254695864ee3c1d42573cb', //tab默认选中
      tableData: [],
      tableColums: tableColumsOne,
      isSaving: 1, //节能
      isOpen: 2, //定时开关
      formData: {
        temperature: '',
        taskId: '',
        startTime: '',
        endTime: ''
      },
      tabList: [
        {
          value: '01',
          label: '风冷热泵机组',
          id: 'b45827c068254695864ee3c1d42573cb'
        },
        {
          value: '02',
          label: '室内机风柜',
          id: '303310efddb34a2e9bf269bdff8a7dc5'
        },
        {
          value: '03',
          label: ' 水泵',
          id: 'f4c840711eae4bcb9536a890cdfda493'
        },
        {
          id: 'c788ce98c1f248f590434394da485ce4',
          label: '电动门帘'
        },
        {
          id: '49f5921a6d7f43cfa222c09f0223ae04',
          label: '电动排烟窗'
        }
      ],
      hallModalVisible: false
    }
  },
  computed: {
    flrbList() {
      return this.$store.state.d2admin.paramsList.list.flrbList
    },
    sljfgList() {
      return this.$store.state.d2admin.paramsList.list.sljfgList
    },
    sbList() {
      return this.$store.state.d2admin.paramsList.list.sbList
    }
  },
  watch: {
    activeTab(val) {
      this.activeTab = val
      this.getDataList()
      switch (val) {
        case 'b45827c068254695864ee3c1d42573cb':
          this.tableColums = tableColumsOne
          break
        case '303310efddb34a2e9bf269bdff8a7dc5':
          this.tableColums = tableColumsTwo
          break
        case 'f4c840711eae4bcb9536a890cdfda493':
          this.tableColums = tableColumsThree
          break
        case 'c788ce98c1f248f590434394da485ce4':
          this.tableColums = tableColumsFour
          break
        case '49f5921a6d7f43cfa222c09f0223ae04':
          this.tableColums = tableColumsFour
          break
      }
    }
  },
  mounted() {
    this.getDataList()
    this.getAllHcdt()
  },
  methods: {
    // 获取数据列表
    getDataList(page, size) {
      this.$http({
        url: this.$http.adornUrl('/liResource/list'),
        method: 'post',
        data: {
          type: this.activeTab, //类型
          region: 1, //候车大厅
          page: page || this.pageIndex,
          size: size || this.pageSize
        }
      }).then((data) => {
        if (data && data.code === 0) {
          console.log('数据', data)
          this.tableData = data.page.rows
          this.setDataList()
          this.totalSize = data.page.total
        } else {
          this.dataList = []
          this.totalSize = 0
        }
      })
    },
    //修改列表数据
    setDataList() {
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].type === 'b45827c068254695864ee3c1d42573cb') {
          //风冷热泵机组
          this.flrbList.forEach((e) => {
            if (this.tableData[i].id === e.resource_id) {
              this.$set(this.tableData[i], 'feng_shui_mode', e.feng_shui_mode)
              this.$set(this.tableData[i], 'hot_water_mode', e.hot_water_mode)
              this.$set(
                this.tableData[i],
                'water_supply_temperature',
                e.water_supply_temperature
              )
              this.$set(
                this.tableData[i],
                'return_water_temperature',
                e.return_water_temperature
              )
              this.$set(
                this.tableData[i],
                'heating_start_temperature',
                e.heating_start_temperature
              )
              this.$set(
                this.tableData[i],
                'heating_stop_temperature',
                e.heating_stop_temperature
              )
              this.$set(
                this.tableData[i],
                'indoor_ambient_temperature',
                e.indoor_ambient_temperature
              )
              this.$set(
                this.tableData[i],
                'outlet_temperature',
                e.outlet_temperature
              )
              this.$set(
                this.tableData[i],
                'return_air_temperature',
                e.return_air_temperature
              )
              this.$set(
                this.tableData[i],
                'hot_air_start_temperature',
                e.hot_air_start_temperature
              )
              this.$set(
                this.tableData[i],
                'hot_air_stop_temperature',
                e.hot_air_stop_temperature
              )
              this.$set(this.tableData[i], 'electric_energy', e.electric_energy)
            }
          })
        } else if (
          this.tableData[i].type === '303310efddb34a2e9bf269bdff8a7dc5'
        ) {
          //室内机风柜
          this.sljfgList.forEach((e) => {
            if (this.tableData[i].id === e.resource_id) {
              this.$set(this.tableData[i], 'electric_energy', e.electric_energy)
              this.$set(
                this.tableData[i],
                'current_frequency',
                e.current_frequency
              )
            }
          })
        } else if (
          this.tableData[i].type === 'f4c840711eae4bcb9536a890cdfda493'
        ) {
          //水泵
          this.sbList.forEach((e) => {
            if (this.tableData[i].id === e.resource_id) {
              this.$set(
                this.tableData[i],
                'current_frequency',
                e.current_frequency
              )
            }
          })
        } else if (
          this.tableData[i].type === 'c788ce98c1f248f590434394da485ce4'
        ) {
          //电动门帘
        } else if (
          this.tableData[i].type === '49f5921a6d7f43cfa222c09f0223ae04'
        ) {
          //电动排烟窗
        }
      }
    },
    getAllHcdt() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/equipment/getAllHcdt'),
        method: 'get'
      }).then((data) => {
        if (data && data.code === 0) {
          // console.log('首页：', data)
          this.isSaving = data.sysSystemParams.type
          if (data.sysSystemParams.sun === 1) {
            this.currentId = 1
            this.active = true
          } else if (data.sysSystemParams.fan === 1) {
            this.currentId = 2
            this.active = true
          } else if (data.sysSystemParams.nan === 1) {
            this.currentId = 3
            this.active = true
          } else {
            this.currentId = null
            this.active = false
          }
          this.formData.temperature = data.sysSystemParams.temperature
          if (data.timedTask) {
            this.formData.taskId = data.timedTask.id
            this.formData.startTime = data.timedTask.startTime
            this.formData.endTime = data.timedTask.endTime
            this.isOpen = data.timedTask.status
          }
        }
      })
    },
    // 设置频率
    handleBtnClick(data) {
      this.$nextTick(() => {
        this.$refs.hallModal.init(data)
      })
    },
    // 定时升降
    handleUpAndDownBtnClick(data) {
      this.$nextTick(() => {
        this.$refs.setUpAndDown.init()
      })
    },
    handleType(id) {
      if (id !== this.currentId) {
        this.active = true
      } else {
        this.active = !this.active
      }

      console.log('id:', id)
      this.$http({
        url: this.$http.adornUrl('/equipment/checkModel'),
        method: 'post',
        params: this.$http.adornParams({
          type: id,
          status: this.active === true ? 1 : 2
        })
      }).then((data) => {
        if (data && data.code === 0) {
          if (id === 1) {
            if (this.active === true) {
              this.$message.success('供暖模式开启成功')
            } else {
              this.$message.success('供暖模式关闭成功')
            }
          } else if (id === 2) {
            if (this.active === true) {
              this.$message.success('机械通风模式开启成功')
            } else {
              this.$message.success('机械通风模式关闭成功')
            }
          } else if (id === 3) {
            if (this.active === true) {
              this.$message.success('自然通风模式开启成功')
            } else {
              this.$message.success('自然通风模式关闭成功')
            }
          }
          this.currentId = id
        }
      })
    },
    statusHandle() {},
    // 人工节能
    handleSwitch(state) {
      this.isSaving = state
      this.$http({
        url: this.$http.adornUrl('/equipment/changeType'),
        method: 'get',
        params: this.$http.adornParams({
          type: state
        })
      }).then((data) => {
        if (data && data.code === 0) {
          if (state === 1) {
            this.$message.success('切换人工模式成功')
          } else if (state === 2) {
            this.$message.success('切换节能模式成功')
          }
          this.getAllHcdt()
        }
      })
    },
    // 设置定时任务
    setSendTime(type) {
      if (!this.formData.startTime || !this.formData.endTime) {
        this.$message.error('定时功能启止时间不能为空！')
        return
      }
      this.$http({
        url: this.$http.adornUrl('/equipment/timedTask'),
        method: 'post',
        params: this.$http.adornParams({
          taskId: this.formData.taskId ? this.formData.taskId : '',
          startTime: this.formData.startTime,
          endTime: this.formData.endTime,
          businessType: 1,
          status: type
        })
      }).then((data) => {
        if (data && data.code === 0) {
          if (type === 1) {
            this.$message.success('开启定时任务成功')
          } else {
            this.$message.success('关闭定时任务成功')
          }
          this.isOpen = type
          this.getAllHcdt()
        }
      })
    },
    changeTemperature() {
      if (!this.formData.temperature) {
        this.$message.error('温度不能为空！')
        return
      }
      this.$http({
        url: this.$http.adornUrl('/equipment/changeTemperature'),
        method: 'post',
        params: this.$http.adornParams({
          temperature: this.formData.temperature
        })
      }).then((data) => {
        if (data && data.code === 0) {
          this.$message.success('温度设定成功')
          this.getAllHcdt()
        }
      })
    }
  }
}
</script>
<style lang="scss">
.hall {
  height: 100%;
  // .el-input__inner {
  //   height: 30px;
  // }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-form-item__label {
    padding: 0;
  }
  .btn-group {
    img {
      width: 10px;
      height: 9px;
    }
  }
}

.switch-warp {
  width: 93px;
  height: 26px;
  font-size: 12px;
  line-height: 25px;
  overflow: hidden;
  border-radius: 13px;
  background: #d3d3d3;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
    0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  div {
    width: 45px;
    height: 24px;
    line-height: 24px;
    float: left;
    text-align: center;
    cursor: pointer;
  }
  div.on {
    background: #4cb527;
    color: #fff;
    border-radius: 13px;
    border: 1px solid rgba(23, 41, 71, 0.02);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
      0px 2px 0px 0px rgba(255, 255, 255, 0.15);
  }
}
.isActive {
  background: #4cb527 !important;
  border: 1px solid transparent;
}
</style>