<template>
  <div class="maintenance-supervision">
    <div class="maintenance-supervision_header">
      <div style="display: flex">
        <el-select v-model="param.warningType" placeholder="告警类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="param.czzt" placeholder="处置状态">
          <el-option
            v-for="item in czztOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <el-button @click="getList">搜索</el-button>
    </div>
    <div >
      <div class="row header">
        <span class="num">序号</span>
        <span class="time">区域</span>
        <span class="person">未处理(个)</span>
        <span class="result">已处理(个)</span>
      </div>
      <VueSeamlessScroll v-if="reload && list1.length > 0" :data="list1" :class-option="classOption" class="warp">
        <ul class="item">
          <li class="row" :class="{
            active: item.isActive
          }" v-for="(item, index) in list1" :key="index" @click="openBasicModal1(item)">
            <span class="num">{{ index + 1 }}</span>
            <span class="time">{{ item.qx }}</span>
            <span class="person">{{ item.wcl }}</span>
            <span class="result">{{ item.ycl }}</span>
          </li>
        </ul>
      </VueSeamlessScroll>
      <div v-else class="empty-container">
        <img src="../../../assets/images/null2.png" alt="">
      </div>
    </div>
    <basic-modal top="120px" ref="basicInfoModal1">
      <fxfbCont :qy="nameItem" />
      <ZhxfModalHeader slot="title" />
    </basic-modal>
  </div>
</template>
  <script>
import VueSeamlessScroll from "vue-seamless-scroll";
import { getGqcz, getType } from "@/api/iot.js";
import { toFirst } from "../../../utils";
import fxfbCont from "./fxfbCont.vue";
export default {
  name: "MaintenanceSupervision",
  props: ["qx"],
  data() {
    return {
      search: "",
      reload: true,
      param: {
        czzt: null,
        warningType: null,
        pageNum: 1,
        pageSize: 100,
      },
      options: [],
      czztOptions: [
        {
          value: "未处理",
          label: "未处理",
        },
        {
          value: "已处理",
          label: "已处理",
        },
      ],
      list1: [
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
        // ["万州区", "1200", "8765"],
      ],
      value: "",
      checked: 0,
      nameItem:''
    };
  },
  components: {
    VueSeamlessScroll,
    fxfbCont
  },
  computed: {
    classOption() {
      return {
        singleHeight: 43,
        autoPlay: this.qx === '重庆市'
      };
    },
  },
  methods: {
    getList() {
      this.reload = false
      getGqcz(this.param).then((res) => {
        // console.log(res);
        const tempList = [];
        if (res.data.rows) {
          res.data.rows.forEach(p => {
            tempList.push({...p, isActive: p.qx === this.qx })
          })
        }
        this.list1 = toFirst(tempList, this.qx, 'qx');
        this.reload = true
      });
    },
    getTypes() {
      getType({ pageNum: 1, pageSize: 1000 }).then((res) => {
        console.log(res);
        if (res.data.rows) {
          const options = [];
          res.data.rows.forEach((p) => {
            options.push({
              label: p.warningType,
              value: p.warningType,
            });
          });
          this.options = options;
        }
      });
    },
    openBasicModal1(item) {
      this.nameItem=item.qx
      this.showModal("basicInfoModal1");
    },
  },
  watch: {
    qx() {
      this.getList();
    }
  },
  created() {
    this.getTypes();
    this.getList();
  },
};
</script>
  
  <style scoped lang="less">
.maintenance-supervision {
  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // padding: 10px 10px 0px 20px;
  ::v-deep(.el-input__inner) {
    border: none;
    background: linear-gradient(
      360deg,
      rgba(0, 148, 255, 0.5) 0%,
      rgba(0, 148, 255, 0.31) 100%
    );
    color: #fff;
  }
  ::v-deep(.el-button) {
    border: none;
    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
    color: #fff;
  }
  .maintenance-supervision_header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #154956;
    padding-bottom: 2px;
    margin: 10px 6px 6px;
    font-size: 12px;
    color: rgb(79, 149, 186);
  }
  .warp {
    height: 520px;
    margin: 0 auto;
    overflow: hidden;
    .item {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      cursor: pointer;
      
    }
    &:hover {
				overflow: auto;
			}
  }

  .header {
    color: #fff;
    height: 33px !important;
    line-height: 33px !important;
    background-color: rgba(0, 163, 255, 0.3) !important;
    color: #61dbff;
    margin-top: 15px;
    margin-bottom: 6px;
  }
  li.row.active {
  background-color: rgba(0, 213, 255, 0.2);
}

  .row,
  li,
  a {
    display: block;
    height: 39px;
    line-height: 39px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.2);
    .time,
    .num,
    .person,
    .result {
      flex: 0.33;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis !important; // 超出隐藏
      white-space: nowrap;
    }
    .result {
      color: #68d1ff;
    }
    .num {
      flex: 0.15;
    }
  }
}

/deep/.el-input__inner {
  background-color: #184254;
  width: 100px;
  height: 30px;
  margin-bottom: 5px;
  margin-right: 5px;
}

/deep/.el-button {
  width: 120px;
  height: 32px;
  font-size: 14px;
  line-height: 2px;
  background: #184254;
  margin: 0 20px 0 30px;
  color: #fff;
  border-radius: 5px;
  border: none;
}
// /deep/.el-select-dropdown{

//     background-color:#184254 !important;
//     position: fixed;

//   }

// /deep/.el-select-dropdown{
//      border: none;
//      background-color: #184254 ;
//  }
//输入框
//  /deep/.el-input__inner{
//      color:#eee;
//      border-color: #00fff6;
//      background-color: rgba(1, 28, 82, 0.8);
//  }
//  //聚焦时的样式
//  /deep/.el-select .el-input.is-focus .el-input__inner{
//      border-color: #0B61AA;
//      background-color: rgba(1, 28, 82, 0.8);
//      color:#00D3E9;
//  }
//  //下拉框选中
//  /deep/.el-select-dropdown__item{
//      color: #eee;
//  }
//  //鼠标经过下拉框
//  /deep/.el-select-dropdown__item.hover,
//  /deep/.el-select-dropdown__item:hover{
//      color:#00D3E9;
//      background-color: #0F3360;
//  }
</style>
  
  
  <style>
.el-select-dropdown.el-popper {
  background-color: #4167a0;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #4167a0 !important;
}
.el-select-dropdown.el-popper {
  border: 1px solid rgba(0, 213, 255, 0.6) !important;
}
.el-select-dropdown.el-popper li.el-select-dropdown__item span {
  color: #fff;
}
.el-select-dropdown.el-popper li.el-select-dropdown__item.selected span {
  color: #2f7df2;
}
.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
  background-color: #2f7df2;
}
.el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
  color: #fff !important;
}
.select_btn {
  margin-left: -10px;
}
</style>
  