/**
*@author:Guoxiaohuan
*@date:2020.06.08
*@info 机房信息主页
*/
<template>
  <div class="compute-box">
    <el-dialog :title="`${systemName}`" :visible.sync="visible" :fullscreen="true">
      <el-tooltip
        class="item"
        effect="dark"
        :content="content"
        placement="top"
        v-if="((type=='floor'&& Object.keys(smsxtArr).length>0) && smsxtArr.smsxt!='0000')||type=='system'"
      >
        <div class="compute-zf" v-if="smsxtArr.smsxt" @click="jumpFloor"></div>
      </el-tooltip>

      <div class="compute-tab">
        <el-tabs v-model="activeName" @tab-click="handleClick" ref="elTabs">
          <el-tab-pane label="机房布置图" name="1" v-if="tableImg.length>0">
            <room-table1 v-if="tableImg.length>=0" :tableImg="tableImg"></room-table1>
          </el-tab-pane>
          <el-tab-pane label="配电室低压柜及出线明细表" name="2" v-if="showLocationflid">
            <div class="compute-center">
              <Select
                width="200"
                @change="Index1Emit(1)"
                v-model="floor2"
                tipPlace="top"
                caption="楼层："
                :selectdata="floorSelect2"
                :placeholder="'请选择'"
                style="margin-right:12px"
              ></Select>
              <el-input
                clearable
                @keyup.enter.native="Index1Emit(1)"
                @blur="Index1Emit(1)"
                v-model="ctbhInput"
                placeholder="搜索抽屉编号"
                size="small"
                prefix-icon="el-icon-search"
                style="width:200px;margin-right:12px"
              ></el-input>
              <el-input
                clearable
                @keyup.enter.native="Index1Emit(1)"
                @blur="Index1Emit(1)"
                v-model="cxggInput"
                placeholder="搜索出线规格"
                size="small"
                prefix-icon="el-icon-search"
                style="width:200px;margin-right:12px"
              ></el-input>
              <el-input
                clearable
                @keyup.enter.native="Index1Emit(1)"
                @blur="Index1Emit(1)"
                v-model="djbhInput"
                placeholder="搜索电井编号"
                size="small"
                prefix-icon="el-icon-search"
                style="width:200px;margin-right:12px"
              ></el-input>
              <el-input
                clearable
                @keyup.enter.native="Index1Emit(1)"
                @blur="Index1Emit(1)"
                v-model="kzhlInput"
                placeholder="搜索控制回路"
                size="small"
                prefix-icon="el-icon-search"
                style="width:200px;margin-right:12px"
              ></el-input>
            </div>
            <room-table2
              ref="roomTable2"
              v-if="table2.length>=0"
              :table2="table2"
              :loading="loading1"
              :page="page1"
              :total="total1"
              :size="size1"
              @Index1Emit="Index1Emit"
            ></room-table2>
          </el-tab-pane>
          <el-tab-pane label="机房内核心设备" name="3">
            <div class="compute-center">
              <el-input
                clearable
                placeholder="搜索设备简称"
                size="small"
                prefix-icon="el-icon-search"
                v-model="sbjcInput"
                @keyup.enter.native="Index2Emit(1)"
                @blur="Index2Emit(1)"
                style="width:200px;margin-right:12px"
              ></el-input>
              <el-input
                clearable
                @keyup.enter.native="Index2Emit(1)"
                @blur="Index2Emit(1)"
                placeholder="搜索品牌型号"
                size="small"
                prefix-icon="el-icon-search"
                v-model="ppxhInput"
                style="width:200px;margin-right:12px"
              ></el-input>
              <!-- <Select
                                width='200'
                                @change='Index2'
                                tipPlace='top'
                                v-model='floorChange'
                                caption='楼层：'
                                :selectdata='floorSelect'
                                :placeholder='"请选择"'
                                style='margin-right:12px'
              ></Select>-->
              <el-input
                clearable
                @keyup.enter.native="Index2Emit(1)"
                @blur="Index2Emit(1)"
                placeholder="搜索生产厂商"
                size="small"
                prefix-icon="el-icon-search"
                v-model="sccsInput"
                style="width:200px;margin-right:12px"
              ></el-input>
            </div>
            <room-table3
              ref="roomTable3"
              v-if="table3.length>=0"
              :table3="table3"
              :systemName="systemName"
              :loading="loading2"
              :page="page2"
              :total="total2"
              :size="size2"
              :location="location"
              @Index2Emit="Index2Emit"
            ></room-table3>
          </el-tab-pane>
          <el-tab-pane label="核心设备日常维保" name="5">
            <div class="compute-center">
              <el-input
                @keyup.enter.native="Index4Emit(1)"
                @blur="Index4Emit(1)"
                clearable
                placeholder="搜索设备名称或内码"
                size="small"
                prefix-icon="el-icon-search"
                v-model="sbmcInput5"
                style="margin-right:12px;width:220px;"
              ></el-input>
              <el-input
                @keyup.enter.native="Index4Emit(1)"
                @blur="Index4Emit(1)"
                clearable
                placeholder="搜索核心维保事项记录描述"
                size="small"
                prefix-icon="el-icon-search"
                v-model="wbsxjlInput5"
                style="margin-right:12px;width:220px;"
              ></el-input>
              <el-input
                @keyup.enter.native="Index4Emit(1)"
                @blur="Index4Emit(1)"
                clearable
                placeholder="搜索任务编号"
                size="small"
                prefix-icon="el-icon-search"
                v-model="rwbhInput5"
                style="margin-right:12px;width:220px;"
              ></el-input>
              <Select
                @change="Index4Emit(1)"
                width="220"
                tipPlace="top"
                v-model="statuSelect5"
                caption="任务状态："
                v-if="status.length>=0"
                :selectdata="status"
                :placeholder="''"
                style="margin-right:12px"
              ></Select>
              <Select
                @change="Index4Emit(1)"
                width="220"
                tipPlace="top"
                v-model="iszcSelect5"
                caption="是否正常："
                v-if="zt.length>=0"
                :selectdata="zt"
                :placeholder="''"
                style="margin-right:12px"
              ></Select>
            </div>
            <div class="dialog-none">
              <div class="input-dialog">
                <div class="input-dialog-top" @click="show">
                  <img src="@/assets/imgs/select.png" />
                  筛选
                </div>
                <div class="input-dialog-form" v-if="dialogFormVisible">
                  <p class="input-dialog-p">任务开始日期</p>
                  <p class="input-dialog-p2">
                    <el-date-picker
                      clearable
                      value-format="yyyyMMdd"
                      type="daterange"
                      size="mini"
                      v-model="rwksrq"
                      style="width:200px"
                      range-separator="-"
                      start-placeholder
                      end-placeholder
                    ></el-date-picker>
                  </p>

                  <p class="input-dialog-p">任务完成日期</p>
                  <p class="input-dialog-p2">
                    <el-date-picker
                      clearable
                      value-format="yyyyMMdd"
                      type="daterange"
                      size="mini"
                      v-model="rwwcrq"
                      style="width:200px"
                      range-separator="-"
                      start-placeholder
                      end-placeholder
                    ></el-date-picker>
                  </p>
                  <!-- <el-input
                                @change='Index4'
                                clearable
                                placeholder='异常工单编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='ycgdbhInput5'
                                style='margin-right:12px;width:220px;'
                  ></el-input>-->
                  <p class="input-dialog-p">异常工单编号</p>
                  <p class="input-dialog-p2">
                    <el-input
                      clearable
                      placeholder="异常工单编号"
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="ycgdbhInput5"
                      style="width:200px;"
                    ></el-input>
                  </p>
                  <p class="input-dialog-p">异常工单填报日期</p>
                  <p class="input-dialog-p2">
                    <el-date-picker
                      clearable
                      value-format="yyyyMMdd"
                      type="daterange"
                      size="mini"
                      v-model="ycgdtbsj"
                      style="width:200px"
                      range-separator="-"
                      start-placeholder
                      end-placeholder
                    ></el-date-picker>
                  </p>
                  <p class="input-dialog-p">异常工单验收日期</p>
                  <p class="input-dialog-p2">
                    <el-date-picker
                      clearable
                      value-format="yyyyMMdd"
                      type="daterange"
                      size="mini"
                      style="width:200px"
                      range-separator="-"
                      start-placeholder
                      end-placeholder
                      v-model="ycgdyssj"
                    ></el-date-picker>
                  </p>
                  <p class="input-dialog-foot">
                    <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                    <el-button type="primary" @click="confirm2" size="mini">确 定</el-button>
                  </p>
                </div>
              </div>
            </div>
            <room-table5
              ref="roomTable5"
              v-if="table5.length>=0"
              :table5="table5"
              :loading="loading4"
              :page="page4"
              :total="total4"
              :size="size4"
              @Index4Emit="Index4Emit"
            ></room-table5>
          </el-tab-pane>
          <el-tab-pane label="核心设备日常维修" name="4">
            <div class="compute-center">
              <el-input
                placeholder="搜索设备名称或内码"
                size="small"
                @keyup.enter.native="Index3Emit(1)"
                @blur="Index3Emit(1)"
                clearable
                prefix-icon="el-icon-search"
                v-model="sbjc"
                style="width:192px;margin-right:12px"
              ></el-input>
              <el-input
                placeholder="搜索位置名称或内码"
                size="small"
                @keyup.enter.native="Index3Emit(1)"
                @blur="Index3Emit(1)"
                clearable
                prefix-icon="el-icon-search"
                v-model="wzjc"
                style="width:192px;margin-right:12px"
              ></el-input>

              <el-input
                placeholder="搜索描述"
                size="small"
                clearable
                @keyup.enter.native="Index3Emit(1)"
                @blur="Index3Emit(1)"
                prefix-icon="el-icon-search"
                v-model="matters"
                style="width:192px;margin-right:12px"
              ></el-input>
              <el-input
                placeholder="搜索工单编号"
                size="small"
                clearable
                @keyup.enter.native="Index3Emit(1)"
                @blur="Index3Emit(1)"
                prefix-icon="el-icon-search"
                v-model="wonum2"
                style="width:192px;margin-right:12px"
              ></el-input>
              <Select
                @change="confirmMore"
                @confirm="confirmMore"
                style="margin-right:12px;"
                v-model="statue"
                width="200"
                tipPlace="top"
                caption="任务状态描述："
                multiple
                :selectdata="statusOption"
              ></Select>
              <Select
                @change="Index3Emit(1)"
                style="margin-right:12px;"
                v-model="source"
                width="180"
                tipPlace="top"
                caption="报修来源："
                :selectdata="sourceOption"
              ></Select>
            </div>
            <div class="dialog-none">
              <div class="input-dialog">
                <div class="input-dialog-top" @click="show">
                  <img src="@/assets/imgs/select.png" />
                  筛选
                </div>
                <div class="input-dialog-form" v-if="dialogFormVisible">
                  <el-form style=" padding: 20px 24px;">
                    <p style="margin:16px 0 8px 0">要求完成日期</p>
                    <el-date-picker
                      clearable
                      style="width:232px"
                      v-model="inputForm.reportdate"
                      value-format="yyyyMMdd"
                      type="daterange"
                      size="small"
                      range-separator="-"
                      start-placeholder
                      end-placeholder
                    ></el-date-picker>
                    <p style="margin:16px 0 8px 0">实际完工日期</p>
                    <el-date-picker
                      clearable
                      style="width:232px"
                      v-model="inputForm.real"
                      value-format="yyyyMMdd"
                      type="daterange"
                      size="small"
                      range-separator="-"
                      start-placeholder
                      end-placeholder
                    ></el-date-picker>
                    <!-- <p style="margin:16px 0 8px 0">位置名称编号</p>
                    <el-input
                      placeholder="搜索位置名称编号"
                      size="small"
                      clearable
                      prefix-icon="el-icon-search"
                      v-model="inputForm.locationName"
                      style="width:232px;margin-right:12px"
                    ></el-input>-->
                    <p style="margin:16px 0 8px 0">搜索执行人</p>
                    <el-input
                      placeholder="搜索执行人"
                      size="small"
                      clearable
                      prefix-icon="el-icon-search"
                      v-model="inputForm.people"
                      style="width:192px;margin-right:12px"
                    ></el-input>
                  </el-form>
                  <div style="position:absolute;bottom:14px;right:24px;z-index:9999">
                    <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="confirm" size="small">确 定</el-button>
                  </div>
                </div>
              </div>
            </div>
            <room-table4
              ref="roomTable4"
              v-if="table4.length>=0"
              :table4="table4"
              :loading="loading3"
              :page="page3"
              :total="total3"
              :size="size3"
              :sjjssj="sjjssj"
              @Index3Emit="Index3Emit"
            ></room-table4>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import { queryEquipmentList, queryWxzy } from "@/api/equipmentList.js";
import {
  queryDygjcxline,
  queryHxsb,
  queryWxjf,
  queryWb,
  querySystem
} from "@/api/room.js";
import roomTable1 from "./room1";
import roomTable2 from "./room2";
import roomTable3 from "./room3";
import roomTable4 from "./room4";
import roomTable5 from "./room5";
import { mapGetters } from "vuex";
import { querySelect, queryPic } from "@/api/public.js";
import { Select } from "meri-design";

export default {
  data() {
    return {
      content: "",
      activeName: "1",
      location: "",
      visible: false,
      dialogFormVisible: false,
      systemName: "",
      loading: true,
      loading1: true,
      loading2: true,
      loading3: true,
      loading4: true,
      table2: [],
      table3: [],
      table4: [],
      table5: [],
      showLocationflid: false,
      //
      total: 0,
      page: 1,
      size: 10,
      picFloor: "",
      tableImg: [],
      //
      total1: 0,
      page1: 1,
      size1: 10,
      floor2: "全部",
      ctbhInput: "",
      cxggInput: "",
      djbhInput: "",
      kzhlInput: "",
      //
      total2: 0,
      page2: 1,
      size2: 10,
      sccsInput: "",
      ppxhInput: "",
      sbjcInput: "",
      // floorChange: '',
      //
      total3: 0,
      page3: 1,
      size3: 11,
      tbsjDate: "",
      yssjDate: "",
      sbjc: "",
      matters: "",
      wonum2: "",
      wonum: "",
      sourceOption: [],
      source: "全部",
      people: "",
      // 是否更换配件
      isReplaceData: [
        { id: "全部", name: "全部" },
        { id: "1", name: "是" },
        { id: "0", name: "否" }
      ],
      sfghSelect: "全部",
      sbmcInput4: "",
      sbbhInput4: "",
      zysxInput4: "",
      msInput4: "",
      gdbhInput4: "",
      type1: "wx",

      //
      total4: 0,
      page4: 1,
      size4: 11,
      searVal: "",
      status: [],
      allArr: [{ id: "全部", name: "全部" }],
      zt: [
        { id: "全部", name: "全部" },
        { id: "正常", name: "正常" },
        { name: "异常", id: "异常" }
      ],
      sbmcInput5: "",
      sbbhInput5: "",
      wbsxjlInput5: "",
      rwbhInput5: "",
      ycgdbhInput5: "",
      ssmsInput5: "",
      iszcSelect5: "全部",
      statuSelect5: "全部",
      rwksrq: "",
      rwwcrq: "",
      ycgdtbsj: "",
      ycgdyssj: "",
      smsxtArr: {},
      type: "",
      inputForm: {
        reportdate: "",
        real: "",
        locationName: "",
        people: ''
      },
      sjjssj: "",
      real: "",
      statue: [],
      getStatue: [
        "新建",
        "待派工",
        "已派工",
        "待验收",
        "验收通过",
        "工单执行退回",
        "问题待解决",
        "执行中"
      ], //默认选项如果statusOption存在则写入statue中
      wzjc: "",
      statusOption: []
    };
  },
  components: {
    roomTable1,
    roomTable2,
    roomTable3,
    roomTable4,
    roomTable5
  },
  computed: {
    ...mapGetters(["floorSelect", "plazaId"])
  },
  methods: {
      /**
       * @description 清楚筛选条件
       * @param {number} key 点击的tab页
       *    1 : 机房布置图,
            2 : 配电室低压柜及出线明细表,
            3 : 机房内核心设备,
            5: 核心设备日常维保,
            4 : 核心设备日常维修
       */
    clearQuery(key){
        switch (key) {
            case 2:
                let arr2 = ['ctbhInput','cxggInput','djbhInput','kzhlInput','floor2']
                arr2.map(item => this[item] = '')
                break;
            case 3:
                let arr3 = ['sbjcInput','ppxhInput','sccsInput']
                arr3.map(item => this[item] = '')
                break;
            case 5:
                let arr5 = ['sbmcInput5','wbsxjlInput5','rwbhInput5','rwksrq','rwwcrq','ycgdbhInput5','ycgdtbsj','ycgdyssj']
                this.statuSelect5 = '全部'
                this.iszcSelect5 = '全部'
                arr5.map(item => this[item] = '')
                break;
            case 4:
                let arr4 = ['sbjc','wzjc','matters','wonum2','reportdate','real','people']
                this.source = '全部'
                arr4.map(item => this[item] = '')
                this.$set(this.inputForm,'reportdate','')  //要求完成日期
                this.$set(this.inputForm,'real','') //时间完成日期
                this.$set(this.inputForm,'people','') //搜索执行人
                break;
            default:
                break;
        }
    },
    handleClick(tab) {
        // 关闭右侧筛选弹窗
        this.dialogFormVisible = false
        const tabDict = {
            '机房布置图': 1,
            '配电室低压柜及出线明细表': 2,
            '机房内核心设备': 3,
            '核心设备日常维修': 4,
            '核心设备日常维保' :5
        }
        // 清空筛选条件
        this.clearQuery(tabDict[tab.label])
        if (tab.label == "机房布置图") {
            this.Index(this.smsxtArr.smsxt);
        } else if (tab.label == "配电室低压柜及出线明细表") {
            this.Index1Emit(1);
            this.$refs.roomTable2.computedHeight();
        } else if (tab.label == "机房内核心设备") {
            this.Index2();
            this.$refs.roomTable3.computedHeight();
        } else if (tab.label == "核心设备日常维修") {
            this.changeSelect("核心设备日常维修");
            // this.$refs.roomTable4.computedHeight();
        } else if (tab.label == "核心设备日常维保") {
            this.changeSelect("核心设备日常维保");
            this.$refs.roomTable5.computedHeight();
        }
    },
    // 右上角的筛选点击按钮
    show() {
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    Index(system) {
      this.picFloor = this.$cookie.get("floorNow");
      let getParams = {
        typename: "位置布置图",
        location: this.location,
        module: "1002",
        // system: system,
        plazaId: this.plazaId
      };
      if (system) {
        getParams.system = system;
      }
      queryPic({ getParams }).then(res => {
        //console.log('机房布置图', res)
        this.tableImg = res.data ? res.data : [];
        //判断有没有图片，有图片默认显示按钮是第一个tab，没有图片显示的是第二个tab
        if (this.tableImg.length > 0) {
          this.activeName = "1";
        } else if (this.showLocationflid) {
          this.activeName = "2";
          this.Index1();
        } else {
          this.activeName = "3";
          this.Index2();
        }
      });
    },
    // 明细表
    Index1() {
      let getParams = {
        location: this.location,
        plazaId: this.plazaId,
        page: this.page1,
        size: this.size1
      };
      if (this.floor2 && this.floor2 != "全部") {
        getParams.floor = this.floor2;
      }
      if (this.ctbhInput) {
        if (getParams.keyword) {
          getParams.keyword = `${getParams.keyword +
            ";" +
            this.ctbhInput}:drawernum`;
        } else {
          getParams.keyword = `${this.ctbhInput}:drawernum`;
        }
      }
      if (this.cxggInput) {
        if (getParams.keyword) {
          getParams.keyword = `${getParams.keyword +
            ";" +
            this.cxggInput}:outspec`;
        } else {
          getParams.keyword = `${this.cxggInput}:outspec`;
        }
      }
      if (this.djbhInput) {
        if (getParams.keyword) {
          getParams.keyword = `${getParams.keyword +
            ";" +
            this.djbhInput}:wellnum`;
        } else {
          getParams.keyword = `${this.djbhInput}:wellnum`;
        }
      }
      if (this.kzhlInput) {
        if (getParams.keyword) {
          getParams.keyword = `${getParams.keyword +
            ";" +
            this.kzhlInput}:control`;
        } else {
          getParams.keyword = `${this.kzhlInput}:control`;
        }
      }
      queryDygjcxline({ getParams }).then(res => {
        if (res.result == "success") {
          this.loading1 = false;
          this.total1 = res.count;
          this.table2 = res.data ? res.data : [];
          //console.log('明细表', res)
          if (this.table2.length == 0) {
          }
        }
      });
    },
    // 核心设备
    Index2() {
      let postParams = {
        location: this.location,
        system_code: this.smsxtArr.smsxt
      };
      let data = {
        plazaId: this.plazaId,
        page: this.page2,
        size: this.size2
      };
      if (this.smsxtArr.smsxt != "1008") {
        data.onlyMainAsset = true;
      }
      if (this.sbjcInput) {
        if (data.keyword) {
          data.keyword = `${data.keyword + ";" + this.sbjcInput}:type_name`;
        } else {
          data.keyword = `${this.sbjcInput}:type_name`;
        }
      }
      if (this.ppxhInput) {
        if (data.keyword) {
          data.keyword = `${data.keyword + ";" + this.ppxhInput}:brand,sbxh`;
        } else {
          data.keyword = `${this.ppxhInput}:brand,sbxh`;
        }
      }
      if (this.sccsInput) {
        if (data.keyword) {
          data.keyword = `${data.keyword + ";" + this.sccsInput}:manufacturer`;
        } else {
          data.keyword = `${this.sccsInput}:manufacturer`;
        }
      }
      // if (this.floorChange) {
      //     postParams.gcname = this.floorChange
      // }
      queryHxsb({ data, postParams }).then(res => {
        this.loading2 = false;
        this.total2 = res.data.count;
        this.table3 = res.data.data ? res.data.data : [];
      });
    },
    Index1Emit(val) {
      this.page1 = val;
      this.Index1();
    },
    Index2Emit(val) {
      this.page2 = val;
      this.Index2();
    },
    Index3Emit(val) {
      this.page3 = val;
      this.Index3();
    },
    confirmMore(val) {
      const arr = [];
      val.forEach(item => {
        arr.push(item.id);
      });
      this.statue = arr;
      this.Index3Emit(1);
    },
    Index4Emit(val) {
      this.page4 = val;
      this.Index4();
    },
    // 机房维修记录
    Index3() {
      let getParams = {
        data: {
          smsxt: this.smsxtArr.smsxt,
          // diff: this.diff,
          plazaId: this.plazaId,
          page: this.page3,
          size: this.size3
        }
      };
      if (this.smsxtArr.smsxt != "1008") {
        getParams.data.onlyMainAsset = true;
      }

      //下拉
      // 监听下拉框
      if (this.reportdate) {
        getParams.data.schedfinishStartDate = this.reportdate[0] + "000000";
        // getParams.data.schedfinishEndDate = this.reportdate[1] + "000000";
        getParams.data.schedfinishEndDate = moment(this.reportdate[1]).format('YYYYMMDD235959')
      }
      if (this.real) {
        getParams.data.wotjyssjStartDate = this.real[0] + "000000";
        // getParams.data.wotjyssjEndDate = this.real[1] + "000000";
        getParams.data.wotjyssjEndDate = moment(this.real[1]).format('YYYYMMDD235959')
      }
      if (this.source && this.source != "全部") {
        // getParams.data.bxfwlymc = this.source;
        getParams.data.bxfwly = this.source;
      }
      //   if (this.statue && this.statue != "全部") {
      //     getParams.data.status = this.statue;
      //   }

      //输入框搜索
      getParams.data.keyword = "";
      if (this.sbjc) {
        getParams.data.keyword += `${this.sbjc}:sbmc,assetnum;`;
      }
      if (this.wzjc) {
        getParams.data.keyword += `${this.wzjc}:wzjc,location;`;
      }
      if (this.matters) {
        getParams.data.keyword += `${this.matters}:description;`;
      }
      if (this.locationName) {
        getParams.data.keyword += `${this.locationName}:location`;
      }
      if (this.wonum2) {
        getParams.data.keyword += `${this.wonum2}:wonum;`;
      }
      if (this.people) {
        getParams.data.keyword += `${this.people}:lead;`;
      }
      if (getParams.data.keyword == "") {
        delete getParams.data.keyword;
      }
      if(this.statue.length){
      const data = {
        status: this.statue
      };
      getParams.getParams = data;
      }
      queryWxzy(getParams).then(res => {
        console.log('data4',res)
        this.loading4 = false;
        this.total3 = res.data.count || 0;
        this.table4 = res.data.data ? res.data.data : []
      });
    },
    // 机房维保记录
    Index4() {
      let data = {
        location: this.location,
        plazaId: this.plazaId,
        page: this.page4,
        size: this.size4,
        orderBy: "wb_gzglid,0;assetnum,1;reportedby,0;",
        smsxt: this.smsxtArr.smsxt
      };
      if (this.smsxtArr.smsxt != "1008") {
        data.onlyMainAsset = true;
      }
      //
      // 任务开始日期
      if (this.rwksrq) {
        data.sjkssjStartDate = this.rwksrq[0] + "000000";
        // data.sjkssjEndDate = this.rwksrq[1] + "000000";
        data.sjkssjEndDate = moment(this.rwksrq[1]).format('YYYYMMDD235959')
      }
      // 任务完成日期
      if (this.rwwcrq) {
        data.sjwcsjStartDate = this.rwwcrq[0] + "000000";
        // data.sjwcsjEndDate = this.rwwcrq[1] + "000000";
        data.sjwcsjEndDate = moment(this.rwwcrq[1]).format('YYYYMMDD235959')
      }
      // 异常工单填报时间
      if (this.ycgdtbsj) {
        data.reportdateStartDate = this.ycgdtbsj[0] + "000000";
        // data.reportdateEndDate = this.ycgdtbsj[1] + "000000";
        data.reportdateEndDate = moment(this.ycgdtbsj[1]).format('YYYYMMDD235959')
      }
      // 异常工单验收时间
      if (this.ycgdyssj) {
        data.sjjssjStartDate = this.ycgdyssj[0] + "000000";
        // data.sjjssjEndDate = this.ycgdyssj[1] + "000000";
        data.sjjssjEndDate = moment(this.ycgdyssj[1]).format('YYYYMMDD235959')
      }
      //
      // 是否正常
      if (this.iszcSelect5 && this.iszcSelect5 != "全部") {
        data.zt = this.iszcSelect5;
      }
      // 任务状态
      if (this.statuSelect5 && this.statuSelect5 != "全部") {
        data.status = this.statuSelect5;
      }
      if (this.sbmcInput5) {
        if (data.keyword) {
          data.keyword = `${data.keyword +
            ";" +
            this.sbmcInput5}:sbmc,assetnum;`;
        } else {
          data.keyword = `${this.sbmcInput5}:sbmc,assetnum;`;
        }
      }
      if (this.wbsxjlInput5) {
        if (data.keyword) {
          data.keyword = `${data.keyword + ";" + this.wbsxjlInput5}:matters;`;
        } else {
          data.keyword = `${this.wbsxjlInput5}:matters,description;`;
        }
      }
      if (this.rwbhInput5) {
        if (data.keyword) {
          data.keyword = `${data.keyword + ";" + this.rwbhInput5}:wb_gzglid;`;
        } else {
          data.keyword = `${this.rwbhInput5}:wb_gzglid;`;
        }
      }
      if (this.ycgdbhInput5) {
        if (data.keyword) {
          data.keyword = `${data.keyword + ";" + this.ycgdbhInput5}:wonum;`;
        } else {
          data.keyword = `${this.ycgdbhInput5}:wonum;`;
        }
      }
      queryWb({ getParams: data }).then(res => {
        //console.log('维保', res)
        this.loading4 = false;
        this.total4 = res.count;
        this.table5 = res.data ? res.data : [];
      });
    },
    confirm() {
      this.dialogFormVisible = false
      this.reportdate = this.inputForm.reportdate;
      this.sjjssj = this.inputForm.real;
      this.real = this.inputForm.real;
      this.locationName = this.inputForm.locationName;
      this.people = this.inputForm.people;
      this.Index3Emit(1);
    },
    confirm2() {
      this.dialogFormVisible = false
      this.Index4Emit(1);
    },
    // 下拉框数据
    changeSelect(val) {
      // 1保修来源
      let postParams = [
        {
          columnName: { bxfwly: "bxfwlymc" },
          params: {
            smsxt: this.smsxtArr.smsxt
          },
          tableName: "sms_wxzy" //视图名称
        }
      ];
      let data = {
        plazaId: this.plazaId
      };
      if (this.smsxtArr.smsxt != "1008") {
        data.onlyMainAsset = true;
      }
      querySelect({ data, postParams }).then(res => {
        //console.log(res)
        let bxfwlymc =
          res.data && res.data.data && res.data.data.sms_wxzy
            ? res.data.data.sms_wxzy.bxfwly
            : [];
        this.sourceOption = [];
        this.sourceOption.push({
          name: "全部",
          id: "全部"
        });
        bxfwlymc.forEach(el => {
          this.sourceOption.push({
            name: el.value,
            id: el.key
          });
        });
      });
      // 2维修任务状态

      let postParams2 = [
        {
          columnName: { status: "status" },
          params: {
            smsxt: this.smsxtArr.smsxt
          },
          tableName: "sms_wxzy" //视图名称
        }
      ];
      querySelect({ data, postParams: postParams2 }).then(res => {
        let bxfwlymc =
          res.data && res.data.data && res.data.data.sms_wxzy
            ? res.data.data.sms_wxzy.status
            : [];
        this.statusOption = [];
        // this.statusOption.push({
        //   name: "全部",
        //   id: "全部"
        // });
        bxfwlymc.forEach(el => {
          this.statusOption.push({
            name: el.value,
            id: el.key
          });
        });
        let statue = [];
        this.statusOption.forEach(item => {
          if (this.getStatue.includes(item.id)) {
            statue.push(item.id);
          }
        });
        this.statue = statue;
        if (val == "核心设备日常维修") {
          this.Index3Emit(1);
          this.$refs.roomTable4.computedHeight();
        } else {
          this.Index4Emit(1);
        }
      });
      // 2维保任务状态
      let postParams3 = [
        {
          columnName: { status: "status" },
          params: {
            smsxt: this.smsxtArr.smsxt
          },
          tableName: "sms_wbzy" //视图名称
        }
      ];
      querySelect({ data, postParams: postParams3 }).then(res => {
        let status =
          res.data && res.data.data && res.data.data.sms_wbzy
            ? res.data.data.sms_wbzy.status
            : [];
        this.status = [];
        this.status.push({
          name: "全部",
          id: "全部"
        });
        status.forEach(el => {
          this.status.push({
            name: el.value,
            id: el.key
          });
        });
      });
    },
    // 查询楼层功能下的机房属于哪类设备
    init() {
      this.smsxtArr = {};
      let params = {
        getParams: {
          locationid: this.location,
          plazaId: this.plazaId
        }
      };
      querySystem(params).then(res => {
        this.smsxtArr = res.data ? res.data[0] : {};
        // 5201 设备间   5204设备间  5209设备间
        this.showLocationflid = false;
        if (Object.keys(this.smsxtArr).length > 0) {
          let locationflid = this.smsxtArr.locationflid;
          if (
            locationflid == "5201" ||
            locationflid == "5204" ||
            locationflid == "5209"
          ) {
            this.showLocationflid = true;
          }
        }
        this.Index(this.smsxtArr.smsxt);
        this.content = `查看${this.$cookie.get("floorNow")}层${
          this.smsxtArr.smsxtname
        }分布图`;
      });
    },
    // 打开机房弹框
    open(name) {
      this.visible = true;
      this.systemName = name.name;
      this.location = name.location;
      this.type = name.type;
      if (name.type == "floor") {
        this.init();
      } else if (name.type == "system") {
        let floor = this.$cookie.get("floorNow");
        this.content = `查看${floor}层楼层功能图`;
        this.init();
        // this.Index(null)
      }
    },
    // 初始化page页
    initPage() {
      this.page1 = 1;
      this.page2 = 1;
      this.page3 = 1;
      this.page4 = 1;
    },
    // 机房右上角的跳转 如果是在楼层功能打开的机房则要跳转到设备设施对应的系统\楼层 反之亦然
    jumpFloor() {
      // if (this.smsxtArr.smsxt) {
      this.initPage();
      if (location.pathname.split("/")[3] == "equipment") {
        this.$cookie.set("categoryId", "LCGN", 3);
        this.$store.commit("SETCATEGORYID", "LCGN");
        this.$router.push({ path: "/home/floorFunc" });
      } else {
        this.$router.push({
          path: "/home/equipment",
          query: { smsxt: this.smsxtArr.smsxt }
        });
      }
      // }
    }
  },
  mounted() {
    if (this.floorSelect.length > 0) {
      this.floorSelect2 = this.allArr.concat(this.floorSelect);
    }
  },
  watch: {
    visible(val) {
      // 关闭弹窗，page初始化为1
      if (!val) {
        this.initPage();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.compute-box {
  /deep/ .el-dialog__title {
    color: #fff;
  }
  .compute-zf {
    width: 15px;
    height: 13px;
    background: url("../../assets/imgs/zffz.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 74px;
    top: 24px;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      top: -2px;
      right: -16px;
      width: 1px;
      height: 15px;
      background: rgba(216, 216, 216, 1);
    }
  }
  .picker-box {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 32px;
    box-sizing: border-box;
    margin-right: 12px;
    .picker-span {
      margin-right: 6px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
  .compute-span {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
  }
  .compute-center {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }
  //
  .dialog-none {
    width: 100px;
    position: absolute;
    right: 0;
    .input-dialog {
      .input-dialog-top {
        // color: #c3c7cb;
        cursor: pointer;
        position: absolute;
        top: -45px;
        right: 0px;
      }
      .input-dialog-form {
        padding: 10px 24px 40px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(195, 199, 203, 1);
        z-index: 99999;
        position: absolute;
        top: -20px;
        right: 0px;
      }
      .input-dialog-p {
        margin-bottom: 8px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(100, 108, 115, 1);
        line-height: 22px;
      }
      .input-dialog-p2 {
        margin-bottom: 16px;
      }
    }
    .input-dialog-foot {
      // margin-bottom: 16px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .compute-tab {
    padding-top: 16px;
    height: 100%;
  }
}
</style>
<style lang="less">
.compute-box {
  .el-dialog__header {
    padding: 16px 24px;
    background: linear-gradient(
      180deg,
      rgba(54, 156, 247, 1) 0%,
      rgba(2, 91, 170, 1) 100%
    );
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  /deep/ .el-dialog__body {
    padding: 0 24px;
    height: calc(100% - 57px);
    .is-active {
      background: rgba(2, 91, 170, 0.15);
    }
  }
  .compute-tab {
    /deep/ .el-dialog {
      // padding: 16px 20px 20px;
      overflow: hidden;
      .el-dialog__header {
        padding: 0;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        // color: rgba(0, 0, 0, 0.85);
        height: 60px;
        line-height: 60px;
        // background: #f1f2f2;
        padding-left: 20px;
        // padding-bottom: 16px;
      }
      .el-dialog__headerbtn {
        top: 0;
      }
    }

    .el-dialog__title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 60px;
    }
    .el-dialog__body {
      padding: 0 24px;
    }

    .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
    .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
      padding-left: 16px;
    }
    .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
    .el-tabs--bottom .el-tabs__item.is-top:last-child,
    .el-tabs--top .el-tabs__item.is-bottom:last-child,
    .el-tabs--top .el-tabs__item.is-top:last-child {
      padding-right: 16px;
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
    .el-tabs__item {
      padding: 5px 16px;
      height: 30px;
      line-height: 22px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(31, 36, 41, 1);
      border: 1px solid rgba(195, 199, 203, 1);
    }
    /deep/ .el-tabs__item:last-child {
      border-radius: 0px 4px 4px 0px;
    }
    /deep/ .el-tabs__item:nth-child(2) {
      border-radius: 4px 0px 0px 4px;
    }
    .el-tabs {
      height: 100%;
    }
    .el-tabs__content {
      height: calc(100% - 45px);
      /deep/ .el-tab-pane {
        height: 100% !important;
        .compute-item {
          height: calc(100% - 44px);
          .compute-table {
            height: calc(100% - 71px);
          }
        }
      }
    }
    .el-tabs__active-bar {
      background-color: transparent !important;
    }
    .is-active {
      color: #025baa;
      border-color: #025baa;
    }
    .compute-table {
      .el-table td,
      .el-table th {
        padding: 8px 0;
      }
    }
  }
  .el-input--suffix .el-input__inner {
    padding-right: 20px;
  }
  .el-dialog__wrapper {
    transition-duration: 0.3s;
  }
  .dialog-fade-enter-active {
    animation: none !important;
  }
  .dialog-fade-leave-active {
    transition-duration: 0.15s !important;
    animation: none !important;
  }

  .dialog-fade-enter-active .el-dialog,
  .dialog-fade-leave-active .el-dialog {
    animation-fill-mode: forwards;
  }

  .dialog-fade-enter-active .el-dialog {
    animation-duration: 0.3s;
    animation-name: anim-open;
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  }

  .dialog-fade-leave-active .el-dialog {
    animation-duration: 0.3s;
    animation-name: anim-close;
  }

  @keyframes anim-open {
    0% {
      opacity: 0;
      transform: scale3d(0, 0, 1);
    }
    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes anim-close {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale3d(0.5, 0.5, 1);
    }
  }
  .picker-box {
    .el-input__inner {
      border: none;
    }
    .el-range-editor.el-input__inner {
      padding: 3px 0px;
    }
    .el-icon-date {
      display: none;
    }
    .el-range__close-icon {
      position: absolute;
      right: 0px;
      top: 2px;
    }
    .el-range-editor--mini .el-range-input {
      font-size: 14px;
      color: rgb(31, 36, 41);
    }
  }
}
// compute-tab 1366px适配
// @media screen and (max-width: 1366px) {
//     // 表格高度设置
//     .compute-tab {
//         .el-tabs,
//         .el-tabs__content {
//             height: 470px !important;
//         }
//         // 机房内核心设备 padding设置
//         #pane-3 {
//             .compute-table .el-table td,
//             .compute-box .compute-table .el-table th {
//                 padding: 3px 0 !important;
//             }
//         }
//         // 维修记录,维保记录 padding设置
//         #pane-4,
//         #pane-5 {
//             .compute-table .el-table td,
//             .compute-box .compute-table .el-table th {
//                 padding: 0 !important;
//             }
//         }
//     }
// }
@media screen and (max-width: 1600px) {
  // 表格高度设置
  // .compute-tab {
  //     .el-tabs,
  //     .el-tabs__content {
  //         height: 600px !important;
  //     }
  // }
  .compute-box .compute-tab .compute-table .el-table td {
    padding: 4px 0;
  }
}
</style>