<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="188px">
        <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="序列号">
          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
        </el-form-item>
        <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="是否默认">
          <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} from "@/api/tunnelManage";
import {ElMessage} from "element-plus";
import {initSceneData} from "@/api/tunnelScene";
import TunnelTitle from "@/components/tunnelTitle/index.vue";

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 form = ref({
  tunnelName: "",
  serialNumber: "",
  totalLength: "",
  isDefault: false,
  remarks: "",
});
const getTunnel = () => {
  getTunnelDetail(tunnelId).then((res) => {
    if (res?.code === 1000) {
      form.value = res.data;
    }
  });
};
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 = () => {
  initSceneData(tunnelId).then((res) => {
    modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
    if(modelEquipmentList.value===null){
      modelEquipmentList.value=[]
    }
    const data = {
      tunnelId: tunnelId,
      tunnelName: form.value.tunnelName,
      tunnelAlias: form.value.tunnelAlias,
      serialNumber: form.value.serialNumber,
      remarks: form.value.remarks,
      constructionLength: form.value.constructionLength,
      tunnelLength: form.value.totalLength,
      isDefault: form.value.isDefault,
      modelEquipmentList: modelEquipmentList.value,
    };
     editTunnel(data).then((res) => {
       if (res?.code === 1000) {
         ElMessage.success(res.msg);
         router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
       } else {
         ElMessage.error(res.msg);
       }
     });
  })
}
const handleSave =  () => {
  getTunnelInfo()
};
</script>
<style lang="scss" scoped>
#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 {
    z-index: 2;
    position: absolute;
    top: 250px;
    left: 80px;
    width: 830px;
    //height: 500px;
    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;
      line-height: 50px;
    }

    :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;
        }
      }
    }
  }
}
</style>
