<template>
  <div class="device">
    <div class="form-header">
      <div></div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="formInline.user" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="onSubmit"
            style="font-weight: 300"
            >查询</el-button
          >
          <el-button
            type="success"
            icon="el-icon-plus"
            @click="handleAdd"
            style="font-weight: 300"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="form-box">
            <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column label="序号" type="index" width="80" align="center">
                    </el-table-column>
                <el-table-column label="名称" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                     <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="handleMap(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div> -->

    <!-- 设备列表 -->
    <div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px">
      <div class="table-form" v-for="item in tableData" :key="item.id">
        <!-- 顶部 -->
        <div class="table-top">
          <div class="table-top1">
            <span>无人船刀刀来了</span>
            <br />
            <span>{{ item.date }}</span>
          </div>

          <div :class="`table-top-state${item.status}`">
            <div class="spot"></div>
            <span>{{
              item.status === 1
                ? "在线"
                : item.status === 2
                ? "离线"
                : item.status === 3
                ? "维护"
                : " 运行"
            }}</span>
          </div>
          <div class="table-content">
            <dl class="data-list">
              <dt>经度</dt>
              <dd>24</dd>
              <dt style="margin-left: auto">纬度</dt>
              <dd>456</dd>
            </dl>
            <dl class="data-list">
              <dt>偏航角度</dt>
              <dd>32</dd>
              <dt style="margin-left: auto">俯仰角度</dt>
              <dd>48</dd>
            </dl>
          </div>
          <div class="table-bottom">
            <el-button type="primary" @click="handleMap(item)">查看</el-button>
            <el-button type="info">删除</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 第四步绑定自定义属性 -->
    <pagination :total="obj.total"> </pagination>
    <!-- 弹出框 -->
    <div>
      <el-dialog
        title="新增设备"
        top="30vh"
        :modal="true"
        center
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form" label-position="top">
          <el-form-item label="设备名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="设备类型" :label-width="formLabelWidth">
            <el-select
              v-model="form.region"
              placeholder="请选择设备类型"
              style="width: 100%"
            >
              <el-option label="无人船" value="0"></el-option>
              <el-option label="无人车" value="1"></el-option>
              <el-option label="无人机" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备id" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddqd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import apiServe from "@/utils/api";
// 第一步引入组件
import pagination from "../pagination/pagination.vue";
export default {
  // 第二步 注册组件
  components: {
    pagination,
  },
  data() {
    return {
      // 查询
      formInline: {
        shipname: "",
      },

      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        // 默认选中哪一页
        currentPage: 1,
        // 定义总条数
        total: null,
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "无人船一",
          status: 1,
          longitude: "经度",
          latitude: "纬度",
          yaw: "偏航角度",
          pitch: "偏航角度",
          id: 1,
        },
        {
          date: "2016-05-04",
          name: "无人船二",
          status: 2,
          longitude: "经度2",
          latitude: "纬度2",
          yaw: "偏航角度2",
          pitch: "偏航角度2",
          id: 2,
        },
        {
          date: "2025-05-04",
          name: "无人车",
          status: 3,
          address: "1",
          longitude: "经度3",
          latitude: "纬度3",
          yaw: "偏航角度3",
          pitch: "偏航角度3",
          id: 3,
        },
        {
          date: "2025-05-04",
          name: "无人车",
          status: 4,
          address: "1",
          longitude: "经度4",
          latitude: "纬度4",
          yaw: "偏航角度4",
          pitch: "偏航角度4",
          id: 4,
        },
        {
          date: "2025-05-04",
          name: "无人车",
          status: 1,
          address: "1",
          longitude: "经度4",
          latitude: "纬度4",
          yaw: "偏航角度4",
          pitch: "偏航角度4",
          id: 5,
        },
        {
          date: "2025-05-04",
          name: "无人车",
          status: 2,
          address: "1",
          longitude: "经度4",
          latitude: "纬度4",
          yaw: "偏航角度4",
          pitch: "偏航角度4",
          id: 6,
        },
      ],

      form: {
        name: "",
        region: "",
        id: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 查询
    onSubmit() {
      console.log("submit!");
    },
    // 新增
    handleAdd() {
      this.dialogFormVisible = true;
      // 清空验证并清空内容
      this.form = {};
    },
    handleAddqd() {
      let data = {
        deviceType: this.form.region,
        deviceId: this.form.id,
        deviceName: this.form.name,
      };
      apiServe.deviceXZ("post", data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "新增成功",
          });
        } else {
          this.$message({
            type: "error",
            message: "新增失败",
          });
        }
      });

      this.dialogFormVisible = false;
    },
    // 跳转
    handleMap(index) {
      console.log(index);
      localStorage.setItem("tempData", JSON.stringify(index));
      this.$router.push({
        path: "/index/deviceDetails",
        query: {
          // id: index.id,
          // name: index.name,
          // status: index.status,
          // longitude: index.longitude,
          // latitude: index.latitude,
          // yaw: index.yaw,
          // pitch: index.pitch,
          // data: JSON.stringify(index) // 序列化对象/数组
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.device::v-deep {
  ul,
  li {
    list-style: none;
  }

  .form-header {
    box-shadow: 0 0 5px #d0d0d0;
    border-radius: 5px;
    text-align: left;
    background-color: #fff;
    padding: 10px;
    padding-left: 30px;

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .form-box {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px #d0d0d0;
    border-radius: 5px;
    /* // calc():高度时100%-超出的部分 */
    height: calc(100vh - 235px);
  }

  .table-form {
    width: 490px;
    height: 330px;
    background: #ffffff;
    border-radius: 10px;
    margin: 15px;
    position: relative;
    flex: 0 0 30%;
    margin-left: 25px;

    .table-top {
      padding: 35px;

      // 名称＋日期
      .table-top1 {
        display: flex;
        flex-direction: column;

        > span:first-child {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 22px;
          color: #000000;
          line-height: 26px;
          display: inline;
          order: 1;
          display: block;
          text-align: left;
        }

        > span:nth-child(3) {
          margin-top: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #8c95a4;
          line-height: 26px;
          order: 2;
          align-items: flex-start;
          display: block;
          text-align: left;
        }
      }

      // 状态
      // 在线
      .table-top-state1 {
        position: absolute;
        right: 34px;
        top: 53px;
        width: 56px;
        height: 26px;
        background: #c7f3df;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

        > span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #23b371;
          line-height: 26px;
          vertical-align: middle;
          /* 垂直居中 */
          padding-left: 5px;
        }

        .spot {
          width: 6px;
          height: 6px;
          background: #23b371;
          border-radius: 50%;
          vertical-align: middle;
          /* 垂直居中 */
        }
      }

      // 离线
      .table-top-state2 {
        position: absolute;
        right: 34px;
        top: 53px;
        width: 56px;
        height: 26px;
        background: #ffd5d5;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

        > span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #f31c1c;
          line-height: 26px;
          vertical-align: middle;
          /* 垂直居中 */
          padding-left: 5px;
        }

        .spot {
          width: 6px;
          height: 6px;
          background: #f31c1c;
          border-radius: 50%;
          vertical-align: middle;
          /* 垂直居中 */
        }
      }

      // 维护
      .table-top-state3 {
        position: absolute;
        right: 34px;
        top: 53px;
        width: 56px;
        height: 26px;
        background: #ffeecc;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

        > span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #f6a913;
          line-height: 26px;
          vertical-align: middle;
          /* 垂直居中 */
          padding-left: 5px;
        }

        .spot {
          width: 6px;
          height: 6px;
          background: #f6a913;
          border-radius: 50%;
          vertical-align: middle;
          /* 垂直居中 */
        }
      }

      // 运行
      .table-top-state4 {
        position: absolute;
        right: 34px;
        top: 53px;
        width: 56px;
        height: 26px;
        background: #d6e6ff;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

        > span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #1c6fec;
          line-height: 26px;
          vertical-align: middle;
          /* 垂直居中 */
          padding-left: 5px;
        }

        .spot {
          width: 6px;
          height: 6px;
          background: #1c6fec;
          border-radius: 50%;
          vertical-align: middle;
          /* 垂直居中 */
        }
      }

      // 内容
      .table-content {
        margin-top: 30px;

        .data-list {
          display: flex;
          justify-content: space-between;
          /* 背景颜色 */
          padding: 10px;
          font-family: Arial, sans-serif;
          margin-bottom: 10px;
          align-items: baseline;
        }

        .data-list dt {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #8c95a4;
          padding-right: 6px;
        }

        .data-list dd {
          font-family: "Microsoft YaHei";
          /* 应用微软雅黑字体 */
          font-weight: bold;
          font-size: 18px;
          color: #58616d;
        }
      }

      // 按钮
      .table-bottom {
        text-align: right;
      }
    }
  }
}
</style>
