<template>
  <div class="photoGraphicDevice">
    <div class="photoBox">
      <div class="photoGraphicBtnGroup">
        <h4>拍照装置管理</h4>
        <div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleAddPhoto()"
            >新增</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-document"
            @click="handleExport()"
            >导出</el-button
          >
        </div>
      </div>
      <div class="searchBox">
        <el-form :inline="true" :model="formdata" class="demo-form-inline">
          <el-form-item label="电压等级" class="dybox">
            <el-select v-model="formdata.dyId" @change="getSearchxl">
              <el-option
                v-for="item in dyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线路名称" class="xlbox">
            <el-select
              v-model="formdata.lineId"
              @change="getSearchgt"
              filterable
            >
              <el-option
                v-for="item in xlOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="杆塔名称">
            <el-select v-model="formdata.towerId" filterable>
              <el-option
                v-for="item in gtOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否在线" class="isonLineClass">
            <el-select v-model="formdata.isonline" filterable>
              <el-option
                v-for="item in onlineOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formdata.search"
              placeholder="请输入线路/杆塔/设备编号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </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"
          highlight-current-row
          :row-key="getRowKeys"
        >
          <el-table-column prop="dyName" label="电压等级" show-overflow-tooltip>
          </el-table-column>

          <template slot="empty">
            <el-empty :image-size="160" description="暂无数据"></el-empty>
          </template>
          <el-table-column
            prop="lineName"
            label="线路名称"
            show-overflow-tooltip
            min-width="120"
          >
            <template slot-scope="scope">
              <el-link @click.native.stop="handleLine(scope.row)">{{
                scope.row.lineName
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="towerName"
            label="杆塔名称"
            show-overflow-tooltip
            min-width="150"
          >
            <template slot-scope="scope">
              <el-link @click.native.stop="handleTower(scope.row)">{{
                scope.row.towerName
              }}</el-link>
            </template>
          </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="devName"
            label="设备类型"
            show-overflow-tooltip
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="protocolName"
            label="规约名称"
            show-overflow-tooltip
            min-width="90"
          />
          <el-table-column
            prop="isonline"
            label="是否在线"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.isonline ? "在线" : "离线" }}</template
            >
          </el-table-column>
          <el-table-column
            prop="hasPan"
            label="是否带云台"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.hasPan == 1 ? "是" : "否" }}</template
            >
          </el-table-column>

          <el-table-column
            prop="netType"
            label="网络类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.netType == 1"> 移动</span>
              <span v-if="scope.row.netType == 2"> 联通</span>
              <span v-if="scope.row.netType == 3"> 电信</span>
            </template>
          </el-table-column>
          <el-table-column prop="sim" label="SIM卡号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="model" label="装置型号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="bsManufacturer"
            label="装置厂家"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="workingDate"
            label="投运日期"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.workingDate == null
                  ? ""
                  : $moment(scope.row.workingDate).format("yy-MM-DD")
              }}</template
            >
          </el-table-column>
          <el-table-column
            prop="status"
            label="装置状态"
            show-overflow-tooltip
            v-if="roleUser != 2"
          >
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? "运行中" : "已删除" }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="340"
            v-if="roleUser != 2"
          >
            <template slot-scope="scope">
              <el-dropdown
                class="dropgps"
                trigger="click"
                @command="
                  (command) => {
                    handleSearchCommand(command, scope.row);
                  }
                "
              >
                <span class="el-dropdown-link">
                  数据查询<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="info">基本信息</el-dropdown-item>
                  <el-dropdown-item command="workStatus"
                    >工作状态</el-dropdown-item
                  >
                  <el-dropdown-item command="runStatus"
                    >运行状态</el-dropdown-item
                  >
                  <el-dropdown-item command="GPS">GPS位置</el-dropdown-item>
                  <el-dropdown-item command="faultInfo"
                    >故障信息报</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                @click.native.stop="handleParameterSet(scope.row)"
                type="text"
                >参数配置</el-button
              >
              <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"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" 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"
                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>

    <pictureTags ref="picturetagsref"></pictureTags>
    <gps-position ref="gpsdialog_ref"></gps-position>
    <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
    <baseInfor ref="baseInfor_ref"></baseInfor>
    <workStatus ref="workStatus_ref"></workStatus>
    <runStatus ref="runStatus_ref"></runStatus>
    <gpsSite ref="gpsSite_ref"></gpsSite>
    <faultInfomation ref="fultInfo_ref"></faultInfomation>
    <!-- 新增线路 -->
    <add-lineDialog ref="addlineDialogref"></add-lineDialog>
    <towerDialog ref="towerDialogref"></towerDialog>
  </div>
</template>
<script>
import {
  getTerminalJoggle,
  deleteTerminalJoggle,
  getSearchInfo,
  getTerminalListExcel,
} from "@/utils/api/index";
import moment from "moment";
import addPhotoDialog from "./components/addPhotoDialog.vue";

import pictureTags from "./components/pictureTags.vue";
import gpsPosition from "./components/gpsPosition.vue";
import parameterSetDialog from "./components/parameterSetDialog.vue";
import baseInfor from "./components/baseInfor.vue";
import workStatus from "./components/workStatus.vue";
import runStatus from "./components/runStatus.vue";
import gpsSite from "./components/gpsSite.vue";
import faultInfomation from "./components/faultInfomation.vue";
import addLineDialog from "./components/addLineDialog.vue";
import towerDialog from "./components/towerDialog.vue";
export default {
  name: "photographicDevice",
  components: {
    addPhotoDialog,
    pictureTags,
    gpsPosition,
    parameterSetDialog,
    baseInfor,
    workStatus,
    runStatus,
    gpsSite,
    addLineDialog,
    towerDialog,
    faultInfomation,
  },
  data() {
    return {
      dyOptions: [{ id: -1, name: "全部" }], //电压数据
      xlOptions: [{ id: -1, name: "全部" }], //线路数据
      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
      onlineOptions: [
        { id: -1, name: "全部" },
        { id: 1, name: "在线" },
        { id: 0, name: "离线" },
      ],
      formdata: {
        dyId: -1,
        lineId: -1,
        towerId: -1,
        search: "",
        isonline: -1,
      },
      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",
    };
  },
  created() {
    this.roleUser = localStorage.getItem("role");
    console.log(this.roleUser);
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
    console.log(this.$route.query);
    this.formdata.search = this.$route.query.name;
    console.log(this.formdata.search);
  },
  mounted() {
    this.getSearchdy();
    this.terminalList();
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    //点击线路跳转
    handleLineLink(val) {
      console.log(val);
      this.$router.push({
        path: "/lineInformation",
        query: { lineName: val.lineName, name: val.towerName },
      });
    },
    //点击杆塔跳转
    handletowerLink(val) {
      console.log(val);
      this.$router.push({
        path: "/towerInformation",
        query: { lineName: val.lineName, name: val.towerName },
      });
    },
    //获取电压信息
    getSearchdy() {
      getSearchInfo({ type: 1 })
        .then((res) => {
          this.dyOptions = [{ id: -1, name: "全部" }];
          this.dyOptions = this.dyOptions.concat(res.data.list);
          this.formdata.dyId = this.dyOptions[0].id;
          this.getSearchxl();
        })
        .catch((err) => {});
    },
    //获取线路数据
    getSearchxl() {
      getSearchInfo({ type: 2, id: this.formdata.dyId })
        .then((res) => {
          this.xlOptions = [{ id: -1, name: "全部" }];
          this.xlOptions = this.xlOptions.concat(res.data.list);
          this.formdata.lineId = this.xlOptions[0].id;
          this.getSearchgt();
        })
        .catch((err) => {});
    },
    //获取杆塔数据
    getSearchgt() {
      getSearchInfo({ type: 3, id: this.formdata.lineId })
        .then((res) => {
          this.gtOptions = [{ id: -1, name: "全部" }];
          this.gtOptions = this.gtOptions.concat(res.data.list);
          this.formdata.towerId = this.gtOptions[0].id;
        })
        .catch((err) => {});
    },

    //查询
    onSubmit() {
      this.page = 1;
      this.terminalList();
    },
    //重置
    onReset() {
      this.formdata = {
        isonline: -1,
      };

      this.getSearchdy();
      this.page = 1;
      this.pageSize = 20;

      this.terminalList();
    },
    ////获取拍照装置列表数据
    terminalList() {
      this.loading = true;
      this.$set(this.formdata, "pageindex", this.page);
      this.$set(this.formdata, "pagesize", this.pageSize);
      getTerminalJoggle(this.formdata)
        .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);
    },
    //导出
    handleExport() {
      window.location.href = "/api/api/getTerminalListExcel";
    },
    handleLine(data) {
      this.$refs.addlineDialogref.display();
      this.$refs.addlineDialogref.getdataform(data);
    },
    handleTower(data) {
      this.$refs.towerDialogref.display();
      this.$refs.towerDialogref.getdataform(data);
    },
    //handleResive 修改线路数据
    handleRevisePhoto(data) {
      this.photoDialogTitle = "修改";
      this.$refs.addPhotoDialogref.display();
      this.$refs.addPhotoDialogref.getdataform(data);
      console.log(data);
    },

    //线缆绘制
    handlepicture(data) {
      console.log(data);
      this.$refs.picturetagsref.display(data);
    },
    //数据查询
    handleSearchCommand(command, row) {
      console.log(command, row);
      switch (command) {
        case "info":
          this.$refs.baseInfor_ref.display(row);
          break;
        case "workStatus":
          this.$refs.workStatus_ref.display(row);
          break;
        case "runStatus":
          this.$refs.runStatus_ref.display(row);
          break;
        case "GPS":
          this.$refs.gpsSite_ref.display(row);
          break;
        case "faultInfo":
          this.$refs.fultInfo_ref.display(row);
          break;
        default:
          break;
      }
    },
    //参数配置
    handleParameterSet(data) {
      this.$refs.parameterSetref.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(data.id);
      console.log(this.deleteArr);
      this.$confirm("确定要删除该装置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 行设置向后台请求删除数据
          deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
            console.log(res);
            this.deleteArr = [];
            this.terminalList(); //刷新
          });
          this.$message({
            duration: 1500,
            type: "success",
            message: "删除成功!",
            showClose: true,
          });
        })
        .catch(() => {
          // this.$message({
          //   duration: 1500,
          //   type: "info",
          //   message: "已取消删除",
          //   showClose: true,
          // });
        });
    },
    // //打开该装置
    // handleOpen(data) {
    //   console.log(data);
    //   this.deleteArr.push({
    //     termid: data.id,
    //   });
    //   console.log(this.deleteArr);
    //   this.$confirm("确定要打开该装置?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "success",
    //   })
    //     .then(() => {
    //       // 行设置向后台请求删除数据
    //       deleteTerminalJoggle({ list: this.deleteArr, type: 1 }).then(
    //         (res) => {
    //           console.log(res);
    //           this.deleteArr = [];
    //           this.terminalList(); //刷新
    //         }
    //       );
    //       this.$message({
    //         duration: 1500,
    //         type: "success",
    //         message: "打开成功!",
    //         showClose: true,
    //       });
    //     })
    //     .catch(() => {
    //       // this.$message({
    //       //   duration: 1500,
    //       //   type: "info",
    //       //   message: "已取消删除",
    //       //   showClose: true,
    //       // });
    //     });
    // },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.terminalList(); //刷新
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.terminalList();
    },
  },
};
</script>
<style lang="less">
.photoGraphicDevice {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;
  .photoBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
    .searchBox {
      .ml10 {
        margin-left: 10px;
      }
      .el-form {
        .dybox {
          .el-form-item__content {
            width: 120px;
          }
        }
        .xlbox {
          .el-form-item__content {
            width: 160px;
          }
        }
        .isonLineClass {
          .el-form-item__content {
            width: 120px;
          }
        }
      }
    }
  }
  .photoGraphicBtnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .searchBox {
    margin-top: 8px;
  }
  .photoGraphicTable {
    // margin-top: 16px;
    //margin-top: 36px;
    height: calc(100% - 94px);
  }
  .dropgps {
    color: #169e8c;
    // margin-left: 16px;
    // margin-right: 16px;
    cursor: pointer;
    font-size: 12px;
    width: 80px;
    .el-input__inner {
      padding: 0px;
      border: none;
      color: #169e8c;
      font-size: 12px;
      background-color: transparent;
    }
  }
}
.gpsdropbox {
  .el-select-dropdown__item {
    line-height: 27px;
    padding: 0 15px;
    font-size: 12px;
    height: 27px;
  }
}
</style>
