<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-title"></div>
      <div class="all-del-btn">
        <div class="all-btn">
          全选
        </div>
        <div class="all-btn del-btn">
          删除
        </div>
      </div>
    </div>
    <div class="box-content">
      <div class="site-box" v-for="item in siteList" :key="item.tunnelId">
        <div class="top">
          <span>{{ item.tunnelName }}</span>
          <span>施工长度500米 隧道长度10公里</span>
          <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
        </div>
        <div class="box-center">
          <div>
            <div class="left-img"></div>
            <div>
              <div class="edit-btn" @click="handleEdit">
                <div class="edit-icon"></div>
                <div>隧道编辑</div>
              </div>
              <div class="edit-btn" @click="handleEditDevice">
                <div class="edit-icon-two"></div>
                <div>设备管理</div>
              </div>
            </div>
          </div>
          <div class="tunnel-right">
            <div>
              <div class="fan-icon"></div>
              <span>风机异常</span>
            </div>
            <div class="icons-block">
              <div v-for="item in iconsList" :key="item.icon" class="icon-text">
                <div :style="{ backgroundImage: 'url(' +getImageUrl(item.icon)+')' }" class="icon"></div>
                <span>{{ item.name }}：{{ item.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="site-box add-box" @click="handleAdd">
        <div class="add-icon"></div>
        <div style="cursor: pointer">添加隧道</div>
      </div>
    </div>
    <el-dialog v-model="isVisited" width="1958px">
      <div class="siteId">
        <span>{{ title }}</span>
      </div>
      <el-form :model="form" :label-position="right" label-width="168px">
        <el-form-item label="隧道名称">
          <el-input v-model="form.name" 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.tunnelLength" placeholder="请输入隧道长度"/>
        </el-form-item>
        <el-form-item label="隧道备注">
          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
        </el-form-item>
      </el-form>
      <div class="btns">
        <div class="cancel-btn" @click="isVisited=false">
          取消
        </div>
        <div class="sure-btn">
          确定
        </div>
      </div>
    </el-dialog>
    <div class="pagination">
      <span>首页</span>
      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
      <span>尾页</span>
    </div>
  </div>
</template>

<script setup>
const router = useRouter()
const siteId = reactive(router.currentRoute.value.params.siteId)
const siteList = ref([
  {
    tunnelName: '一号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '二号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },
  {
    tunnelName: '三号隧道',
    num: 1,
    constructionLength: 500,
    implementationLength: 10
  },


])
const iconsList = ref([
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: 2
  },
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: 11
  },
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: '无'
  },
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: 2
  },
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: 11
  },
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: '无'
  },
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: 11
  },
  {
    icon: 'white-state-icon.png',
    name: '风机',
    num: 11
  },
])
const title = ref('新增隧道')
const isVisited = ref(false);
const tunnelIds = ref([])
const tunnelNameList = ref([])
const form = ref({
  name: '',
  serialNumber: '',
  tunnelLength: '',
  remarks: ''
});
const handleEdit = () => {
  title.value = '编辑隧道'
  isVisited.value = true
}
const handleEditDevice = () => {
  router.push('/device/'+1)
}

const handleAdd = () => {
  title.value = '新增隧道'
  isVisited.value = true
}
const getImageUrl = (name) => {
  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
}
const handleClickSite = (type) => {
  if (type.checked) {
    // tunnelIds.value.push(type.siteId)
    // tunnelNameList.value.push(type.siteName)
  } else {
    // tunnelIds.value.map((item, index) => {
    //   if (item === type.siteId) {
    //     tunnelIds.value.splice(index, 1)
    //   }
    // })
    // tunnelNameList.value.map((item, index) => {
    //   if (item === type.siteName) {
    //     tunnelNameList.value.splice(index, 1)
    //   }
    // })
  }
}
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
  border: 2px solid #05FEFF;
  background: #0D6578;
  border-radius: 20px;
  padding: 30px 40px;
  box-sizing: border-box;
  margin: 458px auto 0 auto;

  .el-dialog__header {
    padding: 0;
    display: none;
  }
}

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

:deep(.el-form-item__label) {
  font-size: 38px;
  font-family: MicrosoftYaHei;
  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;
    }
  }
}

.siteId {
  display: flex;
  justify-content: center;
  margin: 0 0 60px 0;
  font-size: 50px;
  color: #FFFFFF;
}

.btns {
  display: flex;
  justify-content: space-around;
  margin-top: 80px;

  .cancel-btn {
    cursor: pointer;
    width: 220px;
    height: 80px;
    border-radius: 11px;
    border: 2px solid #08B7B8;
    color: #08B7B8;
    line-height: 80px;
    padding-left: 67px;
    font-size: 38px;
    box-sizing: border-box;
  }

  .sure-btn {
    cursor: pointer;
    width: 220px;
    height: 80px;
    line-height: 80px;
    background: #08B7B8;
    border-radius: 11px;
    color: #FFFFFF;
    font-size: 38px;
    padding-left: 67px;
  }
}

.tunnel-bgc {
  background-color: #072348;
  padding: 85px 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/tunnel/sd_bj.png');

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

    .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');
      }
    }

    .all-del-btn {
      display: flex;

      .del-btn {
        width: 168px;
        height: 60px;
        background: #08B7B8;
        border-radius: 11px;
      }

      .all-btn {
        cursor: pointer;
        padding-left: 53px;
        width: 178px;
        height: 70px;
        line-height: 70px;
        border-radius: 11px;
        border: 2px solid #08B7B8;
        color: #FFFFFF;
        font-size: 38px;

        &:last-child {
          margin-left: 40px;
          margin-right: 70px;
        }
      }
    }
  }

  .box-content {
    display: flex;
    flex-wrap: wrap;
    padding-left: 67px;
    padding-right: 70px;
    justify-content: space-between;

    .add-box {
      cursor: pointer;
      font-weight: bold;
      color: #60DDDE;
      font-size: 38px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .add-icon {
        margin-top: 110px;
        margin-bottom: 87px;
        width: 220px;
        height: 220px;
        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
      }
    }

    .site-box {
      margin-top: 50px;
      //margin-right: 122px;
      padding: 40px 30px;
      width: 925px;
      height: 550px;
      background-image: url('@/assets/images/site/zdgl_bj.png');
      //box-sizing: border-box;
      position: relative;

      &:nth-child(3) {
        margin-right: 0;
      }

      .top {
        display: flex;
        justify-content: space-between;
        font-size: 45px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42px;

        > span:nth-child(2) {
          font-size: 38px;
          color: #5CE4F2;
        }

        > div:last-child {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border: 2px solid #05FEFF;
          border-radius: 25px;
          position: relative;

          .clickColor {
            position: absolute;
            top: 7px;
            left: 6.5px;
            width: 25px;
            height: 25px;
            background-color: #05FEFF;
            border-radius: 25px;
          }
        }
      }

      .box-center {
        display: flex;

        //flex-direction: column;
        > div:first-child {

          > div:nth-child(2) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-right:30px;
          }
        }

        .left-img {
          margin-top: 110px;
          margin-right: 70px;
          width: 340px;
          height: 148px;
          background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
        }

        .edit-btn {
          cursor: pointer;
          margin-top: 100px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-size: 34px;
          color: #60DDDE;
          //margin-left: 175px;

          .edit-icon {
            width: 32px;
            height: 34px;
            background-image: url('@/assets/images/site/zdgl_icon_bj.png');
            margin-right: 10px;
          }

          .edit-icon-two {
            width: 32px;
            height: 34px;
            background-image: url('@/assets/images/tunnel/device.png');
            margin-right: 10px;
          }
        }

        .tunnel-right {
          padding-top: 40px;

          > div:first-child {
            display: flex;
            align-items: center;
            font-size: 36px;
            color: #FB3838;

            .fan-icon {
              margin-right: 10px;
              width: 32px;
              height: 32px;
              background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
            }
          }

          .icons-block {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;

            .icon-text {
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #FFFFFF;
              font-size: 36px;
              margin-right: 27px;
              margin-bottom: 30px;

              &:nth-child(2n) {
                margin-right: 0;
              }

              .icon {
                width: 32px;
                height: 32px;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }

  .pagination {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    bottom: 50px;
    color: #60DDDE;
    font-size: 38px;
    font-weight: bold;

    > span:first-child {
      margin-right: 60px;
    }

    > span:last-child {
      margin-left: 71px;
    }

    :deep(.btn-prev) {
      background-color: transparent;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #60DDDE;
      margin-right: 20px;
    }

    :deep(.btn-next) {
      background-color: transparent;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #60DDDE;
      margin-left: 30px;
    }

    :deep(.el-pager li.is-active ) {
      width: 70px;
      height: 70px;
      background: #60DDDE;
      border-radius: 50%;
      color: #071F40;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
    }

    :deep(.el-pager li) {
      margin-left: 40px;
    }

    :deep(.el-pager li:not(.is-active) ) {
      width: 70px;
      height: 70px;
      border: 1px solid #60DDDE;
      border-radius: 50%;
      background-color: transparent;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #60DDDE;
    }
  }

}
</style>
