<template>
  <div class="mytable">

    <div>
      <el-input
        class="search"
        placeholder="请输入内容"
        v-model="search"
        style="width:200px"
        size="mini"
        suffix-icon="el-icon-search"
        @input="handleSearch"
      >

      </el-input>
      <el-select
        class="select"
        v-model="value"
        placeholder="请选择"
        size="mini"
        @change="handleChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          style="font-size:14px;"
        >
        </el-option>
      </el-select>

      <el-table
        ref="filterTable"
        :data="list"
        :border="true"
        style="width:100%"
        :header-cell-style="{background:'#081444',color:'#d9dde9'}"
        :row-class-name="tableRowClassName"
        :row-style='{height:"56px"}'
        @row-click="handleClick"
      >
        <el-table-column
          prop="index"
          label="序号"
          width="102"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="设备名称"
          width="196"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="model"
          label="品牌"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="size"
          label="型号"
          width="380"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="floor"
          label="楼层"
          width="124"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="local"
          label="安装位置"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="genergy"
          label="生产厂商"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
export default {
  name: "mytable",
  props: {
    type: {
      type: String
    }
  },
  data() {
    return {
      search: null,
      options: [
        { label: "全部楼层", value: "全部楼层" },
        { label: "B2", value: "B2" },
        { label: "F2", value: "F2" }
      ],
      value: "全部楼层",
      srcList: [
        {
          index: "1",
          name: "离心式冷水机组 ",
          model: "格力",
          size: "LSBLX1300SE（制冷量USRT:1300）",
          floor: "B2",
          local: "制冷机房",
          number: "3",
          genergy: "格力"
        },
        {
          index: "2",
          name: "螺杆式冷水机组 ",
          model: "格力",
          size: "LSBLG1480HE/Nb（制冷量USRT:420）",
          floor: "B2",
          local: "制冷机房",
          number: "1",
          genergy: "格力"
        },
        {
          index: "3",
          name: "冷冻泵",
          model: "中航",
          size: "350S-26   ",
          floor: "B2",
          local: "制冷机房",
          number: "3",
          genergy: "中航"
        },
        {
          index: "4",
          name: "冷却泵",
          model: "中航",
          size: "350S-26  ",
          floor: "B2",
          local: "制冷机房",
          number: "3",
          genergy: "中航"
        },
        {
          index: "5",
          name: "冷冻泵",
          model: "中航",
          size: "ZHSW200-150-400C",
          floor: "B2",
          local: "制冷机房",
          number: "2",
          genergy: "中航"
        },
        {
          index: "6",
          name: "冷却泵",
          model: "中航",
          size: "ZHSW200-150-400C",
          floor: "B2",
          local: "制冷机房",
          number: "2",
          genergy: "中航"
        },
        {
          name: ""
        },
        {
          name: ""
        },
        {
          name: ""
        }
      ],

      list: []
    };
  },
  mounted() {
    this.list = this.srcList;
  },
  methods: {
    handleOpen() {
      this.$props.obj.show = false;
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "row1";
      }
      return "row2";
    },
    handleChange(val) {
      if (val == "全部楼层") {
        this.list = this.srcList;
      } else {
        const isList = this.srcList.filter(item => {
          return item.floor == val;
        });
        let noList = [];
        const length = this.srcList.length - isList.length;
        for (var i = 0; i < length; i++) {
          noList.push({});
        }
        this.list = isList.concat(noList);
      }
    },
    handleSearch(val) {
      const isList = this.srcList.filter(item => {
        return item.name.includes(val);
      });

      let noList = [];
      const length = this.srcList.length - isList.length;
      for (var i = 0; i < length; i++) {
        noList.push({});
      }
      this.list = isList.concat(noList);
    },
    handleClick(row) {
      if (row.name) {
        this.$emit("handleModal", true);
      }
    }
  },
  watch: {
    type(val) {
      // console.log(val);
      if (val == "floor-main") {
        this.srcList = [
          {
            index: "1",
            name: "冷却塔",
            model: "大连斯频德",
            size: "DX-M3657-E ",
            floor: "4F",
            local: "屋面",
            number: "3",
            genergy: "大连斯频德"
          },
          {
            index: "2",
            name: "冷却塔",
            model: "大连斯频德",
            size: "DX-M2543-D ",
            floor: "4F",
            local: "屋面",
            number: "1",
            genergy: "大连斯频德"
          },
          {
            index: "3",
            name: "新风机组",
            model: "格力",
            size: "GZK2420/GZK2816/GZK2820",
            floor: "4F",
            local: "屋面",
            number: "8",
            genergy: "格力"
          },
          {
            index: "4",
            name: "空调机组",
            model: "格力",
            size: "GZK1010/GZK1616/GZK1610/",
            floor: "5F",
            local: "影城",
            number: "11",
            genergy: "格力"
          },

          {
            index: "5",
            name: "空调机组",
            model: "格力",
            size: "GZK2816 ",
            floor: "3F",
            local: "古德菲力/大玩家",
            number: "4",
            genergy: "格力"
          },
          {
            index: "6",
            name: "空调机组",
            model: "格力",
            size: "GZK2416",
            floor: "2F",
            local: "国美/永辉",
            number: "2",
            genergy: "格力"
          },
          {
            index: "7",
            name: "空调机组",
            model: "格力",
            size: " GZK2416/2816",
            floor: "1F",
            local: "宝贝王/BISJA/优衣库/美邦",
            number: "8",
            genergy: "格力"
          },
          {
            index: "8",
            name: "空调机组",
            model: "格力",
            size: "GZK2820",
            floor: "B1",
            local: "大风车",
            number: "1",
            genergy: "格力"
          },
          {
            index: "9",
            name: "空调机组",
            model: "格力",
            size: "GZK2020",
            floor: "B2",
            local: "负一层中庭",
            number: "1",
            genergy: "格力"
          }
          // {
          //   index: "10",
          //   name: "吊柜",
          //   model: "格力",
          //   size: "G-2WDI/E、G-3WDI/E、",
          //   floor: "B1-3F",
          //   local: "公区",
          //   number: "107",
          //   genergy: "格力"
          // },
          // {
          //   index: "",
          //   name: "",
          //   model: "",
          //   size: "G-4WDI/E、G-5WDI/E、",
          //   floor: "",
          //   local: "",
          //   number: "",
          //   genergy: ""
          // },
          // {
          //   index: "",
          //   name: "",
          //   model: "",
          //   size: "G-6WDI/E、G-8WDI/E、",
          //   floor: "",
          //   local: "",
          //   number: "",
          //   genergy: ""
          // },
          // {
          //   index: "11",
          //   name: "新风机组",
          //   model: "格力",
          //   size: "G-2WDXI/B、G-4WDXI/B、",
          //   floor: "4F、5F",
          //   local: "商管办公室",
          //   number: "7",
          //   genergy: "格力"
          // },
          // {
          //   index: "",
          //   name: "",
          //   model: "",
          //   size: "G-10WDXI/E ",
          //   floor: "",
          //   local: "",
          //   number: "",
          //   genergy: ""
          // },
          // {
          //   index: "12",
          //   name: "风机盘管",
          //   model: "格力",
          //   size: "风机盘管",
          //   floor: "B1-5F",
          //   local: "步行街商铺",
          //   number: "1346",
          //   genergy: "格力"
          // }
        ];
        this.list = [
          {
            index: "1",
            name: "冷却塔",
            model: "大连斯频德",
            size: "DX-M3657-E ",
            floor: "4F",
            local: "屋面",
            number: "3",
            genergy: "大连斯频德"
          },
          {
            index: "2",
            name: "冷却塔",
            model: "大连斯频德",
            size: "DX-M2543-D ",
            floor: "4F",
            local: "屋面",
            number: "1",
            genergy: "大连斯频德"
          },
          {
            index: "3",
            name: "新风机组",
            model: "格力",
            size: "GZK2420/GZK2816/GZK2820",
            floor: "4F",
            local: "屋面",
            number: "8",
            genergy: "格力"
          },
          {
            index: "4",
            name: "空调机组",
            model: "格力",
            size: "GZK1010/GZK1616/GZK1610/",
            floor: "5F",
            local: "影城",
            number: "11",
            genergy: "格力"
          },

          {
            index: "5",
            name: "空调机组",
            model: "格力",
            size: "GZK2816 ",
            floor: "3F",
            local: "古德菲力/大玩家",
            number: "4",
            genergy: "格力"
          },
          {
            index: "6",
            name: "空调机组",
            model: "格力",
            size: "GZK2416",
            floor: "2F",
            local: "国美/永辉",
            number: "2",
            genergy: "格力"
          },
          {
            index: "7",
            name: "空调机组",
            model: "格力",
            size: " GZK2416/2816",
            floor: "1F",
            local: "宝贝王/BISJA/优衣库/美邦",
            number: "8",
            genergy: "格力"
          },
          {
            index: "8",
            name: "空调机组",
            model: "格力",
            size: "GZK2820",
            floor: "B1",
            local: "大风车",
            number: "1",
            genergy: "格力"
          },
          {
            index: "9",
            name: "空调机组",
            model: "格力",
            size: "GZK2020",
            floor: "B2",
            local: "负一层中庭",
            number: "1",
            genergy: "格力"
          }
          // {
          //   index: "10",
          //   name: "吊柜",
          //   model: "格力",
          //   size: "G-2WDI/E、G-3WDI/E、",
          //   floor: "B1-3F",
          //   local: "公区",
          //   number: "107",
          //   genergy: "格力"
          // },
          // {
          //   index: "",
          //   name: "",
          //   model: "",
          //   size: "G-4WDI/E、G-5WDI/E、",
          //   floor: "",
          //   local: "",
          //   number: "",
          //   genergy: ""
          // },
          // {
          //   index: "",
          //   name: "",
          //   model: "",
          //   size: "G-6WDI/E、G-8WDI/E、",
          //   floor: "",
          //   local: "",
          //   number: "",
          //   genergy: ""
          // },
          // {
          //   index: "11",
          //   name: "新风机组",
          //   model: "格力",
          //   size: "G-2WDXI/B、G-4WDXI/B、",
          //   floor: "4F、5F",
          //   local: "商管办公室",
          //   number: "7",
          //   genergy: "格力"
          // },
          // {
          //   index: "",
          //   name: "",
          //   model: "",
          //   size: "G-10WDXI/E ",
          //   floor: "",
          //   local: "",
          //   number: "",
          //   genergy: ""
          // },
          // {
          //   index: "12",
          //   name: "风机盘管",
          //   model: "格力",
          //   size: "风机盘管",
          //   floor: "B1-5F",
          //   local: "步行街商铺",
          //   number: "1346",
          //   genergy: "格力"
          // }
        ];
      } else {
        this.list = [
          {
            index: "1",
            name: "离心式冷水机组 ",
            model: "格力",
            size: "LSBLX1300SE（制冷量USRT:1300）",
            floor: "B2",
            local: "制冷机房",
            number: "3",
            genergy: "格力"
          },
          {
            index: "2",
            name: "螺杆式冷水机组 ",
            model: "格力",
            size: "LSBLG1480HE/Nb（制冷量USRT:420）",
            floor: "B2",
            local: "制冷机房",
            number: "1",
            genergy: "格力"
          },
          {
            index: "3",
            name: "冷冻泵",
            model: "中航",
            size: "350S-26   ",
            floor: "B2",
            local: "制冷机房",
            number: "3",
            genergy: "中航"
          },
          {
            index: "4",
            name: "冷却泵",
            model: "中航",
            size: "350S-26  ",
            floor: "B2",
            local: "制冷机房",
            number: "3",
            genergy: "中航"
          },
          {
            index: "5",
            name: "冷冻泵",
            model: "中航",
            size: "ZHSW200-150-400C",
            floor: "B2",
            local: "制冷机房",
            number: "2",
            genergy: "中航"
          },
          {
            index: "6",
            name: "冷却泵",
            model: "中航",
            size: "ZHSW200-150-400C",
            floor: "B2",
            local: "制冷机房",
            number: "2",
            genergy: "中航"
          },
          {
            name: ""
          },
          {
            name: ""
          },
          {
            name: ""
          }
        ];
        this.srcList = [
          {
            index: "1",
            name: "离心式冷水机组 ",
            model: "格力",
            size: "LSBLX1300SE（制冷量USRT:1300）",
            floor: "B2",
            local: "制冷机房",
            number: "3",
            genergy: "格力"
          },
          {
            index: "2",
            name: "螺杆式冷水机组 ",
            model: "格力",
            size: "LSBLG1480HE/Nb（制冷量USRT:420）",
            floor: "B2",
            local: "制冷机房",
            number: "1",
            genergy: "格力"
          },
          {
            index: "3",
            name: "冷冻泵",
            model: "中航",
            size: "350S-26   ",
            floor: "B2",
            local: "制冷机房",
            number: "3",
            genergy: "中航"
          },
          {
            index: "4",
            name: "冷却泵",
            model: "中航",
            size: "350S-26  ",
            floor: "B2",
            local: "制冷机房",
            number: "3",
            genergy: "中航"
          },
          {
            index: "5",
            name: "冷冻泵",
            model: "中航",
            size: "ZHSW200-150-400C",
            floor: "B2",
            local: "制冷机房",
            number: "2",
            genergy: "中航"
          },
          {
            index: "6",
            name: "冷却泵",
            model: "中航",
            size: "ZHSW200-150-400C",
            floor: "B2",
            local: "制冷机房",
            number: "2",
            genergy: "中航"
          },
          {
            name: ""
          },
          {
            name: ""
          },
          {
            name: ""
          }
        ];
      }
    }
  }
};
</script>
<style lang="less" scoped>
.table {
  color: #fff;
}
.mytable {
  width: 1500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  //   z-index: 11000;
}
/deep/ .row1 {
  td {
    background: #081444;
    color: #d9dde9;
    font-size: 18px;
  }
}
/deep/ .row2 {
  td {
    background: #08184b;
    color: #d9dde9;
    font-size: 18px;
  }
}
.select {
  margin-left: 10px;
  margin-bottom: 14px;
}
.search {
  margin-bottom: 14px;
}
/deep/ .el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #0c2e75;
}
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #0c2e75;
}
/deep/ .el-input--mini {
  border: 1px solid #1060d1;
  border-radius: 2px;
  input {
    border: none;
  }
  .el-input__inner {
    background: #0a1b52;
    color: #fff;
    font-size: 14px;
  }
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #0c2e75 !important;
  cursor: pointer;
}
/deep/ .el-select-dropdown__list {
  background-color: #0a1b52;
}
/deep/ .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #0c2e75;
}
/deep/ .el-select-dropdown {
  border: none;
}
/deep/ .el-popper .popper__arrow {
  display: none;
}
/deep/ .el-select-dropdown__item {
  color: #fff;
}
/deep/ .el-table th,
.el-table tr {
  background: none;
}
/deep/ .el-table--border,
.el-table--group {
  border: 1px solid #0c2e75;
}
/deep/ .el-table--border th,
.el-table__fixed-right-patch {
  border: 1px solid #0c2e75;
}
/deep/ .el-table th,
.el-table tr {
  font-size: 18px;
}
</style>
<style >
.el-select-dropdown__list {
  background-color: #0a1b52;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #0c2e75;
}
.el-select-dropdown {
  border: none;
}
.el-popper .popper__arrow {
  display: none;
}
.el-select-dropdown__item {
  color: #fff;
}
</style>