<template>
  <div class="photoGraphicDevice">
    <div class="photoBox">
      <div class="photoGraphicBtnGroup">
        <h4>拍照装置管理</h4>
        <el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
          >新增</el-button
        >
      </div>
      <div class="photoGraphicTable">
        <el-table
          ref="multipleTable"
          :data="terminalTableData"
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 40px)"
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
          v-loading="loading"
        >
          <!-- <el-table-column
            prop="cmdid"
            label="电压等级"
            show-overflow-tooltip
            
          >
          </el-table-column> -->
          <el-table-column
            prop="lineName"
            label="线路名称"
            show-overflow-tooltip
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="towerName"
            label="杆塔名称"
            show-overflow-tooltip
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="equipName"
            label="设备名称"
            show-overflow-tooltip
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="cmdId"
            label="设备编号"
            show-overflow-tooltip
            min-width="150"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="cmdid"
            label="SIM卡号"
            show-overflow-tooltip
            
          >
          </el-table-column>
          <el-table-column
            prop="cmdid"
            label="网络类型"
            show-overflow-tooltip
            
          >
          </el-table-column>
          <el-table-column
            prop="cmdid"
            label="状态"
            show-overflow-tooltip
            
          >
          </el-table-column>
          <el-table-column
            prop="cmdid"
            label="装置型号"
            show-overflow-tooltip
            
          >
          </el-table-column>
          <el-table-column
            prop="cmdid"
            label="装置厂家"
            show-overflow-tooltip
            
          >
          </el-table-column>
          <el-table-column
            prop="cmdid"
            label="规约版本"
            show-overflow-tooltip
            
          >
          </el-table-column>
          <el-table-column
            prop="cmdid"
            label="投运日期"
            show-overflow-tooltip
            
            :formatter="dateFormat"
          >
          </el-table-column> -->
          <el-table-column
            prop="lastHeartbeat"
            label="最后一次心跳时间"
            show-overflow-tooltip
            min-width="150"
          >
            <template slot-scope="scope">
              {{
                scope.row.lastHeartbeat == null || scope.row.lastHeartbeat == 0
                  ? ""
                  : $moment(scope.row.lastHeartbeat * 1000).format(
                      "yy-MM-DD HH:mm:ss"
                    )
              }}</template
            >
          </el-table-column>
          <el-table-column
            prop="bootTime"
            label="装置上次启动时间"
            show-overflow-tooltip
            min-width="150"
          >
            <template slot-scope="scope"
              >{{
                scope.row.bootTime == null
                  ? ""
                  : $moment(scope.row.bootTime * 1000).format(
                      "yy-MM-DD HH:mm:ss"
                    )
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="电量/电压"
            show-overflow-tooltip
            min-width="80"
            ><template slot-scope="scope"
              >{{ scope.row.batteryCapacity }} /
              {{ scope.row.batteryVoltage.toFixed(1) }}V</template
            >
          </el-table-column>
          <el-table-column
            prop="signalStrength4g"
            label="4G信号强度"
            show-overflow-tooltip
            min-width="90"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="cmdid"
            label=" 连续工作时间
          剩余运行内存
          剩余存储内存"
            show-overflow-tooltip
            
          >
          </el-table-column> -->

          <!-- <el-table-column
            prop="updateTime"
            label="修改时间"
            :show-overflow-tooltip="true"
            :formatter="dateFormat"
            
          >
          </el-table-column> -->

          <!-- <el-table-column
            prop="createTime"
            label="创建时间"
            :show-overflow-tooltip="true"
            :formatter="dateFormat"
          >
          </el-table-column> -->

          <el-table-column
            fixed="right"
            label="操作"
            width="580"
            v-if="roleUser != 2"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.stop="handleRevisePhoto(scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                type="text"
                @click.native.stop="handlepicture(scope.row)"
                >图片标记</el-button
              >
              <el-button
                type="text"
                @click.native.stop="handleDeviceReset(scope.row)"
                >装置复位</el-button
              >
              <el-button
                type="text"
                @click.native.stop="handleImageCapture(scope.row)"
                >图像参数</el-button
              >
              <el-button
                type="text"
                @click.native.stop="handleVideoCapture(scope.row)"
                >视频参数</el-button
              >
              <el-button
                type="text"
                @click.native.stop="handleShowGPS(scope.row)"
                >获取GPS位置</el-button
              >
              <!-- <el-select
                class="dropgps"
                v-model="gpsvalue"
                placeholder="请选择"
                popper-class="gpsdropbox"
                @change="gpsChange(scope.row)"
              >
                <el-option
                  v-for="item in gpsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
              <el-dropdown
                class="dropgps"
                trigger="click"
                @command="
                  (command) => {
                    handleCommand(command, scope.row);
                  }
                "
              >
                <span class="el-dropdown-link">
                  GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
                  <el-dropdown-item command="open">开启GPS</el-dropdown-item>
                  <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                type="text"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="380" v-else>
            <template slot-scope="scope">
              <el-button
                @click.native.stop="handleRevisePhoto(scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                type="text"
                @click.native.stop="handlepicture(scope.row)"
                >图片标记</el-button
              >

              <el-button
                type="text"
                @click.native.stop="handleShowGPS(scope.row)"
                >获取GPS位置</el-button
              >

              <el-dropdown
                class="dropgps"
                trigger="click"
                @command="
                  (command) => {
                    handleCommand(command, scope.row);
                  }
                "
              >
                <span class="el-dropdown-link">
                  GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
                  <el-dropdown-item command="open">开启GPS</el-dropdown-item>
                  <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                type="text"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <addPhotoDialog
      :photoDialogTitle="photoDialogTitle"
      ref="addPhotoDialogref"
    ></addPhotoDialog>
    <imageCapture ref="imageCaptureref"></imageCapture>
    <videoCapture ref="videoCaptureref"></videoCapture>
    <pictureTags ref="picturetagsref"></pictureTags>
    <gps-position ref="gpsdialog_ref"></gps-position>
  </div>
</template>
<script>
import {
  getTerminalJoggle,
  deleteTerminalJoggle,
  resetTerminalApi,
  setTermGPSJoggle,
} from "@/utils/api/index";
import moment from "moment";
import addPhotoDialog from "./components/addPhotoDialog.vue";
import imageCapture from "./components/imageCapture.vue";
import videoCapture from "./components/videoCapture.vue";
import pictureTags from "./components/pictureTags.vue";
import gpsPosition from "./components/gpsPosition.vue";
export default {
  components: {
    addPhotoDialog,
    imageCapture,
    videoCapture,
    pictureTags,
    gpsPosition,
  },
  data() {
    return {
      roleUser: "",
      terminalTableData: [], //表格数据
      photoDialog: false, //新增弹窗
      photoDialogTitle: "", //弹窗标题
      deleteArr: [], //删除数组
      multipleSelection: [], //当前选中数组
      formphotoInfo: {}, //弹窗传值
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: true,

      gpsOptions: [
        {
          value: "1",
          label: "GPS关闭",
        },
        {
          value: "2",
          label: "GPS开启",
        },
      ],
      gpsvalue: "1",
    };
  },
  methods: {
    ////获取拍照装置列表数据
    terminalList() {
      this.loading = true;
      getTerminalJoggle({
        pageindex: this.page,
        pagesize: this.pageSize,
      })
        .then((res) => {
          console.log(res);
          this.terminalTableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击行选中当前行
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取选中的行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //时间转化
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // 新建弹窗
    handleAddPhoto() {
      this.photoDialogTitle = "新增";
      this.$refs.addPhotoDialogref.display();
      this.$refs.addPhotoDialogref.getdataform(null);
    },
    //handleResive 修改线路数据
    handleRevisePhoto(data) {
      this.photoDialogTitle = "修改";
      this.$refs.addPhotoDialogref.display();
      this.$refs.addPhotoDialogref.getdataform(data);
      console.log(data);
    },
    //装置复位
    handleDeviceReset(data) {
      this.$confirm("此操作将复位装置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetTerminalApi({ cmId: data.cmdId })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  showClose: true,
                  message: "装置已复位",
                  type: "success",
                });
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error",
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取GPS位置
    handleShowGPS(data) {
      this.$refs.gpsdialog_ref.display();
      this.$refs.gpsdialog_ref.getgpsData(data);
      console.log(data);
    },

    //切换gps开启关闭
    changeGPS(val, row) {
      console.log(val, row);
      setTermGPSJoggle({ gpsstatus: val, cmdId: row.cmdId })
        .then((res) => {
          console.log(res);
          if (val == 0) {
            this.$message({
              message: "关闭GPS",
              type: "success",
              showClose: true,
            });
          } else {
            this.$message({
              message: "成功开启GPS",
              type: "success",
              showClose: true,
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    handleCommand(command, row) {
      console.log(command, row);
      switch (command) {
        case "open": //开启
          this.changeGPS(1, row);
          break;
        case "close": //关闭
          this.changeGPS(0, row);
          break;
      }
    },
    //
    // gpsChange(val) {
    //   console.log(val);
    // },
    //图像采集参数
    handleImageCapture(data) {
      this.$refs.imageCaptureref.display();
      this.$refs.imageCaptureref.getSingleAccess(data);
      this.$refs.imageCaptureref.getRatio();
    },
    //视频采集参数
    handleVideoCapture(data) {
      this.$refs.videoCaptureref.display();
      this.$refs.videoCaptureref.getSingleAccess(data);
      this.$refs.videoCaptureref.getRatio();
    },
    //线缆绘制
    handlepicture(data) {
      console.log(data);
      this.$refs.picturetagsref.display(data);
    },

    // //新建弹窗handleAddPhoto
    // handleAddPhoto() {
    //   this.photoDialog = true;
    //   this.photoDialogTitle = "新增";
    // },
    // //修改弹窗handleRevisePhoto
    // handleRevisePhoto(data) {
    //   this.photoDialog = true;
    //   this.photoDialogTitle = "修改";
    //   this.formphotoInfo = Object.assign({}, data);
    // },

    //删除数据
    handleDelete(data) {
      console.log(data);
      this.deleteArr.push({
        termid: data.id,
      });
      console.log(this.deleteArr);
      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 行设置向后台请求删除数据
          deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
            console.log(res);
            this.terminalList(); //刷新
          });
          this.$message({
            type: "success",
            message: "删除成功!",
            showClose: true,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            showClose: true,
          });
        });
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.terminalList(); //刷新
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.terminalList();
    },
  },
  created() {
    this.terminalList();
    this.roleUser = localStorage.getItem("role");
    console.log(this.roleUser);
  },
};
</script>
<style lang="less">
.photoGraphicDevice {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  background: @color-white;
  .photoBox {
    border: 1px solid #dddddd;
    height: calc(100% - 32px);
    padding: 16px;
    border-radius: 4px;
  }
  .photoGraphicBtnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .photoGraphicTable {
    margin-top: 16px;
    height: calc(100% - 48px);
  }
  .dropgps {
    color: @color-primary;
    margin-left: 16px;
    margin-right: 16px;
    cursor: pointer;
    font-size: 12px;
    width: 80px;
    .el-input__inner {
      padding: 0px;
      border: none;
      color: @color-primary;
      font-size: 12px;
      background-color: transparent;
    }
  }
}
.gpsdropbox {
  .el-select-dropdown__item {
    line-height: 27px;
    padding: 0 15px;
    font-size: 12px;
    height: 27px;
  }
}
</style>
