<template>
  <div class="site-bgc">
    <div class="box-top">
      <div class="back-tunnel" @click="router.push('/')">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
      <div class="tunnel-title"></div>
      <div class="all-del-btn">
        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
          添加
        </div>
        <div class="all-btn" @click="handleChooseAll">
          全选
        </div>
        <div class="all-btn del-btn" @click="handleMoreDelete">
          删除
        </div>
      </div>
    </div>
    <div class="box-content">
      <div class="site-box" v-for="item in siteList" :key="item.siteId">
        <div class="top">
          <span>站点名称：{{ item.siteName }}</span>
          <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
        </div>
        <div class="box-center">
          <div class="left-img"></div>
          <div class="right-tunnel">
            <div>隧道数量：{{ item.tunnelList.length }}条
            </div>
            <div>
              <div class="tunnel" v-if="item.info.tunnelName">
                <div>{{ item.info.tunnelName }}</div>
                <div class="tunnel-icon"></div>
                <div>施工长度{{ item.info.constructionLength }}米</div>
                <div>实现长度{{ item.info.totalLength }}公里
                </div>
              </div>
              <div class="tunnel-add" @click="goToAddTunnel(item.siteId)">
                <div class="add-icon"></div>
              </div>
            </div>
            <div class="more" @click="goToAddTunnel(item.siteId)"  v-if="item.info.tunnelName">
              更多
              <div class="icon"></div>
            </div>
          </div>
        </div>
        <div class="edit-btn" @click="handleEdit(item)">
          <div class="edit-icon"></div>
          <div>站点编辑</div>
        </div>
      </div>
      <div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
        <div class="add-icon"></div>
        <div style="cursor: pointer">添加站点</div>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
      <div class="siteId">
        <span>{{ title }}</span>
      </div>
      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
        <el-form-item label="站点名称">
          <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
        </el-form-item>
        <el-form-item label="站点地址">
          <el-input v-model="form.address" placeholder="请输入站点地址"/>
        </el-form-item>
        <el-form-item label="站点描述">
          <el-input v-model="form.describe" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }"
                    placeholder="请输入站点信息"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="btns">
          <div class="cancel-btn" @click="isVisited=false">
            取消
          </div>
          <div class="sure-btn" @click="handleSubmit(formInstance)">
            确定
          </div>
        </div>
      </template>
    </el-dialog>
    <div class="pagination">
      <span>首页</span>
      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
                     @current-change="handleCurrentChange"/>
      <span>尾页</span>
    </div>
  </div>
</template>

<script setup>
import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
import {ElMessage, ElMessageBox} from "element-plus";

const router = useRouter()
const siteList = ref([
  // {
  //   siteName: '松江站',
  //   info:{
  //     tunnelNum: 1,
  //     tunnelName: '一号隧道',
  //     constructionLength: 500,
  //     implementationLength: 10
  //   }
  // },
  // {
  //   siteName: '松江站',
  //   info:{
  //     tunnelNum: 1,
  //     tunnelName: '二号隧道',
  //     constructionLength: 500,
  //     implementationLength: 10
  //   }
  // },
  // {
  //   siteName: '松江站',
  //   info:{
  //     tunnelNum: 1,
  //     tunnelName: '三号隧道',
  //     constructionLength: 500,
  //     implementationLength: 10
  //   }
  // }
])
const siteIds = ref([])
const siteNameList = ref([])
const info = ref({
  tunnelName: '',
  constructionLength: 0,
  totalLength: 0
})
const title = ref('新增站点')
const isClick = ref(false);
const isVisited = ref(false);
const total = ref(10);
const showAddIcon = ref(true)
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 6
});
const form = ref({
  address: '',
  siteName: '',
  describe: ''
});
const formRules = ref({
  siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
})
const formInstance = ref()
const getList = () => {
  getSiteList({
    ...pageInfo
  }).then((res) => {
    total.value = res.data.total;
    showAddIcon.value = total.value % 6!==0;
    res.data.rows.map(item => {
      if (item.tunnelList === null || item.tunnelList.length === 0) {
        item.info = info.value
      }else{
        item.info=item.tunnelList[0]
      }
      item.checked = false
    })

    siteList.value = res.data.rows;
  });
}
getList()
const handleClickSite = (type) => {
  if (type.checked) {
    siteIds.value.push(type.siteId)
    siteNameList.value.push(type.siteName)
  } else {
    siteIds.value.map((item, index) => {
      if (item === type.siteId) {
        siteIds.value.splice(index, 1)
      }
    })
    siteNameList.value.map((item, index) => {
      if (item === type.siteName) {
        siteNameList.value.splice(index, 1)
      }
    })
  }
}
const goToAddTunnel = (siteId) => {
  router.push('/tunnel/' + siteId)
  // router.push('/tunnel/1')
}
//重置from表单
const restFrom = () => {
  form.value = {
    address: '',
    siteName: '',
    describe: ''
  }
}
const handleEdit = (item) => {
  title.value = '编辑站点'
  restFrom()
  getSiteDetail(item.siteId).then((res) => {
    form.value = res.data;
    form.value = item;
    isVisited.value = true
  });
}

const handleAdd = () => {
  restFrom()
  title.value = '新增站点'
  isVisited.value = true
}
const handleSubmit = (instance) => {
  if (!instance) return
  instance.validate(async (valid) => {
    if (!valid) return
    if (title.value === '编辑站点') {
      editSite(form.value).then((res) => {
        isVisited.value = false
        getList()
        ElMessage.success(res.msg)
      });
    } else {
      addSite(form.value).then((res) => {
        isVisited.value = false
        getList()
        ElMessage.success(res.msg)
      });
    }
  })
}
const handleChooseAll=()=>{
  siteList.value.map(item=>{
    item.checked=!item.checked
  })
}
const handleMoreDelete = () => {
  if (siteIds.value.length === 0) {
    ElMessage.warning('请先选择站点进行删除')
  } else {
    ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'delBox'
    }).then(() => {
      deleteSite(siteIds.value).then(res => {
        if (res.code === 1000) {
          ElMessage.success(res.msg)
          getList()
          siteIds.value = []
          siteNameList.value = []
        } else {
          ElMessage.error(res.msg)
        }
      })
    })
  }
}

//点击页码进行分页功能
const handleCurrentChange = (val) => {
  pageInfo.pageNum = val
  getList()
}
</script>

<style scoped lang="scss">
.clickColor {
  position: absolute;
  top: 7px;
  left: 6.5px;
  width: 25px;
  height: 25px;
  background-color: #05FEFF;
  border-radius: 25px;
}

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

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

:deep(.el-textarea__inner) {
  background-color: transparent;
  border: 1px solid #08B7B8;
  color: #fff;
  font-size: 38px;
}


.site-bgc {
  background-color: #072348;
  padding: 85px 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/site/zdgl_dbj.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 {
    height: 1850px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 100px;
    padding-right: 100px;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;

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

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

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

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

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

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

      .box-center {
        display: flex;

        .left-img {
          margin-top: 50px;
          margin-right: 60px;
          width: 500px;
          height: 370px;
          background-image: url('@/assets/images/site/zdgl_zd.png');
        }

        .right-tunnel {
          position: relative;

          > div:first-child {
            font-size: 38px;
            font-family: MicrosoftYaHei;
            color: #FFFFFF;
            line-height: 42px;
          }

          > div:nth-child(2) {
            display: flex;
            margin-top: 29px;

            .tunnel {
              margin-right: 20px;
              width: 280px;
              height: 350px;
              background: #3FBED1;
              border-radius: 16px;
              display: flex;
              flex-direction: column;
              align-items: center;
              color: #FFFFFF;

              > div:first-child {
                height: 37px;
                font-size: 32px;
                margin-top: 20px;
              }

              > div:nth-child(3) {
                margin-bottom: 18px;
              }

              > div:nth-child(3), > div:nth-child(4) {
                font-size: 32px;
              }

              .tunnel-icon {
                width: 82px;
                height: 84px;
                background-image: url('@/assets/images/site/zdgl_icon_sd.png');
                margin: 30px 0 30px 0;
              }
            }

            .tunnel-add {
              width: 280px;
              height: 350px;
              background: #1891A3;
              border-radius: 16px;
              display: flex;
              justify-content: center;
              align-items: center;

              .add-icon {
                cursor: pointer;
                width: 122px;
                height: 122px;
                background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
              }
            }
          }

          .more {
            margin-top: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            position: absolute;
            right: 0;
            font-weight: bold;
            color: #35C5CC;
            font-size: 38px;

            .icon {
              margin-left: 19px;
              transform: rotate(180deg);
              width: 33px;
              height: 33px;
              background-image: url('@/assets/images/site/zdgl_icon_fh.png');
            }
          }
        }
      }

      .edit-btn {
        cursor: pointer;
        margin-top: 117px;
        display: flex;
        align-items: center;
        font-size: 40px;
        color: #60DDDE;
        margin-left: 492px;

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

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

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

    > span:last-child {
      cursor: pointer;
      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>
