<template>
  <div id="main">
    <div class="box-top">
      <div class="back-tunnel" @click="handleGoTunnelMgr">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
      <tunnel-title/>
      <div class="btn-right">
        <div class="del-btn" @click="handleGotoDevice">设备管理</div>
        <div class="del-btn" @click="handleSave">保存</div>
      </div>
    </div>
    <div class="edit-box">
      <el-form :model="form" :label-position="right"  label-width="230px">
        <el-form-item label="隧道名称">
          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
        </el-form-item>
        <el-form-item label="隧道简称">
          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
        </el-form-item>
        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
        </el-form-item>
        <!--        <el-form-item label="序列号1" prop="serialNumber">-->
        <!--          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="序列号2" prop="serialNumberOne">-->
        <!--          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
        <!--        </el-form-item>-->

        <el-form-item label="PLC序列号" prop="serialNumber">
          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>
        </el-form-item>
        <div style="display: flex;flex-direction: column">
          <div style="display:flex;align-items:center;justify-content:flex-end;font-size: 38px;color: #08B7B8;">
            <span style="cursor: pointer;" @click="addSerialNumber">添加序列号</span>
            <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer;" @click="addSerialNumber">
              <CirclePlus/>
            </el-icon>
          </div>
          <div v-for="(item,index) in form.tunnelGatewayVoList" :key="index">
            <el-form-item label="序列号名称">
              <div style="flex: 1;display: flex;">
                <el-input v-model="item.serialNumberType" placeholder="请输入序列号名称" :disabled="item.isUse"
                          :style="{'margin-right':item.isUse? '94px':''}" :title="item.isUse?'该序列号正在使用中, 暂不能修改':''"/>
                <el-icon v-if="!item.isUse" size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer"
                         @click="delSerialNumber(index)">
                  <Remove/>
                </el-icon>
              </div>
            </el-form-item>
            <el-form-item :label="item.serialNumberType+'序列号'" class="serialNumber-name-overflow-hidden">
              <el-input v-model="item.serialNumber" :placeholder="'请输入'+item.serialNumberType+'序列号'"
                        style="margin-right: 94px" :disabled="item.isUse" :title="item.isUse?'该序列号正在使用中, 暂不能修改':''"/>
            </el-form-item>
          </div>
        </div>
        <!--                <div style="display: flex;flex-direction: column">-->
        <!--                  <div v-for="(item,index) in form.tunnelGatewayVoList" :key="index" >-->
        <!--                    <el-form-item :label="'序列号'+(index+2)">-->
        <!--                      <div style="flex: 1;display: flex;">-->
        <!--                        <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
        <!--                        <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">-->
        <!--                          <CirclePlus/>-->
        <!--                        </el-icon>-->
        <!--                        <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >-->
        <!--                          <Remove/>-->
        <!--                        </el-icon>-->
        <!--                      </div>-->
        <!--                    </el-form-item>-->
        <!--                  </div>-->
        <!--                </div>-->
        <el-form-item label="隧道长度">
          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
        </el-form-item>
        <el-form-item label="施工长度">
          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
        </el-form-item>
        <el-form-item label="基准频率" prop="referenceFrequency">
          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="280px">
            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
          </el-form-item>
          <el-form-item label="升频率" prop="upFrequency">
            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
              <template #suffix>
                <span>Hz</span>
              </template>
            </el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="280px">
            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
          </el-form-item>
          <el-form-item label="降频率" prop="dropFrequency">
            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
              <template #suffix>
                <span>Hz</span>
              </template>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="是否默认">
          <el-radio-group v-model="form.isDefault">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="隧道备注">
          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
        </el-form-item>
      </el-form>
    </div>

    <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
    <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" :form="form" ref="tunnelScene"
                  :tunnelLength="tunnelLength"/>
  </div>
</template>
<script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import {editTunnel, getTunnelDetail, getSerialNumberOnUse} from "@/api/tunnelManage";
import {ElLoading, ElMessage} from "element-plus";
import {initSceneData} from "@/api/tunnelScene";
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 modelEquipmentList = ref(null)
const isShowRemove = ref(false)
const form = ref({
  tunnelName: "",
  serialNumberPrefix: '',
  // serialNumber: '',
  serialNumber: '',
  totalLength: "",
  referenceFrequency: '',
  upTime: '',
  upFrequency: '',
  dropTime: '',
  dropFrequency: '',
  isDefault: false,
  remarks: "",
  tunnelGatewayVoList: []
});
const addSerialNumber = () => {
  form.value.tunnelGatewayVoList.push({
    serialNumber: '',
    serialNumberType: '',
  })
}
const delSerialNumber = (index) => {
  form.value.tunnelGatewayVoList.splice(index, 1)
}
const getSerialNumberOnUseList = async () => {
  let {data, code} = await getSerialNumberOnUse(tunnelId)
  if (code === 1000) {
    return data
  }
}
const getTunnel = async () => {
  let serialNumberOnUseList = await getSerialNumberOnUseList()
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'allLoading'
  })
  await getTunnelDetail(tunnelId).then((res) => {
    if (res?.code === 1000) {
      res.data.tunnelGatewayVoList?.forEach((item) => {
        serialNumberOnUseList?.forEach((serialNumberOnUseItem) => {
          if (item.serialNumber == serialNumberOnUseItem) {
            item.isUse = true
          }
        })
      })
      if(!res.data.tunnelGatewayVoList){
        res.data.tunnelGatewayVoList=[]
      }
      form.value = res.data;
    }
    loading.close()
  });
};
getTunnel();
const tunnelLength = computed(() => form.value.totalLength);
const handleGotoDevice = () => {
  if (type === 'bySite') {
    router.push('/device/' + tunnelId + '/bySite/' + userId)
  } else if (type === 'byHome') {
    router.push('/device/' + tunnelId + '/byHome/' + userId)
  }
};
const handleGoTunnelMgr = () => {
  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
};
const getTunnelInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '修改中...',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'allLoading'
  })
  initSceneData(tunnelId).then((res) => {
    modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
    if (modelEquipmentList.value === null) {
      modelEquipmentList.value = []
    }
    const data = {
      tunnelId: tunnelId,
      ...form.value,
      tunnelGatewayDtoList: form.value.tunnelGatewayVoList,
      tunnelLength: form.value.totalLength,
      modelEquipmentList: modelEquipmentList.value,
    };
    editTunnel(data).then((res) => {
      if (res?.code === 1000) {
        loading.close()
        ElMessage.success(res.msg);
        router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
      } else {
        ElMessage.error(res.msg);
        loading.close()
      }
    });
  })
}
const handleSave = debounce(() => {
  getTunnelInfo()
}, 100)
</script>
<style lang="scss" scoped>
:deep(.el-form-item__content) {
  .el-input-number {
    width: 237px;

    .el-input-number__decrease, .el-input-number__increase {
      background-color: #08B7B8;
      width: 50px;

      .el-icon {
        font-size: 40px;
        color: #FFFFFF;
        font-weight: bold;
      }
    }
  }
}

#main {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #072348;

  .box-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back-tunnel {
      z-index: 2;
      position: absolute;
      top: 100px;
      //left: 80px;
      cursor: pointer;
      margin: 0 0 0 80px;
      display: flex;
      align-items: center;
      width: 180px;
      height: 80px;
      line-height: 70px;
      border-radius: 11px;
      border: 2px solid #08b7b8;
      font-size: 42px;
      color: #ffffff;

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

    .btn-right {
      display: flex;
      z-index: 2;
      position: absolute;
      top: 100px;
      right: 80px;

      .del-btn {
        &:first-child {
          width: 220px;
          margin-right: 40px;
        }

        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 180px;
        height: 80px;
        border-radius: 11px;
        border: 2px solid #08b7b8;
        color: #ffffff;
        font-size: 42px;
      }
    }
  }

  #tunnel-box {
    height: 100%;
  }

  .edit-box::-webkit-scrollbar {
    width: 6px;
  }

  // 滚动条轨道
  .edit-box::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
  }

  // 小滑块
  .edit-box::-webkit-scrollbar-thumb {
    background: rgb(8, 183, 184);
    border-radius: 10px;
  }

  .edit-box {
    z-index: 2;
    position: absolute;
    top: 250px;
    left: 80px;
    width: 1000px;
    height: 1500px;
    overflow-y: scroll;
    background-image: url(@/assets/images/transducer/bg.png);
    padding: 20px 30px;
    box-sizing: border-box;

    :deep(.el-radio-group) {
      margin-top: 10px;
    }

    :deep(.el-radio__label) {
      color: #ffffff;
      font-size: 38px;
    }

    :deep(.el-radio__inner) {
      width: 40px;
      height: 40px;
      border-radius: 25px;
      border: 4px solid #05feff;
      background-color: transparent;
    }

    :deep(.el-radio__input.is-checked + .el-radio__label) {
      color: #ffffff;
    }

    :deep(.el-radio__input.is-checked .el-radio__inner) {
      background: #064b66;
      border-color: #05feff !important;
    }

    :deep(.el-radio__inner::after) {
      width: 18px;
      height: 18px;
      background: #05feff;
    }

    :deep(.el-form-item) {
      margin-top: 40px;
    }

    :deep(.el-form-item__label) {
      font-size: 38px;
      color: #ffffff;
      margin-right: 12px;
      height: 50px;
      line-height: 50px;
      word-break: break-all;
      //text-overflow: ellipsis;
      //overflow: hidden;
      //white-space: nowrap;
      //-webkit-line-clamp: 2;
    }

    :deep(.el-input) {
      height: 75px;

      .el-input__wrapper {
        background-color: transparent;
        border: 1px solid #08b7b8;

        .el-input__inner {
          height: auto;
          color: #fff;
          font-size: 38px;
        }

        .el-input__suffix-inner {
          font-size: 30px;
          color: #08B7B8;
          line-height: 40px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
