<template>
  <div class="itoperation">
    <div class="deviceBox">
      <div class="photoGraphicBtnGroup">
        <h4>运维管理</h4>

        <div class="itForm">
          <div class="ip">
            <p class="label">I1服务器IP及端口：</p>

            <el-input v-model="ipPort" placeholder=""></el-input>
          </div>
          <div class="ip">
            <p class="label">APP升级URL：</p>
            <el-input v-model="appUrl" placeholder=""></el-input>
          </div>
          <div class="ip">
            <p class="label">日志上传URL：</p>
            <el-input v-model="logUrl" placeholder=""></el-input>
          </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
          >
          <el-button
            type="primary"
            icon="el-icon-setting"
            @click="showColumnOption()"
            >设置列</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="deviceTable">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          stripe
          style="width: 100%"
          height="calc(100% - 40px)"
          v-loading="loading"
          :row-class-name="tableRowClassName"
          highlight-current-row
        >
          <template slot="empty">
            <el-empty :image-size="160" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column label="在线状态" v-if="showColumn.onlineStatus">
            <template slot-scope="scope">{{
              scope.row.onlineStatus == 1 ? "在线" : "离线"
            }}</template>
          </el-table-column>
          <el-table-column label="出厂ID" v-if="showColumn.factoryID">
            <template slot-scope="scope">{{ scope.row.factoryID }}</template>
          </el-table-column>
          <el-table-column label="CMD_ID" v-if="showColumn.cmdID">
            <template slot-scope="scope">{{ scope.row.cmdID }}</template>
          </el-table-column>
          <el-table-column label="快心跳">
            <template slot="header" slot-scope="scope">
              <el-checkbox v-model="isCheckedAll" @change="handleCheckAllChange"
                >快心跳</el-checkbox
              >
            </template>
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.isheartCheck"
                @change="handleheartChange(scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="线路杆塔信息" v-if="showColumn.lineInfo">
            <template slot-scope="scope">{{ scope.row.lineInfo }}</template>
          </el-table-column>
          <el-table-column label="当天拍照数量" v-if="showColumn.dayPicNum">
            <template slot-scope="scope">{{ scope.row.dayPicNum }}</template>
          </el-table-column>
          <el-table-column
            label="当天图片上传数量"
            v-if="showColumn.dayUpPicNum"
          >
            <template slot-scope="scope">{{ scope.row.dayUpPicNum }}</template>
          </el-table-column>
          <el-table-column
            label="最后一次收到I1服务器数据时间"
            v-if="showColumn.lastI1Time"
          >
            <template slot-scope="scope">{{ scope.row.lastI1Time }}</template>
          </el-table-column>
          <el-table-column label="规约信息" v-if="showColumn.protocolInfo">
            <template slot-scope="scope">{{ scope.row.protocolInfo }}</template>
          </el-table-column>
          <el-table-column label="运维版本" v-if="showColumn.operationVersion">
            <template slot-scope="scope">{{
              scope.row.operationVersion
            }}</template>
          </el-table-column>
          <el-table-column label="I1版本" v-if="showColumn.I1Version">
            <template slot-scope="scope">{{ scope.row.I1Version }}</template>
          </el-table-column>
          <el-table-column label="camer版本" v-if="showColumn.camerVersion">
            <template slot-scope="scope">{{ scope.row.camerVersion }}</template>
          </el-table-column>
          <el-table-column label="AI版本" v-if="showColumn.AIVersion">
            <template slot-scope="scope">{{ scope.row.AIVersion }}</template>
          </el-table-column>
          <el-table-column label="I1服务器及端口" v-if="showColumn.I1port">
            <template slot-scope="scope">{{ scope.row.I1port }}</template>
          </el-table-column>
          <el-table-column
            label="安卓每天重启次数"
            v-if="showColumn.restartNum"
          >
            <template slot-scope="scope">{{ scope.row.restartNum }}</template>
          </el-table-column>
          <el-table-column label="充电电压" v-if="showColumn.chargingVoltage">
            <template slot-scope="scope">{{
              scope.row.chargingVoltage
            }}</template>
          </el-table-column>
          <el-table-column label="电池电压" v-if="showColumn.batteryVoltage">
            <template slot-scope="scope">{{
              scope.row.batteryVoltage
            }}</template>
          </el-table-column>
          <el-table-column label="电量" v-if="showColumn.power">
            <template slot-scope="scope">{{ scope.row.power }}</template>
          </el-table-column>
          <el-table-column
            label="I1每天重启次数"
            v-if="showColumn.I1dayStartNum"
          >
            <template slot-scope="scope">{{
              scope.row.I1dayStartNum
            }}</template>
          </el-table-column>
          <el-table-column label="I1网络错误次数" v-if="showColumn.I1ErrorNum">
            <template slot-scope="scope">{{ scope.row.I1ErrorNum }}</template>
          </el-table-column>
          <el-table-column
            label="卡1信号强度"
            v-if="showColumn.card1signalStrength"
          >
            <template slot-scope="scope">{{
              scope.row.card1signalStrength
            }}</template>
          </el-table-column>
          <el-table-column
            label="卡2信号强度"
            v-if="showColumn.card2signalStrength"
          >
            <template slot-scope="scope">{{
              scope.row.card2signalStrength
            }}</template>
          </el-table-column>
          <el-table-column label="卡1_ICCID" v-if="showColumn.card1caaid">
            <template slot-scope="scope">{{ scope.row.card1caaid }}</template>
          </el-table-column>
          <el-table-column label="卡2_ICCID" v-if="showColumn.card2caaid">
            <template slot-scope="scope">{{ scope.row.card2caaid }}</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>
    <el-drawer
      title="选择表格显示的字段"
      :visible.sync="isShowColumn"
      direction="rtl"
      size="20%"
    >
      <div class="body">
        <el-checkbox v-model="checkList.onlineStatus">在线状态</el-checkbox>
        <el-checkbox v-model="checkList.factoryID">出厂ID</el-checkbox>
        <el-checkbox v-model="checkList.cmdID">CMD_ID</el-checkbox>
        <el-checkbox v-model="checkList.lineInfo">线路杆塔信息</el-checkbox>

        <el-checkbox v-model="checkList.dayPicNum">当天拍照数量</el-checkbox>
        <el-checkbox v-model="checkList.dayUpPicNum"
          >当天图片上传数量</el-checkbox
        >
        <el-checkbox v-model="checkList.lastI1Time"
          >最后一次收到I1服务器数据时间</el-checkbox
        >
        <el-checkbox v-model="checkList.protocolInfo">规约信息</el-checkbox>
        <el-checkbox v-model="checkList.operationVersion">运维版本</el-checkbox>
        <el-checkbox v-model="checkList.I1Version">I1版本</el-checkbox>
        <el-checkbox v-model="checkList.camerVersion">camer版本</el-checkbox>
        <el-checkbox v-model="checkList.AIVersion">AI版本</el-checkbox>
        <el-checkbox v-model="checkList.I1port">I1服务器及端口</el-checkbox>
        <el-checkbox v-model="checkList.restartNum"
          >安卓每天重启次数</el-checkbox
        >
        <el-checkbox v-model="checkList.chargingVoltage">充电电压</el-checkbox>
        <el-checkbox v-model="checkList.batteryVoltage">电池电压</el-checkbox>
        <el-checkbox v-model="checkList.power">电量</el-checkbox>
        <el-checkbox v-model="checkList.I1dayStartNum"
          >I1每天重启次数</el-checkbox
        >
        <el-checkbox v-model="checkList.I1ErrorNum">I1网络错误次数</el-checkbox>
        <el-checkbox v-model="checkList.card1SignalStrength"
          >卡1信号强度</el-checkbox
        >
        <el-checkbox v-model="checkList.card2SignalStrength"
          >卡2信号强度</el-checkbox
        >
        <el-checkbox v-model="checkList.card1caaid">卡1_ICCID</el-checkbox>
        <el-checkbox v-model="checkList.card2caaid">卡2_ICCID</el-checkbox>
      </div>
      <div class="footer">
        <el-button size="small" type="primary" plain @click="saveColumn"
          >保存列配置</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getSearchInfo } from "@/utils/api/index";
export default {
  components: {},
  data() {
    return {
      isShowColumn: false,
      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,
      },
      ipPort: "",
      appUrl: "",
      logUrl: "",
      tableData: [
        {
          onlineStatus: 0,
          factoryID: "CSY2023082400001",
          cmdID: "CSYJ2023082400001",
          lineInfo: "1",
          dayPicNum: "2",
          dayUpPicNum: "3",
          lastI1Time: "4",
          protocolInfo: "5",
          operationVersion: "6",
          I1Version: "7",
          camerVersion: "8",
          AIVersion: "9",
          I1port: "1",
          restartNum: "2",
          chargingVoltage: "3",
          batteryVoltage: "4",
          power: "5",
          I1dayStartNum: "6",
          I1ErrorNum: "7",
          card1SignalStrength: "8",
          card2SignalStrength: "9",
          card1caaid: "1",
          card2caaid: "2",
        },
        {
          onlineStatus: 1,
          factoryID: "CSY2023082400001",
          cmdID: "CSYJ2023082400001",
          lineInfo: "1",
          dayPicNum: "2",
          dayUpPicNum: "3",
          lastI1Time: "4",
          protocolInfo: "5",
          operationVersion: "6",
          I1Version: "7",
          camerVersion: "8",
          AIVersion: "9",
          I1port: "1",
          restartNum: "2",
          chargingVoltage: "3",
          batteryVoltage: "4",
          power: "5",
          I1dayStartNum: "6",
          I1ErrorNum: "7",
          card1SignalStrength: "8",
          card2SignalStrength: "9",
          card1caaid: "1",
          card2caaid: "2",
        },
      ],
      checkList: {},
      showColumn: {
        onlineStatus: true,
        factoryID: true,
        cmdID: true,
        lineInfo: true,
        dayPicNum: true,
        dayUpPicNum: true,
        lastI1Time: true,
        protocolInfo: true,
        operationVersion: true,
        I1Version: true,
        camerVersion: true,
        AIVersion: true,
        I1port: true,
        restartNum: true,
        chargingVoltage: true,
        batteryVoltage: true,
        power: true,
        I1dayStartNum: true,
        I1ErrorNum: true,
        card1SignalStrength: true,
        card2SignalStrength: true,
        card1caaid: true,
        card2caaid: true,
      }, //设置显示隐藏列
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: false,
      //全选
      isCheckedAll: false,
    };
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.getSearchdy();
    // 发请求得到checkListInitData的列的名字
    if (localStorage.getItem("columnSet")) {
      this.checkList = JSON.parse(localStorage.getItem("columnSet"));
    } else {
      this.checkList = {
        onlineStatus: true,
        factoryID: true,
        cmdID: true,
        lineInfo: true,
        dayPicNum: true,
        dayUpPicNum: true,
        lastI1Time: true,
        protocolInfo: true,
        operationVersion: true,
        I1Version: true,
        camerVersion: true,
        AIVersion: true,
        I1port: true,
        restartNum: true,
        chargingVoltage: true,
        batteryVoltage: true,
        power: true,
        I1dayStartNum: true,
        I1ErrorNum: true,
        card1SignalStrength: true,
        card2SignalStrength: true,
        card1caaid: true,
        card2caaid: true,
      };
    }
    //添加check
    this.getAdd(this.tableData);
  },
  methods: {
    //获取电压信息
    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();
    },
    //给每条数据添加checkbox
    getAdd(arr) {
      console.log(arr);
      var that = this;
      arr.forEach(function (item, index, array) {
        that.$set(arr[index], "isheartCheck", false);
      });
      console.log(arr);
      return arr;
    },
    //快心跳全选
    handleCheckAllChange(val) {
      console.log(val);
      if (val) {
        console.log("我全选了");
        let mutCheck = [];
        this.tableData.forEach((item) => {
          item.isheartCheck = true;
          mutCheck.push(item.cmdID);
        });
        console.log(mutCheck);
        this.$message({
          message: "全选了快心跳" + mutCheck,
          type: "success",
        });
      } else {
        console.log("我全部取消");
        this.tableData.forEach((item) => {
          item.isheartCheck = false;
        });
      }
      // this.checkedCities = val ? cityOptions : [];
      // this.isIndeterminate = false;
    },
    //快心跳单选
    handleheartChange(val) {
      console.log(val);
    },

    //设置列的显示隐藏
    showColumnOption() {
      this.isShowColumn = true;
    },
    saveColumn() {
      localStorage.setItem("columnSet", JSON.stringify(this.checkList));
      this.isShowColumn = false;
    },
    //选中
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
  },
};
</script>
<style lang="less">
.itoperation {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: @color-white;
  .deviceBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
    .photoGraphicBtnGroup {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .itForm {
        display: flex;
        .ip {
          display: flex;
          margin-right: 12px;
          align-items: center;
          .label {
            font-size: 14px;
            color: #606266;
            width: auto;
          }
          .el-input {
            width: 166px;
          }
        }
      }
    }
    .searchBox {
      margin-top: 8px;
      .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;
          }
        }
      }
    }
  }
  .deviceTable {
    margin-top: 8px;
    height: calc(100% - 40px);
    position: releative;
    .batchBox {
      height: 40px;
      position: absolute;
      line-height: 40px;
      background: #fafafa;
      width: calc(100% - 116px);
      left: 78px;
      z-index: 4;
      top: 55px;
    }
    .el-input--small {
      font-size: 12px;
      .el-input__inner {
        padding: 0px 8px;
      }
    }
  }
  .el-drawer__wrapper {
    .el-drawer__body {
      padding: 0px 20px;
      .body {
        display: flex;
        flex-direction: column;
        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
        }
        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
      .footer {
        width: 100%;
        height: 44px;

        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
