<template>
  <div class="homeBox">
    <div class="filterBox">
      <el-form
        v-show="showDiv"
        :inline="true"
        :model="formdata"
        class="demo-form-inline"
      >
      <div class="topSearch">
        <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"
            >
              {{ item.vname + item.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="杆塔" class="gtbox">
          <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">
            <el-option
              v-for="item in onlineOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="bottomSearch">
        <el-form-item label="出厂ID" class="oidbox">
          <el-input
            v-model="formdata.oidInput"
            placeholder="请输入出厂ID"
            clearable
          ></el-input>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="反选" placement="top">
          <el-checkbox
            v-model="formdata.oidCheck"
            :checked="formdata.oidCheck == 1 ? true : false"
            true-label="1"
            false-label="0"
            ></el-checkbox
          >
        </el-tooltip>
        </el-form-item>
       
        <el-form-item label="装置编号" class="cmdibox">
          <el-input
            v-model="formdata.cmdidInput"
            placeholder="请输入装置编号"
            clearable
          ></el-input>
          <el-tooltip class="item" effect="dark" content="反选" placement="top">
            <el-checkbox
              v-model="formdata.cmdidCheck"
              :checked="formdata.cmdidCheck == 1 ? true : false"
              true-label="1"
              false-label="0"
            ></el-checkbox>
          </el-tooltip>
        </el-form-item>
       
        <el-form-item label="CMA服务器" class="cmabox">
          <el-input
            v-model="formdata.cmaInput"
            placeholder="请输入CMA服务器"
            clearable
          ></el-input>
          <el-tooltip class="item" effect="dark" content="反选" placement="top">
            <el-checkbox
              v-model="formdata.cmaCheck"
              :checked="formdata.cmaCheck == 1 ? true : false"
              true-label="1"
              false-label="0"
            ></el-checkbox>
          </el-tooltip>
        </el-form-item>
        
        <el-form-item label="版本" class="versionbox">
          <el-input
            v-model="formdata.versionInput"
            placeholder="请输入版本"
            clearable
          ></el-input>
          <el-tooltip class="item" effect="dark" content="反选" placement="top">
            <el-checkbox
              v-model="formdata.versionCheck"
              :checked="formdata.versionCheck == 1 ? true : false"
              true-label="1"
              false-label="0"
            ></el-checkbox>
          </el-tooltip>
        </el-form-item>
        <el-form-item class="btngrop">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </div>
      </el-form>
      <el-tooltip
        class="item"
        effect="dark"
        :content="showDiv ? '收起' : '展开'"
        placement="top"
      >
        <el-button
          type="primary"
          class="toggleClass"
          :icon="showDiv ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
          circle
          @click="toggleDiv"
        ></el-button>
      </el-tooltip>
    </div>
    <div
      class="tableBox"
      :style="{ height: showDiv ? 'calc(100% - 102px)' : 'calc(100% - 2px)' }"
    >
      <tableMain :tableData="dataList" :onlineNum="onlineNum" :offlineNum="offlineNum" :noPicNum="noPicNum" v-loading="tableLoaidng"></tableMain>
    </div>
  </div>
</template>
<script>
import { getqueryLineApi, getqueryTermsApi } from "@/utils/api/index";
import tableMain from "./components/tableMain";
export default {
  name: "home",
  components: {
    tableMain,
  },
  data() {
    return {
      showDiv: true, // 控制div的显示与隐藏
      nowTime: new Date().getTime() / 1000,
      xlOptions: [{ id: 0, name: "全部" }], //线路数据
      gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
      onlineOptions: [
        { id: -1, name: "全部" },
        { id: 1, name: "在线" },
        { id: 0, name: "离线" },
      ],
      formdata: {
        lineId: 0,
        towerId: 0,
        isonline: -1,
        oidInput: "",
        oidCheck: 0,
        cmdidInput: "",
        cmdidCheck: 0,
        cmaInput: "",
        cmaCheck: 0,
        versionInput: "",
        versionCheck: 0,
      },
      dataList: [],
      tableLoaidng: false,
      onlineNum: "", //在线数量
      offlineNum: "", //离线数量
      noPicNum:'',//未上传图片数量
    };
  },
  created() {
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
    //this.fetchData(); // 初始化时获取数据
    setInterval(this.fetchData, 60000); // 每10秒刷新数据
  },
  mounted() {
    this.getLineList();
    this.onSubmit();
  },
  watch: {},
  methods: {
    //获取linelist 线路内容
    getLineList() {
      getqueryLineApi()
        .then((res) => {
          console.log(res);
          this.xlOptions = [{ id: 0, name: "全部", vname: "" }];
          this.xlOptions = this.xlOptions.concat(res.data);
          this.formdata.lineId = this.xlOptions[0].id;
        })
        .catch((err) => {});
    },
    //通过线路获取杆塔
    getSearchgt() {
      getqueryLineApi({ lineId: this.formdata.lineId })
        .then((res) => {
          this.gtOptions = [{ id: 0, name: "全部" }];
          this.gtOptions = this.gtOptions.concat(res.data);
          this.formdata.towerId = this.gtOptions[0].id;
        })
        .catch((err) => {});
    },
    onSubmit() {
      this.tableLoaidng = true;
      getqueryTermsApi({
        lineId: this.formdata.lineId,
        towerId: this.formdata.towerId,
        isonLine: this.formdata.isonline,
        fc: 4,
        fn1: "oid",
        fv1: this.formdata.oidInput,
        frev1: this.formdata.oidCheck,
        fn2: "cmdid",
        fv2: this.formdata.cmdidInput,
        frev2: this.formdata.cmdidCheck,
        fn3: "cma",
        fv3: this.formdata.cmaInput,
        frev3: this.formdata.cmaCheck,
        fn4: "version",
        fv4: this.formdata.versionInput,
        frev4: this.formdata.versionCheck,
      })
        .then((res) => {
         
          res.data = res.data.map(item => {  
          
                if (!item.raw_report.pic) {  
                  item.raw_report.pic = 0;  
                }  
                return item;  
              });
              
          if (this.formdata.isonline == "-1") {
            //全部
           this.dataList = res.data;
            // console.log(this.dataList)
          } else if (this.formdata.isonline == "1") {
            //在线
            this.dataList = res.data.filter(
              (item) => this.nowTime - item.last_heartbeat_ts <= 720
            );
            
          } else if (this.formdata.isonline == "0") {
            //离线
            this.dataList = res.data.filter(
              (item) => this.nowTime - item.last_heartbeat_ts > 720
            );
          
          }
          this.onlineNum =this.dataList.filter(
              (item) => this.nowTime - item.last_heartbeat_ts <= 720
            ).length;
            this.offlineNum = this.dataList.length - this.onlineNum
            this.noPicNum =  this.dataList.filter(
              (item) =>  item.raw_report.pic==undefined||item.raw_report.pic==0||item.raw_report.pic==-1
            ).length
          this.tableLoaidng = false;
        })
        .catch((err) => {});
    },
    fetchData() {
      getqueryTermsApi({
        lineId: this.formdata.lineId,
        towerId: this.formdata.towerId,
        isonLine: this.formdata.isonline,
        fc: 4,
        fn1: "oid",
        fv1: this.formdata.oidInput,
        frev1: this.formdata.oidCheck,
        fn2: "cmdid",
        fv2: this.formdata.cmdidInput,
        frev2: this.formdata.cmdidCheck,
        fn3: "cma",
        fv3: this.formdata.cmaInput,
        frev3: this.formdata.cmaCheck,
        fn4: "version",
        fv4: this.formdata.versionInput,
        frev4: this.formdata.versionCheck,
      })
        .then((res) => {
          console.log(res);
          res.data = res.data.map(item => {  
            
                if (!item.raw_report.pic) {  
                  item.raw_report.pic = 0;  
                }  
                return item;  
              });
          if (this.formdata.isonline == "-1") {
            //全部
            this.dataList = res.data;
          } else if (this.formdata.isonline == "1") {
            //在线

            this.dataList = res.data.filter(
              (item) => this.nowTime - item.last_heartbeat_ts <= 720
            );
          } else if (this.formdata.isonline == "0") {
            //离线
            this.dataList = res.data.filter(
              (item) => this.nowTime - item.last_heartbeat_ts > 720
            );
          }
          this.onlineNum =this.dataList.filter(
              (item) => this.nowTime - item.last_heartbeat_ts <= 720
            ).length;
            this.offlineNum = this.dataList.length - this.onlineNum
            this.noPicNum =  this.dataList.filter(
              (item) =>  item.raw_report.pic==undefined||item.raw_report.pic==0||item.raw_report.pic==-1
            ).length
        })
        .catch((err) => {});
    },
    //重置
    onReset() {
      this.formdata = {
        lineId: 0,
        towerId: 0,
        isonline: -1,
        oidInput: "",
        oidCheck: false,
        cmdidInput: "",
        cmdidCheck: false,
        cmaInput: "",
        cmaCheck: false,
        versionInput: "",
        versionCheck: false,
      };
      this.onSubmit();
    },
    //展开收起
    toggleDiv() {
      this.showDiv = !this.showDiv; // 切换showDiv的值
    },
  },
};
</script>
<style lang="less">
.homeBox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  .filterBox {
    position: relative;
    .el-form {
      display: flex;
      // align-items: center;
      // flex-wrap: wrap;
      flex-direction: column;
      .topSearch{
        display:flex;
      }
      .bottomSearch{
        display:flex;
        align-items:center;
        
        .el-form-item--small .el-form-item__label{
          white-space: nowrap;
        }
        .btngrop{
          .el-form-item__content{
            display:flex;
            flex-wrap:nowrap;
          }
        }
      }
      .isonLineClass {
        .el-select {
          width: 80px;
        }
      }
      .oidbox,
      .cmdibox,
      .cmabox,
      .versionbox {
        display: flex;
        align-items: center;
        background: #e9e9e9;
        padding: 0px 12px;
        border-radius: 3px;
        .el-form-item__content {
          display: flex;
          align-items: center;
          .el-input {
            margin-right: 8px;
          }
        }
      }
      .el-form-item__label,
      .el-checkbox {
        color: #333;
      }
    }
    .toggleClass {
      position: absolute;
      right: 0px;
      top: 0px;
      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
      .el-icon-d-arrow-right {
        transform: rotate(-90deg);
      }
    }
  }
  .tableBox {
    //height: calc(100% - 102px);
  }
}
.el-pagination{
    color: #606262; 
    font-weight: normal;
    .el-pager li.active{
      font-weight:800;
    }
}
.el-dialog__headerbtn{
  top:18px;
  .el-dialog__close{
    font-size:26px;
    &:hover{
      background:#e2e2e2;
    }
  }
} 
</style>


