<template>
  <!-- <div
    class="alarming-situation-dynamics"
    v-if="PoliceList.length > 0"
    style="padding: 6px 19px 0px 19px; overflow: hidden"
  >
    <div class="row header">
      <span class="time">发生时间</span>
      <span class="address">所在辖区</span>
      <span class="name">建筑名称</span>
      <span class="type">警情类型</span>
      <span class="org">主管机构</span>
      <span class="state">处置状态</span>
      <span class="level">风险等级</span>
    </div>
    <VueSeamlessScroll
      :data="PoliceList"
      :class-option="classOption"
      class="warp"
      hoverStop
    >
      <ul class="item">
        <li
          class="row"
          v-for="(item, index) in PoliceList"
          :key="index"
          @click="rowClickHandler(item.ajid)"
        >
          <span class="time">{{ item.fssj }}</span>
          <span class="address">{{ item.szxq }}</span>
          <span
            class="name"
            style="overflow: hidden; text-overflow: ellipsis"
            >{{ item.gcjzmc }}</span
          >
          <span class="type">{{ item.jqlx }}</span>
          <span class="org">{{ item.zgjg }}</span>
          <span class="state">{{ item.czzt }}</span>
          <span
            class="level"
            :style="{
              color: levelText(item.fxdj),
            }"
            >{{ item.fxdj }}</span
          >
        </li>
      </ul>
    </VueSeamlessScroll>
  </div> -->
  <div>
    <div class="gg-wap" @click="onClickHandler(5)">
      <ul class="text-goubt" v-show="list.length > 0">
        <li v-for="(item, index) in list" :key="index">
          <span style="margin-right: 6px">{{ item.fssj }}</span>
          <span>{{ item.zgjg }}</span>
          <span>正在</span>
          <span> {{ item.jqfsdd }}</span>
          <span>进行</span>
          <span> {{ item.jqlx }}</span>
        </li>
      </ul>
      <li class="text-none" v-show="list.length === 0">当前：无警情</li>
    </div>
    <div class="jqdt-panel">
      <div class="item">
        <div>
          <span class="value" @click="onClickHandler(5)">{{ list.length }}</span
          ><span class="unit">起</span>
        </div>
        <div>当前</div>
      </div>
      <div class="item" v-for="(item, index) in totalData" :key="index">
        <div>
          <span class="value" @click="onClickHandler(index)">{{
            item.con
          }}</span
          ><span class="unit">起</span>
        </div>
        <div>{{ item.type }}</div>
      </div>
      <basic-modal
        top="0px"
        width="100%"
        name="历史警情查询"
        ref="alarmingSituationDynamics"
      >
        <ModalContent :selectTimes="times" :type="flag"></ModalContent>
      </basic-modal>
    </div>
  </div>
</template>

<script>
// 接警 下达 出动 到场 展开 出水 控制 熄灭 停水 清理 返回 #归队
import VueSeamlessScroll from "vue-seamless-scroll";
import { getJqdtListWithZero } from "@/api/index";
import ModalContent from "./ModalContent.vue";
import moment from "moment";
export default {
  props: {
    PoliceList: {
      type: Array,
      default: () => [],
    },
    qx: String,
  },
  name: "AlarmingSituationDynamics",
  components: {
    VueSeamlessScroll,
    ModalContent,
  },
  data() {
    return {
      id: null,
      totalData: [
        // {
        //   type: "当前",
        //   con: 0,
        // },
        {
          type: "今日",
          con: 0,
        },
        {
          type: "本周",
          con: 0,
        },
      ],
      times: [],
      list: [],
      flag: "",
    };
  },
  watch: {
    qx: {
      handler() {
        this.loadData();
      },
      immediate: true,
    },
    PoliceList: {
      handler(val) {
        this.list = val;
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    classOption() {
      return {
        singleHeight: 46,
      };
    },
  },
  methods: {
    rowClickHandler(id) {
      this.id = id;
      this.$router.push(`/police?id=${id}`);
    },
    levelText(text) {
      return {
        高风险: "#FF0B0B",
        较高风险: "#ff833d",
        一般风险: "#fbff3d",
        低风险: "#35c2ff",
      }[text];
    },
    loadData() {
      getJqdtListWithZero({
        qx: this.qx,
      }).then((res) => {
        this.totalData = res.data.data.slice(0, 2);
      });
    },
    onClickHandler(idx) {
      if (idx == 5) {
		this.times = []
        this.flag = "text";
      }else{
		this.times = []
		this.flag = null;
	  }
      const date = new Date();
      if (idx === 0) {
        this.times = [moment(date).format("YYYY-MM-DD")];
      } else if (idx === 1) {
        let weekOfDay = parseInt(moment().format("E"));
        this.times = [
          moment(date)
            .startOf("day")
            .subtract(weekOfDay - 1, "days")
            .format("YYYY-MM-DD"),
          moment(date)
            .startOf("day")
            .subtract(weekOfDay - 7, "days")
            .format("YYYY-MM-DD"),
        ];
      } else if (idx === 2) {
        this.times = [
          moment(date).startOf("month").format("YYYY-MM-DD"),
          moment(date).endOf("month").format("YYYY-MM-DD"),
        ];
      }
      this.showModal("alarmingSituationDynamics");
    },
    // 当前跳转警情动态
    toFrie() {
      this.$router.push(`/police?type=1`);
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep(.el-dialog) {
  margin: 0px;
}
::v-deep(.el-dialog__wrapper) {
  overflow: hidden;
}
.alarming-situation-dynamics li.row:hover {
  background: rgba(0, 194, 255, 0.14) !important;
}
.jqdt-panel {
  display: flex;
  justify-content: space-around;
  align-items: centers;
  //   padding: 54px 0px;
  margin-top: 20px;

  .item {
    width: 142px;
    height: 166px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 213, 255, 0.12);
    background-image: url("../../../../assets/images/border-jqdt.png");
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 16px;
    .value {
      font-size: 30px;
      color: #ffd749;
      cursor: pointer;
    }
    .unit {
      font-size: 12px;
      display: inline-block;
      margin-left: 5px;
    }
  }
}
</style>

<style scoped lang="less">
.warp {
  height: 230px;
  margin: 0 auto;
  overflow: hidden;

  .item {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
  }
  &:hover {
    overflow: auto;
  }
}

.header {
  color: #fff;
  height: 38px !important;
  line-height: 38px !important;
  background-color: rgba(68, 241, 255, 0.1) !important;
}

li.row > span {
  text-align: center;
  font-size: 16px;
  position: relative;
  display: inline-block;

  &::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #1d525f;
    height: 14px;
    width: 1px;
  }

  &:nth-child(1) {
    &::before {
      background-color: #44f1ff;
      box-shadow: 0px 0px 2px 0px #44f1ff;
    }
  }
}

li.row {
  .address {
    color: #99e0ff;
  }

  .name,
  .type,
  .org,
  .state,
  .level {
    color: #44f1ff;
  }

  border-bottom: 1px dashed #1d525f;
  box-sizing: border-box;
}

.row,
li,
a {
  display: block;
  height: 46px;
  line-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.2);

  .time,
  .address,
  .name,
  .type,
  .org,
  .state,
  .level {
    flex: 0.15;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .org {
    flex: 0.4;
    overflow: hidden;
    text-overflow: ellipsis !important; // 超出隐藏
    white-space: nowrap;
  }

  .name {
    flex: 0.3;
  }
}
.gg-wap {
  width: 99%;
  height: 36px;
  margin-top: 10px;
  background: rgba(210, 206, 93, 0.25);
  cursor: pointer;
  border: 4px solid;
  border-image: linear-gradient(
      90deg,
      rgba(26, 33, 41, 0.1) 1%,
      rgba(210, 206, 93, 0.25) 49%,
      rgba(26, 33, 41, 0.1) 98%
    )
    30 30;
  //   margin: auto;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(26, 33, 41, 0.1) 1%,
    rgba(210, 206, 93, 0.25) 49%,
    rgba(26, 33, 41, 0.1) 98%
  );
}

@keyframes anis {
  100% {
    transform: translateX(-120%);
  }
}
.text-goubt {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  font-size: 0;
  animation: anis 40s linear infinite;
  animation-delay: 10s;
  white-space: nowrap;
}
.text-none {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  color: #44f1ff;
}
.text-goubt > li {
  margin-right: 20px;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-shadow: 0px 4px 0px rgba(91, 75, 26, 0.35);
  background: linear-gradient(
    180deg,
    #ffffff 1.8310546875%,
    #ffe56a 50.244140625%,
    #fffcf3 53.0029296875%,
    #fff1bb 99.365234375%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  box-sizing: border-box;
  padding-bottom: 0.4vh;
}

.text-goubt:hover {
  animation-play-state: paused;
}
</style>
