<!-- 巡检导航 -->
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import threeCom from '@/components/threejs/index.vue'
import controlImg from '@/assets/tempImages/control.png'
const currentDevice = ref({
  deviceName: '机器狗1号',
  deviceStatus: '工作中',
  battery: '80%',
  route: '路线一',
  speed: '2m/s',
  name: '吉祥小区',
  address: '北京市海淀区永定路街道',
})
// 点击更换设备
const changeDevice = () => {
  ElMessageBox.confirm(
    '确定更换设备吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    ElMessage.success('更换成功')
    currentDevice.value = {
      deviceName: '机器狗2号',
      deviceStatus: '工作中',
      battery: '98%',
      route: '路线二',
      speed: '1.8m/s',
    }
  })
}

// 点击解除绑定
const unbind = () => {
  ElMessageBox.confirm(
    '确定解除绑定吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    ElMessage.success('已解除绑定')
  })
}

// -----------------------------------------------表格------------------------------------------------------
// 表格表头
const columns = ref([
  { text: '小区名称', value: 'name', align: 'center' },
  { text: '小区地址', value: 'address', align: 'center' },
  { text: '路线名称', value: 'route', align: 'center' },
  { text: '设备名称', value: 'deviceName', align: 'center' },
  { text: '更新时间', value: 'updateTime', align: 'center' },
])
const listQuery = ref({
  limit: 10,
  offset: 1,
})
const list: any = ref([]) // 数据列表
const loading = ref(false)
// --------------------------------------------------------------------------------------------------------------
onMounted(() => {
  list.value = [
    {
      content: '燃气管线周边是否施工',
      situation: '现场周边无施工现象',
      picture: '',
      route: '路线1',
      name: '二街坊社区',
      address: '北京市海淀区永定路街道',
      deviceName: '机器狗1号',
      updateTime: '2025-03-10 14:42:00',
    },
    {
      content: '闸井燃气浓度是否正常',
      situation: '正常',
      picture: '',
      route: '路线2',
      name: '永定路57号院',
      address: '北京市海淀区永定路街道',
      deviceName: '机器狗2号',
      updateTime: '2025-03-10 10:00:00',
    },
  ]
})
</script>

<template>
  <app-container>
    <div class="patrol-manage">
      <div class="box box-top">
        <div>
          <div class="button-area">
            <div>
              <span style="margin-right: 30px;">巡检导航测试</span>
              <el-button type="primary" @click="startNav">
                开始导航
              </el-button>
              <el-button type="warning" @click="pauseNav">
                暂停导航
              </el-button>
              <el-button type="danger" @click="stopNav">
                结束导航
              </el-button>
            </div>
            <div style="margin: 20px 0;">
              <span style="margin-right: 30px;">巡检点录入</span>
              <el-button type="primary" @click="startNav">
                添加巡检点
              </el-button>
              <el-button type="warning" @click="pauseNav">
                删除巡检点
              </el-button>
              <span style="margin-left: 30px;">状态：当前记录巡检点3</span>
            </div>
          </div>
          <div class="box-top-item">
            <!-- <img
              style="width: 100%; height: 300px"
              src="../../../assets/tempImages/point.png"
            > -->
            <three-com style="width: 100%; height: 400px" class="three-area" />
          </div>
        </div>
        <div style="height: 100%; background-color: #ccc; width: 1px;" />
        <div class="box-top-item">
          <div class="box-title">
            <div class="title">
              <span>关联设备</span>
              <img
                style="width: 20px; height: 20px"
                src="../../../assets/tempImages/icon-link.svg"
              >
            </div>
            <div>
              <el-button type="primary" link @click="changeDevice">
                更换设备
              </el-button>
              <el-button type="danger" link @click="unbind">
                解除绑定
              </el-button>
            </div>
          </div>
          <div class="box-main">
            <img
              style="width: 200px; height: 200px"
              src="../../../assets/tempImages/dog.png"
            >
            <div class="box-device">
              <span>
                <span class="title">设备名称: </span>
                <span class="text">{{ currentDevice.deviceName }}</span>
              </span>
              <span>
                <span class="title">设备状态: </span>
                <span class="text" style="color: #afcc85">{{ currentDevice.deviceStatus }}</span>
              </span>
              <span>
                <span class="title">设备电量: </span>
                <span class="text">{{ currentDevice.battery }}</span>
              </span>
              <span>
                <span class="title">小区名称: </span>
                <span class="text">{{ currentDevice.name }}</span>
              </span>
              <span>
                <span class="title">小区地址: </span>
                <span class="text">{{ currentDevice.address }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="box-bottom">
        <table-container title="路线管理" style="margin-top: 0px !important;">
          <normal-table
            :data="list"
            :total="total"
            :pagination="false"
            :columns="columns"
            :query="listQuery"
            :list-loading="listLoading"
            @change="changePage"
          >
            <template #preColumns>
              <el-table-column label="序号" width="55" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
            <template #columns>
              <el-table-column label="操作" width="160" align="center" fixed="right">
                <template #default="scope">
                  <el-button
                    type="primary"
                    link
                    size="small"
                    class="table-text-button"
                    @click="handleEdit(scope.row)"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </table-container>
      </div>
    </div>
  </app-container>
</template>

<style scoped lang="scss">
.patrol-manage {
  display: flex;
  flex-direction: column;
  // gap: 10px;
}

.box {
  width: 100%;
  background-color: #fff;
  padding: 10px;
  border-radius: 7px;
}
.box-top {
  display: grid;
  /* 将容器划分为两列，左边占 2 份，右边占 1 份 */
  grid-template-columns: 2fr  0.05fr 0.6fr;
  /* 设置列之间的间距为 20 像素 */
  gap: 20px;
  .button-area {

  }

  .box-top-item {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
    .three-area {
      position: relative;
      width: 100%;
      height: 400px;
    }
    .box-title {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .box-main {
      display:flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .box-device {
        display: flex;
        flex-direction: column;
        line-height: 29px;
        color: rgba(0,0,0,1);
        font-size: 14px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        .text {
          font-weight: 600;
        }
      }
    }
  }
}

.box-bottom {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .control-title {
    color: white;
    background-color: #ff9f11;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: 30px;
    height: 100px;
  }
  .round-btn {
    position: absolute;
    top: 14px;
    left: 129px;
    width: 42px;
    height: 42px;
    z-index: 111111;
    border-radius: 21px;
    cursor: pointer;
    &:hover {
      background-color: rgb(61 125 254 / 53%);
    }
  }
}
</style>