<template>
  <div class="maintenance-supervision">
    <div class="maintenance-supervision_header">
      <div class="item__top">
        <el-select
          clearable
          style="width: 160px"
          v-model="value"
          placeholder="选择警情类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="times"
          type="daterange"
          size="size"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="item__bottom">
        <el-input v-model="search" placeholder="请输入建筑名"></el-input>
        <el-button style="width: 100px; margin: 0" @click="searchTab"
          >搜索</el-button
        >
        <el-button style="width: 100px; margin: 0" @click="resetData"
          >重置</el-button
        >
      </div>
    </div>
    <div>
      <div class="row header">
        <span class="time">警情类型</span>
        <span class="person">地址</span>
        <span class="result">主站单位</span>
        <span class="result1">处置状态</span>
        <span class="result2">报警时间</span>
      </div>
      <div class="" style="height: 152px; overflow: auto">
        <ul class="item">
          <div v-for="(item, index) in czztList" :key="index">
            <li
              class="row"
              @click="tab(item.id)"
              :class="item.id === id ? 'selected' : ''"
            >
              <span
                class="time"
                style="width: 110px; overflow: hidden; height: 40px"
                >{{ item.zqlx }}</span
              >
              <span
                class="person"
                style="width: 110px; overflow: hidden; height: 40px"
                >{{ item.ddmc }}</span
              >
              <span
                class="result"
                style="width: 110px; overflow: hidden; height: 40px"
                >{{ item.sszhid }}</span
              >
              <span
                class="result1"
                style="
                  width: 110px;
                  overflow: hidden;
                  height: 40px;
                  text-align: center;
                "
                >{{ item.ajzt }}</span
              >
              <span
                class="result2"
                style="
                  width: 110px;
                  overflow: hidden;
                  height: 40px;
                  text-align: center;
                "
                >{{ item.lasj }}</span
              >
              <span
                class="resImg"
                v-if="item.bjrsfbk && item.bjrsfbk != '无人员被困'"
              ></span>
            </li>
            <div class="bjxxBack" v-if="item.id === id">
              <div class="bjTetx">报警电话：{{ item.bjrlxdh || "-" }}</div>
              <div class="bjTetx">人员被困情况：{{ item.bjrsfbk || "-" }}</div>
              <div class="bjTetx">有无明火：{{ item.jqJyqk || "-" }}</div>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getJumpList } from "@/api/index.js";
import moment from "moment";
export default {
  name: "MaintenanceSupervision",
  data() {
    return {
      value: "",
      times: "",
      type: "",
      search: "",
      id: null,
      options: [
        {
          value: "火灾扑救",
          label: "火灾扑救",
        },
        {
          value: "抢险救援",
          label: "抢险救援",
        },
        {
          value: "反恐排爆",
          label: "反恐排爆",
        },
        {
          value: "公务执勤",
          label: "公务执勤",
        },
        {
          value: "社会救助",
          label: "社会救助",
        },
        {
          value: "其他出动",
          label: "其他出动",
        },
        {
          value: "拉动演练",
          label: "拉动演练",
        },
      ],
      checked: 0,
      newList: "",
      czztList: [],
    };
  },
  components: {},
  computed: {
    classOption() {
      return {
        singleHeight: 43,
      };
    },
  },
  props: {
	flag: String,
    list: Array,
    pId: [String, Number],
    selectTimes: Array,
  },
  watch: {
    list: {
      handler(data) {
        this.czztList = data;
      },
      // immediate:true,
      deep: true,
    },
    selectTimes: {
      handler(data) {
        this.resetData();
        if (data.length === 1) {
          this.times = [new Date(data[0]), new Date(data[0])];
        } else if (data.length === 2) {
          this.times = [new Date(data[0]), new Date(data[1])];
        }
        this.searchTab();
      },
    },
  },
  methods: {
    searchTab() {
      let tempTimes = [];
      if (this.times.length > 0 && this.times[0] === this.times[1]) {
        tempTimes = [moment(this.times[0]).format("YYYY-MM-DD")];
      } else if (this.times.length > 0) {
        tempTimes = this.times.map((item) => moment(item).format("YYYY-MM-DD"));
      }
      const params = {
        pageSize: 100,
        pageNum: 1,
        ddmc: this.search,
        zqlx: this.value,
        times: tempTimes,
		type: this.flag
      };
      getJumpList(params).then((res) => {
        this.czztList = res.data.rows;
        if (this.czztList.length > 0) {
          this.tab(this.czztList[0].id);
        } else {
          this.tab(null);
        }
      });
    },
    resetData() {
      this.times = [];
      this.value = "";
      this.search = "";
	  this.searchTab()
    },
    tab(id) {
      this.id = id;
      this.$emit("callback", id);
    },
  },
  created() {
    if (this.$route.query.type) {
      this.type = Number(this.$route.query.type);
    }

    if (this.selectTimes.length === 1) {
      this.times = [
        new Date(this.selectTimes[0]),
        new Date(this.selectTimes[0]),
      ];
    } else if (this.selectTimes.length === 2) {
      this.times = [
        new Date(this.selectTimes[0]),
        new Date(this.selectTimes[1]),
      ];
    }
    this.searchTab();
  },
};
</script>

<style scoped lang="less">
.resImg {
  width: 30px;
  height: 30px;
  position: relative;
  right: -50px;
  background: url(../../../../assets/images/bkry.png) center no-repeat;
  background-size: 30px;
}
::-webkit-scrollbar {
  border-radius: 3px;
  width: 8px;
  height: 8px;
  background: rgba(0, 213, 255, 0.3);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 213, 255, 0.3);
}
.selected {
  width: 100%;
  height: 40px;
  background: rgba(0, 194, 255, 0.14) !important;
  box-shadow: 0px 0px 2px 0px #44f1ff !important;
}

.el-input {
  width: 120px !important;
}

.maintenance-supervision {
  // 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;
    flex-direction: column;
    justify-content: space-around;
    border-bottom: 1px solid #154956;
    padding-bottom: 2px;
    margin-top: 15px;
    font-size: 12px;
    color: rgb(79, 149, 186);
    .item__top {
      display: flex;
      gap: 20px;
    }
    .item__bottom {
      display: flex;
      gap: 20px;
    }
  }

  .warp {
    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;
  }

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 70px;
    box-sizing: border-box;
  }

  .bjxxBack {
    padding: 8px 13px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background: url(@/assets/images/bjxxImg.png) center no-repeat;
    background-size: 100% 50px;
    margin-top: -10px;

    .bjTetx {
      flex-grow: 1;
    }
  }

  li,
  a {
    height: 39px;
    line-height: 39px;
    margin-bottom: 4px;
    display: flex;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

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

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

/deep/.select_btn {
  position: absolute;
  top: 225px;
  right: 320px;
  //下拉框
}
</style>
