<template>
  <div class="tunnel-bgc">
    <div class="box-top">
      <div class="back-tunnel" @click="router.back(-1)">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
      <div class="tunnel-name">
        {{ tunnelName }}
      </div>
      <tunnel-title/>
    </div>
    <div class="device-content">
      <div class="device-box">
        <div class="box-left">
          <el-menu
              default-active="1"
              @select="handleChangeMenu"
          >
            <el-menu-item index="1">
              <span>风机</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span>风压</span>
            </el-menu-item>
            <el-menu-item index="3">
              <span>其他传感器</span>
            </el-menu-item>
            <!--            <el-menu-item index="4">-->
            <!--              <span>分流器</span>-->
            <!--            </el-menu-item>-->
          </el-menu>
        </div>
        <div class="box-right" v-if="changeIndex==1">
          <div class="device-title">
            <span>风机设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
              <el-input type="number" v-model="fanFrequency" @change="changeFan">
                <template #suffix>
                  <span>秒/次</span>
                </template>
              </el-input>
            </div>
          </div>
          <div class="device-table">
            <el-table stripe
                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
              <el-table-column prop="ratedPower" label="额定功率" align="center">
                <template #default="scope">
                  <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
              <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
              <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
              <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
<!--                <template #default="scope">-->
<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
<!--                             @change="changeFanData(scope.row)" class="serialNumber">-->
<!--                    <el-option-->
<!--                        v-for="item in serialNumberOptions"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column prop="state" label="状态" align="center" min-width="86">
                <template #default="scope">
                  <div class="switch">
                    <div
                        :class="{ active: scope.row.state }"
                        @click="scope.row.state = 1;changeFanData(scope.row)"
                    >
                      启用
                    </div>
                    <div
                        :class="{ active: ! scope.row.state }"
                        @click=" scope.row.state = 0;changeFanData(scope.row)"
                    >
                      停用
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="btns">
            <div class="cancel-btn" @click="router.back(-1)">
              取消
            </div>
            <div class="sure-btn" @click="editEquip">
              确定
            </div>
          </div>
        </div>
        <div class="box-right" v-if="changeIndex==2">
          <div class="device-title">
            <span>风压设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
              <el-input type="number" v-model="windFrequency" @change="changeWind">
                <template #suffix>
                  <span>秒/次</span>
                </template>
              </el-input>
            </div>
          </div>
          <div class="device-table">
            <el-table stripe
                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
              <el-table-column prop="offset" label="偏移量" align="center"/>
              <el-table-column prop="unit" label="单位" align="center">
                <template #default="scope">
                  <el-input placeholder="单位" v-model="scope.row.unit" @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="alarmValue" label="阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
                            @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="miniRange" label="最小范围" align="center">
                <template #default="scope">
                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
                            @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="maxRange" label="最大范围" align="center">
                <template #default="scope">
                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
                            @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
<!--                <template #default="scope">-->
<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
<!--                             @change="changeWindData(scope.row)" class="serialNumber">-->
<!--                    <el-option-->
<!--                        v-for="item in serialNumberOptions"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
                    <div
                        :class="{ active: scope.row.state }"
                        @click=" scope.row.state = 1;changeWindData(scope.row)"
                    >
                      启用
                    </div>
                    <div
                        :class="{ active: ! scope.row.state }"
                        @click=" scope.row.state =  0;changeWindData(scope.row)"
                    >
                      停用
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="btns">
            <div class="cancel-btn" @click="router.back(-1)">
              取消
            </div>
            <div class="sure-btn" @click="editEquip">
              确定
            </div>
          </div>
        </div>
        <div class="box-right" v-if="changeIndex==3">
          <div class="device-title">
            <span>其他传感器设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
              <el-input type="number" v-model="otherFrequency" @change="changeOther">
                <template #suffix>
                  <span>秒/次</span>
                </template>
              </el-input>
            </div>
          </div>
          <div class="device-table">
            <el-table stripe
                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
              <el-table-column prop="offset" label="偏移量" align="center"/>
              <el-table-column prop="unit" label="单位" align="center">
                <template #default="scope">
                  <el-input placeholder="单位" v-model="scope.row.unit" @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="alarmValue" label="阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
                            @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="miniRange" label="最小范围" align="center">
                <template #default="scope">
                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
                            @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="maxRange" label="最大范围" align="center">
                <template #default="scope">
                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
                            @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
<!--                <template #default="scope">-->
<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
<!--                             @change="changeOtherData(scope.row)" clearable class="serialNumber">-->
<!--                    <el-option-->
<!--                        v-for="item in serialNumberOptions"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
                    <div
                        :class="{ active: scope.row.state }"
                        @click=" scope.row.state = 1;changeOtherData(scope.row)"
                    >
                      启用
                    </div>
                    <div
                        :class="{ active: ! scope.row.state }"
                        @click=" scope.row.state =  0;changeOtherData(scope.row)"
                    >
                      停用
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="btns">
            <div class="cancel-btn" @click="router.back(-1)">
              取消
            </div>
            <div class="sure-btn" @click="editEquip">
              确定
            </div>
          </div>
        </div>
        <div class="box-right" v-if="changeIndex==4">
          <div class="device-title">
            <span>分流器设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
              <el-input type="number" v-model="fenFrequency">
                <template #suffix>
                  <span>秒/次</span>
                </template>
              </el-input>
            </div>
          </div>
          <div class="device-table">
            <el-table stripe
                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenLiuData">
              <el-table-column prop="name" label="设备名称" align="center"/>
              <el-table-column prop="offset" label="偏移量" align="center"/>
              <el-table-column prop="thresholdValue" label="阈值" align="center">
                <template #default="scope">
                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"
                            @change="changeFenData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch">
                    <div
                        :class="{ active: scope.row.state }"
                        @click=" scope.row.state = 1;changeFenData(scope.row)"
                    >
                      启用
                    </div>
                    <div
                        :class="{ active: ! scope.row.state }"
                        @click=" scope.row.state = 0;changeFenData(scope.row)"
                    >
                      停用
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="btns">
            <div class="cancel-btn" @click="router.back(-1)">
              取消
            </div>
            <div class="sure-btn" @click="handleEditFen">
              确定
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ElLoading, ElMessage} from "element-plus";
import {getEquipmentList, editEquipment, getTunnelDetail, getEquipmentSerialNumberOptions} from "@/api/tunnelManage";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {debounce} from 'lodash'

const router = useRouter()
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const userId = reactive(router.currentRoute.value.params.userId)
const type = reactive(router.currentRoute.value.params.type)
const fanFrequency = ref(0)
const windFrequency = ref(0)
const otherFrequency = ref(0)
const changeIndex = ref(1)
const fanData = ref([])
const editFanData = ref([])
const winData = ref([])
const editWinData = ref([])
const otherData = ref([])
const editOtherData = ref([])
const fenLiuData = ref([])
const editFenLiuData = ref([])
const frequencyData = ref([])
const serialNumberOptions = ref([])
const siteId = ref(0)
const tunnelName = ref('')
const getSerialNumberOptions = () => {
  console.log('tunnelId',tunnelId)
  getEquipmentSerialNumberOptions(tunnelId).then(res => {
    if (res.code === 1000) {
      serialNumberOptions.value = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
getSerialNumberOptions()
const changeFan = (e) => {
  // const fanObj = {
  //   acquisitionPeriod: e * 1000,
  //   tunnelId: tunnelId,
  //   typeKey: 'frequency'
  // }
  // frequencyData.value.push(fanObj)
}
const changeFanData = (row) => {
  // editFanData.value.push(row)
}
const changeWind = (e) => {
  // const windObj = {
  //   acquisitionPeriod: e * 1000,
  //   tunnelId: tunnelId,
  //   typeKey: 'windPressure'
  // }
  // frequencyData.value.push(windObj)
}
const changeWindData = (row) => {
  // editWinData.value.push(row)
}
const changeOther = (e) => {
  // const otherObj = {
  //   acquisitionPeriod: e * 1000,
  //   tunnelId: tunnelId,
  //   typeKey: 'sensor'
  // }
  // frequencyData.value.push(otherObj)
}
const changeOtherData = (row) => {
  // editOtherData.value.push(row)
}
const changeData = (item) => {
  return {
    equipmentId: item.equipmentId,
    unit: item.unit,
    alarmValue: item.alarmValue,
    serialNumber:item.serialNumber,
    miniRange: parseInt(item.miniRange),
    maxRange: parseInt(item.maxRange),
    state: item.state,
  }
}
const editEquip = debounce(() => {
  let newFrequency = [{
    acquisitionPeriod: fanFrequency.value * 1000,
    tunnelId: parseInt(tunnelId),
    typeKey: 'frequency'
  }, {
    acquisitionPeriod: windFrequency.value * 1000,
    tunnelId: parseInt(tunnelId),
    typeKey: 'windPressure'
  }, {
    acquisitionPeriod: otherFrequency.value * 1000,
    tunnelId: parseInt(tunnelId),
    typeKey: 'sensor'
  }]
  let newFan = []
  let newWind = []
  let newSensor = []
  fanData.value.forEach(item => {
    let obj = {
      equipmentId: item.equipmentId,
      ratedPower: parseInt(item.ratedPower),
      acurrentValue: parseInt(item.acurrentValue),
      bcurrentValue: parseInt(item.bcurrentValue),
      ccurrentValue: parseInt(item.ccurrentValue),
      serialNumber:item.serialNumber,
      state: parseInt(item.state)
    }
    newFan.push(obj)
  })
  winData.value.forEach(item => {
    newWind.push(changeData(item))
  })
  otherData.value.forEach(item => {
    newSensor.push(changeData(item))
  })
  const basicData = {
    tunnelId: tunnelId,
    acquisitionList: newFrequency,
    frequencyChangerList: newFan,
    windPressureSensorList: newWind,
    sensorList: newSensor,
    // shuntList: editFenLiuData.value,
  }
  editEquipment(basicData).then(res => {
    if (res.code === 1000) {
      ElMessage.success('修改成功')
      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
    } else {
      ElMessage.error(res.msg)
    }
  })
}, 100)

const handleChangeMenu = (e) => {
  changeIndex.value = e
}

const getList = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'allLoading'
  })
  getEquipmentList(tunnelId).then(res => {
    if (res.code === 1000) {
      fanData.value = res.data.frequencyChangerList
      res.data.windPressureSensorList.forEach(item => {
        item.offset = item.offset + 4000
      })
      winData.value = res.data.windPressureSensorList
      res.data.sensorList.forEach(item => {
        item.offset = item.offset + 4000
      })
      otherData.value = res.data.sensorList
      res.data.acquisitionList.map(item => {
        item.acquisitionPeriod = item.acquisitionPeriod / 1000
        if (item.typeKey === 'frequency') {
          fanFrequency.value = item.acquisitionPeriod
        } else if (item.typeKey === 'windPressure') {
          windFrequency.value = item.acquisitionPeriod
        } else if (item.typeKey === 'sensor') {
          otherFrequency.value = item.acquisitionPeriod
        }
      })
    }
    loading.close()
  })
}
const getTunnel = () => {
  getTunnelDetail(tunnelId).then((res) => {
    if (res?.code === 1000) {
      siteId.value = res.data.siteId
      tunnelName.value = res.data.tunnelName
    }
  });
}
getTunnel()
getList()
</script>
<style lang="scss">
.serialNumber{
  .el-input{
    width: 450px!important;
  }
}
.el-select.serialNumber {
  border-radius: 6px!important;
  border: 1px solid #05FEFF!important;
  background-color: transparent!important;
  .el-select__wrapper{
    height: 54px!important;
    color: #FFFFFF!important;
    font-size: 40px!important;
    //height: auto!important;
    line-height: normal!important;
    border-radius: 6px!important;
    border: 1px solid #05FEFF!important;
    background-color: transparent!important;
  }
  .el-select__placeholder {
    height: 54px;
    line-height: 54px;
    color: #FFFFFF;
  }
}


.serialNumber-select.el-popper {
  background: #064B66 !important;
  border: 2px solid #05FEFF !important;

.el-select-dropdown {
    min-width: 130px !important;
  }
  .el-select-dropdown__item.is-hovering{
    background-color: #064B66 !important;
  }
  .el-select-dropdown__item {
    color: #FFFFFF;
    border-bottom: 1px solid #05FEFF;

    &:last-child {
      border-bottom: none;
    }
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: transparent !important;
    color: #F7B500;
  }
}
</style>
<style scoped lang="scss">
.tunnel-bgc {
  padding: 85px 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/tunnel/sd_bj.png');

  .box-top {
    display: flex;
    justify-content: flex-start;

    .tunnel-name {
      margin-left: 120px;
      height: 61px;
      font-size: 46px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 61px;
    }

    .back-tunnel {
      cursor: pointer;
      margin: 0 0 0 70px;
      display: flex;
      align-items: center;
      width: 178px;
      height: 70px;
      line-height: 70px;
      border-radius: 11px;
      border: 2px solid #08B7B8;
      font-size: 38px;
      color: #FFFFFF;

      .back-icon {
        margin-right: 20px;
        margin-left: 23px;
        width: 33px;
        height: 33px;
        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
      }
    }
  }

  .device-content {
    display: flex;
    justify-content: center;
    padding-top: 190px;

    .device-box {
      display: flex;
      width: 2680px;
      height: 1600px;
      background: #064B66;
      border-radius: 20px;
      border: 2px solid #05FEFF;
      box-sizing: border-box;

      .box-left {
        padding-left: 24px;
        width: 300px;
        height: 1596px;
        background: #0D5A7A;
        border-radius: 20px 0px 0px 20px;

        :deep(.el-menu) {
          border-right: none;
          margin-top: 261px;
          background-color: #0D5A7A;

          .el-menu-item.is-active {
            background-image: url(../../assets/images/device/sdgl_xz.png);
          }

          .el-menu-item {
            color: #fff;
            height: 90px;
            font-size: 40px;

            &:hover {
              background-color: #0D5A7A;
            }

            &:first-child {
              letter-spacing: 120px;
            }

            &:nth-child(2) {
              letter-spacing: 120px;
            }

            //&:nth-child(4) {
            //  letter-spacing: 40px;
            //}
          }
        }
      }

      .box-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;

        .device-title {
          margin-top: 60px;
          line-height: 61px;
          color: #FFFFFF;
          display: flex;
          justify-content: center;

          > span:first-child {
            font-size: 46px;
            font-weight: bold;
          }

          .collection-frequency {
            height: 60px;
            display: flex;
            align-items: center;
            position: absolute;
            right: 102px;

            > span:first-child {
              font-size: 38px !important;
              white-space: pre;
              margin-right: 15px;
            }

            :deep(.el-input__wrapper) {
              width: 166px;
              height: 56px;
              background-color: transparent;
              box-shadow: none;
              border-radius: 6px;
              border: 1px solid #05FEFF;
              transform: none;
              transition: none;

              .el-input__inner {
                height: 54px;
                font-size: 30px;
                color: #FFFFFF;
              }

              .el-input__suffix-inner {
                font-size: 30px;
                color: #08B7B8;
                line-height: 40px;
              }
            }
          }
        }
      }

      .btns {
        width: 100%;
        margin: 0 auto;
        position: absolute;
        bottom: 70px;
      }

      .device-table {
        margin-top: 50px;
        margin-left: 50px;
        margin-right: 50px;

        .active {
          color: #FFFFFF;
          background: #0f7da9;
        }

        .wind-switch {
          margin-left: 26px;
        }

        .switch {
          margin-top: 22px;

          display: flex;
          width: 200px;
          height: 50px;
          border-radius: 6px;
          border: 1px solid #05FEFF;
          overflow: hidden;
          color: #51A2B3;
          line-height: 40px;
          font-size: 36px;

          & > div {
            flex: 1;
            text-align: center;
            cursor: pointer;
          }
        }

        :deep(.el-table--fit) {
          //width: 1780px !important;
          width: auto;
        }

        :deep(.cell) {
          height: 80px;
          line-height: 80px;
          color: #fff;
          font-size: 38px;
        }

        :deep(.el-table tr) {
          background-color: #1C5971;
        }

        :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
          background-color: #1C5971;
        }

        :deep(.el-table__row--striped) {
          background-color: #13849C !important;
        }

        :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
          background-color: #13849C !important;
        }

        :deep(.el-table__cell) {
          .el-input {
            width: 180px;
            height: 53px;
          }

          .el-input__wrapper {
            border-radius: 6px;
            border: 1px solid #05FEFF;
            background-color: transparent;

            .el-input__inner {
              color: #FFFFFF;
              font-size: 40px;
              height: auto;
              line-height: normal;
            }
          }
        }

        :deep(.el-table__inner-wrapper::before) {
          display: none;
        }
      }
    }
  }
}
</style>
