<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
            fixed
            prop="date"
            label="日期"
            width="150"
            v-if="showColumn.date"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120"
            v-if="showColumn.name"
          >
          </el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="120"
            v-if="showColumn.provinces"
          >
          </el-table-column>
          <el-table-column
            prop="city"
            label="市区"
            width="120"
            v-if="showColumn.city"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="300"
            v-if="showColumn.adreess"
          >
          </el-table-column>
          <el-table-column
            prop="zip"
            label="邮编"
            width="120"
            v-if="showColumn.zipCode"
          >
          </el-table-column> -->

          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column label="在线状态" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="出厂ID" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="CMD_ID" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="线路杆塔信息" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column prop="selection" label="快心跳">
            <template slot="header" slot-scope="scope">
              <div>
                <el-checkbox
                  v-model="selection"
                  :indeterminate="isIndeterminate"
                  @click.prevent.stop.native="
                    handleSelectedFn('selection', 'isIndeterminate', scope)
                  "
                  >快心跳
                </el-checkbox>
              </div>
            </template>
            <template slot-scope="scope">
              <div>
                <el-checkbox
                  v-model="scope.row.selection"
                  @click.prevent.stop.native="
                    handleListSelectedFn('selection', 'isIndeterminate', scope)
                  "
                >
                </el-checkbox>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pass" label="是否运维">
            <template slot="header" slot-scope="scope">
              <div>
                <el-checkbox
                  v-model="pass"
                  :indeterminate="isIndeterminate1"
                  @click.prevent.stop.native="
                    handleSelectedFn('pass', 'isIndeterminate1', scope)
                  "
                  >是否运维
                </el-checkbox>
              </div>
            </template>
            <template slot-scope="scope">
              <div>
                <el-checkbox
                  v-model="scope.row.pass"
                  @click.prevent.stop.native="
                    handleListSelectedFn('pass', 'isIndeterminate1', scope)
                  "
                >
                </el-checkbox>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="日志上传">
            <template slot-scope="scope">
              <el-checkbox
                v-model="tableData[scope.$index].isLog"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="升级URL">
            <template slot-scope="scope">
              <el-checkbox
                v-model="tableData[scope.$index].isUpurl"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="重启">
            <template slot-scope="scope">
              <el-checkbox
                v-model="tableData[scope.$index].isReset"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="I1服务器IP及端口">
            <template slot-scope="scope">
              <el-checkbox
                v-model="tableData[scope.$index].isIport"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column label="时间" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>

          <el-table-column label="当天拍照数量" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="当天图片上传数量" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="最后一次收到I1服务器数据时间" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="规约信息" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="运维版本" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="I1版本" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="camer版本" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="AI版本" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="I1服务器及端口" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="安卓每天重启次数" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>

          <el-table-column label="充电电压" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="电池电压" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="电量" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="I1每天重启次数" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="I1网络错误次数" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="卡1信号强度" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="卡2信号强度" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="卡1_ICCID" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <el-table-column label="卡2_ICCID" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</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>
      <el-drawer
        title="选择表格显示的字段"
        :visible.sync="isShowColumn"
        direction="rtl"
        size="20%"
      >
        <div class="body">
          <el-checkbox v-model="checkList.date" disabled>在线状态</el-checkbox>
          <el-checkbox v-model="checkList.name" disabled>出厂ID</el-checkbox>
          <el-checkbox v-model="checkList.provinces" disabled
            >CMD_ID</el-checkbox
          >
          <el-checkbox v-model="checkList.city">线路杆塔信息</el-checkbox>
          <el-checkbox v-model="checkList.adreess">时间</el-checkbox>
          <el-checkbox v-model="checkList.zipCode">当天拍照数量</el-checkbox>
          <el-checkbox v-model="checkList.date">当天图片上传数量</el-checkbox>
          <el-checkbox v-model="checkList.name"
            >最后一次收到I1服务器数据时间</el-checkbox
          >
          <el-checkbox v-model="checkList.provinces">规约信息</el-checkbox>
          <el-checkbox v-model="checkList.city">运维版本</el-checkbox>
          <el-checkbox v-model="checkList.adreess">I1版本</el-checkbox>
          <el-checkbox v-model="checkList.zipCode">camer版本</el-checkbox>
          <el-checkbox v-model="checkList.date">AI版本</el-checkbox>
          <el-checkbox v-model="checkList.name">I1服务器及端口</el-checkbox>
          <el-checkbox v-model="checkList.provinces"
            >安卓每天重启次数</el-checkbox
          >
          <el-checkbox v-model="checkList.city">充电电压</el-checkbox>
          <el-checkbox v-model="checkList.adreess">电池电压</el-checkbox>
          <el-checkbox v-model="checkList.zipCode">电量</el-checkbox>
          <el-checkbox v-model="checkList.date">I1每天重启次数</el-checkbox>
          <el-checkbox v-model="checkList.name">I1网络错误次数</el-checkbox>
          <el-checkbox v-model="checkList.provinces">卡1信号强度</el-checkbox>
          <el-checkbox v-model="checkList.city">卡2信号强度</el-checkbox>
          <el-checkbox v-model="checkList.adreess">卡1_ICCID</el-checkbox>
          <el-checkbox v-model="checkList.zipCode">卡2_ICCID</el-checkbox>
        </div>
        <div class="footer">
          <el-button size="small" type="primary" plain @click="saveColumn"
            >保存列配置</el-button
          >
        </div>
      </el-drawer>
    </div>
  </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: [
        {
          cmdid: "11M00000000000009",
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          selection: false,
          pass: false,
        },
        {
          cmdid: "11M00000000000009",
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          selection: false,
          pass: false,
        },
      ],
      pass: false,
      selection: false,
      isIndeterminate: false,
      isIndeterminate1: false,

      checkList: {},
      showColumn: {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      }, //设置显示隐藏列

      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: 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 = {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      };
    }
  },
  methods: {
    handleSelectedFn(selectionvalue, isIndeterminatevalue, scope) {
      // 点击table头部全选框
      // 头部全选框状态改变
      this[selectionvalue] = !this[selectionvalue];
      // 列表选择框状态改变
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i][selectionvalue] = this[selectionvalue];
        this[isIndeterminatevalue] = false;
      }
      console.log(scope);
    },
    handleListSelectedFn(selectionvalue, isIndeterminatevalue, scope) {
      console.log(selectionvalue, isIndeterminatevalue, scope.row);
      // 点击table列表内的选择框
      // table列表内选择框状态改变
      this.tableData[scope.$index][selectionvalue] =
        !this.tableData[scope.$index][selectionvalue];
      // 判断是否在全选状态下
      let statusSelectio = this.allSelectionFn(selectionvalue);
      if (statusSelectio) {
        // 列表全部被选中,头部变更为选中状态
        this[selectionvalue] = true;
        this[isIndeterminatevalue] = false;
        return false;
      }
      // 列表有选中且非全选，头部全选框待定状态
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i][selectionvalue] === true) {
          this[isIndeterminatevalue] = true;
          return false;
        }
      }
      // 列表有没有选中，头部全选框未选状态
      this[isIndeterminatevalue] = false;
      this[selectionvalue] = false;
    },
    allSelectionFn(selectionvalue) {
      // 判断是否在全选状态下
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i][selectionvalue] !== true) {
          return false;
        }
      }
      return true;
    },
    getTableDataFn() {
      for (let i = 0; i < this.tableData.length; i++) {
        console.log(this.tableData[i]);
        console.log("selection:", this.tableData[i].selection);
        console.log("pass:", this.tableData[i].pass);
      }
    },

    //获取电压信息
    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();
    },
    handleClick(row) {
      console.log(row);
    },
    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>
